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:
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 aServerDrivenComponent . |
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. The default value is item . | |
indexName | String | It is the index identifier for each cell. The default value is index . | |
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. |
SetContext
using this context will update the datasource.It is an ENUM
, the values are:
Values | Definition |
---|---|
VERTICAL | When itens are displayed in LINES . |
HORIZONTAL | When itens are displayed in COLUMNS . |
case
is expression that will return true
or false
.The template to use will be decided according to the property case
of the template.
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("Index: @{index}"),
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.