⚠️ Você está vendo a documentação da versão: v1.6

Beagle v1.6 não é mais mantida ativamente. A versão documentada que você está visualizando pode conter funcionalidades depreciadas. Para obter as funcionalidades mais recentes, consulte a nossa última versão .

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 partir da versão 1.5.0 passamos a suportar o uso de contexto e reciclagem de celulas no ListView, com isso disponibilizamos duas formas de construir o componente. A versão depreciada foi mantida somente para manter retrocompatibilidade, se possível atualize para a nova versão do componente para melhor desempenho.

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.
template	ServerDrivenComponent	✓	Representa cada 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

ListView Depreciado

Atributo	Tipo	Obrigatório	Definição
children	List<ServerDrivenComponent>	✓	Define os itens da lista de visualização. Eles podem ser configurados como uma lista de `ServerDrivenComponents` ou como `views.`
direction	ListDirection		Define o direcionamento da lista de visualização.

Como usar?

{
    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}"),
        template = 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}"),
            )
        ).applyStyle(
            Style(
                margin = EdgeValue(bottom = 20.unitReal())
            )
        )
    )
}

ListView Depreciado

JSON
Kotlin DSL

ListView(
    direction = ListDirection.HORIZONTAL,
    children = listOf(
        Text(
            text = "Beagle Text list",
            textColor = "#FF0000",
            alignment = TextAlignment.CENTER
        ),
        Text(
            text = "Beagle Text list",
            textColor = "#00FF00",
            alignment = TextAlignment.CENTER
        ),
        Text(
            text = "Beagle Text list",
            textColor = "#0000FF",
            alignment = TextAlignment.CENTER
        )
    )
)

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 11/03/2021: adding attribute isScrollIndicatorVisible (#357) (24efc8eb)