Listview

You will find here the description of the ListView component, its attributes and constructors

What is it?

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:

ListView

AttributeTypeRequiredDefinition
directionListDirectionSets the direction in which list items are displayed.
contextContextDataDefines the context of the component.
onInitList<Action>List of actions to be performed as soon as the component is displayed.
dataSourceBind<List<Any>>✓Expression that points to a list of values used to populate the component.
templateServerDrivenComponent✓It represents each cell in the list through a ServerDrivenComponent.
isScrollIndicatorVisibleBoolSet the scroll bar visibility.
onScrollEndList<Action>List of actions taken when the list ends.
scrollEndThresholdIntDefines the percentage scrolled from the list to trigger onScrollEnd.
iteratorNameStringIt is the context identifier for each cell.
keyStringPoints to a unique value present in each item of the dataSource to be used as a suffix in the ids of the template components.

ListDirection

It is an ENUM, the values are:

ValuesDefinition
VERTICALWhen itens are displayed in LINES.
HORIZONTALWhen itens are displayed in COLUMNS.

Deprecated ListView

AttributeTypeRequiredDescriptioon
childrenList<ServerDrivenComponent>✓Defines the item list view. They can be configured like a ServerDrivenComponents or like views.
directionListDirectionDefines the preview list direction.

How to use it?

ListView

{
    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())
            )
        )
    )
}

Deprecated ListView

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
        )
    )
)

Last modified March 11, 2021: adding attribute isScrollIndicatorVisible (#357) (24efc8eb)