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:
Atributo | Tipo | Obrigatório | Definição |
---|---|---|---|
spanCount | Int | ✓ | Define o número de colunas ou linhas que o GridView irá exibir. |
direction | GridViewDirection | Define o direcionamento em que os items 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 o GridView chega ao fim. | |
scrollEndThreshold | Int | Define a porcentagem rolada do GridView 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. |
É um ENUM
, cujos valores são:
Valor | Definição |
---|---|
VERTICAL | Quando os items são exibidos em COLUNAS . |
HORIZONTAL | Quando os itens são exibidos em LINHAS . |
case
é uma expressão que retornará true
ou false
.O template a ser usado será decidido de acordo com a propriedade case
do template.
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"
),
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)
}
)
)
)
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.