Beagle v1.5 is no longer actively maintained. The documented version you are viewing may contain deprecated functionality. For up-to-date documentation, see the latest version .
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:
Atributo | Tipo | Obrigatório | Definição |
---|---|---|---|
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. |
template | ServerDrivenComponent | ✓ | It represents each cell in the list through a ServerDrivenComponent . |
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. | |
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. |
It is an ENUM
, the values are:
Values | Definition |
---|---|
VERTICAL | When itens are displayed in LINES . |
HORIZONTAL | When itens are displayed in COLUMNS . |
Attribute | Type | Required | Descriptioon |
---|---|---|---|
children | List<ServerDrivenComponent> | ✓ | Defines the item list view. They can be configured like a ServerDrivenComponents or
like views. |
direction | ListDirection | Defines the preview list direction. |
{
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(
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
)
)
)
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.