ListView

You will find here the description of the ListView component, its attributes and constructors

What is it?

The ListView component is responsible for defining a list of recyclable items natively. These items can be any server-driven components. The use of ListView is recommended for situations where there is repetition of components, but with different data.

See how the structure is represented:

ListView

Attribute	Type	Required	Definition
direction	ListDirection		Sets the direction in which list items are displayed.
context	ContextData		Defines the context of the component.
onInit	List<Action>		List of actions to be performed as soon as the component is displayed.
dataSource	Bind<List<Any>>	✓	Expression that points to a list of values used to populate the component.
templates	List<ServerDrivenComponent >	✓	It represents a template array, where each template corresponds to a cell in the list through a`ServerDrivenComponent`.
isScrollIndicatorVisible	Bool		Set the scroll bar visibility.
onScrollEnd	List<Action>		List of actions taken when the list ends.
scrollEndThreshold	Int		Defines the percentage scrolled from the list to trigger `onScrollEnd`.
iteratorName	String		It is the context identifier for each cell.
key	String		Points to a unique value present in each item of the `dataSource` to be used as a suffix in the ids of the template components.

ListDirection

It is an ENUM, the values are:

Values	Definition
VERTICAL	When itens are displayed in `LINES`.
HORIZONTAL	When itens are displayed in `COLUMNS`.

Default value is ListDirection.VERTICAL

Templates

case is expression that will return true or false.

The template to use will be decided according to the property case of the template.

The first template where case is true is the template chosen to render an item. If all are false, then the first template where case is omitted (default template) is used.

    data class Person (
            val name: String,
            val race: String,
            val planet: String,
            val isMistborn: Boolean,
            val age: Int,
            val sex: String
    )
    
    val characters = listOf(
        Person(
            name = "Kelsier",
            race = "Half-skaa",
            planet = "Scadrial",
            isMistborn = true,
            age = 38,
            sex = "male"
        ),
        Person(
            name = "Vin",
            race = "Half-skaa",
            planet = "Scadrial",
            isMistborn = true,
            age = 20,
            sex = "female"
        ),
        Person(
            name = "TenSoon",
            race = "Kandra",
            planet = "Scadrial",
            isMistborn = false,
            age = 40,
            sex = "male"
        ),
    )
    
     ListView(
          context = ContextData(id = "characters", value = characters),
          dataSource = expressionOf("@{characters}"),
          templates = listOf(
            Template(
              case = expressionOf("@{eq(item.race, 'Half-skaa')}"),
              view = Container(
                children = listOf(
                  Text("Name: @{item.name}"),
                  Text("Race: @{item.race}"),
                  Text("Mistborn: @{item.isMistborn}"),
                  Text("Planet: @{item.planet}"),
                  Text("sex: @{item.sex}"),
                  Text("age: @{item.age}"),
                )
              ).setStyle {
                margin = EdgeValue.only(bottom = 20)
              }
            ),
              Template(
              case = expressionOf("@{eq(item.race, 'Kandra')}"),
              view = Container(
                children = listOf(
                  Text("Name: @{item.name}"),
                  Text("Race: @{item.race}"),
                  Text("Mistborn: @{item.isMistborn}"),
                )
              ).setStyle {
                margin = EdgeValue.only(bottom = 20)
              }
              ),
            Template(
              view = Container(
                children = listOf(
                  Text("Planet: @{item.planet}"),
                  Text("sex: @{item.sex}"),
                  Text("age: @{item.age}"),
                )
              ).setStyle {
                margin = EdgeValue.only(bottom = 20)
              }
            )
          )
        )

Feedback

Was this page helpful?

Glad to hear it! Please tell us how we can improve.

Sorry to hear that. Please tell us how we can improve.

Last modified July 1, 2021: refactor: adjust ordem pages inside API (#695) (fc266566)