ListView

Descrição do componente ListView, seus atributos e construtores

O que é?

O componente ListView é responsável por definir uma lista de itens recicláveis nativamente. Esses itens podem ser quaisquer componentes server driven. O uso do ListView é recomendado para situações onde há repetição de componentes, porém com dados diferentes.

A sua estrutura é representada como mostrado abaixo:

ListView

Atributo	Tipo	Obrigatório	Definição
direction	ListDirection		Define o direcionamento em que os items da lista são exibidos.
context	ContextData		Define o contexto do componente.
onInit	List<Action>		Lista de ações a serem executadas assim que o componente é exibido.
dataSource	Bind<List<Any>>	✓	Expressão que aponta para uma lista de valores usados para popular o componete.
templates	List<ServerDrivenComponent>	✓	Representa um array de template, onde cada template corresponde a uma celula na lista através de um `ServerDrivenComponent`.
isScrollIndicatorVisible	Bool		Define se a barra de scroll é visivel.
onScrollEnd	List<Action>		Lista de ações executadas quando a lista chega ao fim.
scrollEndThreshold	Int		Define a porcentagem rolada da lista para disparar o `onScrollEnd`.
iteratorName	String		É o identificador do contexto de cada célula.
key	String		Aponta para um valor único presente em cada item do `dataSource` para ser usado como um sufixo nos ids dos componentes do template.

ListDirection

É um ENUM, cujos valores são:

Valor	Definição
VERTICAL	Quando os items são exibidos em `LINHAS`.
HORIZONTAL	Quando os itens são exibidos em `COLUNAS`.

Valor default é ListDirection.VERTICAL

Templates

case é uma expressão que retornará true ou false.

O template a ser usado será decidido de acordo com a propriedade case do template.

O primeiro template onde case é true será o template escolhido para renderizar um item. Se todos forem false, então, o primeiro template onde case é omitido (template padrão) é usado.

    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.

Última modificação 01/07/2021: refactor: adjust ordem pages inside API (#695) (fc266566)