GridView

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

O que é?

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

A sua estrutura é representada como mostrado abaixo:

GridView

AtributoTipoObrigatórioDefinição
spanCountIntDefine o número de colunas ou linhas que o GridView irá exibir.
directionGridViewDirectionDefine o direcionamento em que os items são exibidos.
contextContextDataDefine o contexto do componente.
onInitList<Action>Lista de ações a serem executadas assim que o componente é exibido.
dataSourceBind<List<Any>>Expressão que aponta para uma lista de valores usados para popular o componete.
templatesList<ServerDrivenComponent>Representa um array de template, onde cada template corresponde a uma celula na lista através de um ServerDrivenComponent.
isScrollIndicatorVisibleBoolDefine se a barra de scroll é visivel.
onScrollEndList<Action>Lista de ações executadas quando o GridView chega ao fim.
scrollEndThresholdIntDefine a porcentagem rolada do GridView para disparar o onScrollEnd.
iteratorNameStringÉ o identificador do contexto de cada célula.
keyStringAponta para um valor único presente em cada item do dataSource para ser usado como um sufixo nos ids dos componentes do template.

GridViewDirection

É um ENUM, cujos valores são:

ValorDefinição
VERTICALQuando os items são exibidos em COLUNAS.
HORIZONTALQuando os itens são exibidos em LINHAS.

Templates

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

Como usar?

GridView


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"
    ),
    Person(
        name = "TenSoon",
        race = "Kandra",
        planet = "Scadrial",
        isMistborn = false,
        age = 40,
        sex = "male"
    )
)

GridView(
    spanCount = 2,
    direction = GridViewDirection.HORIZONTAL,
    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)
            }
        )
    )
)