The GridView component defines how a group of items will place itself natively in a recyclable grid layout. The items in a GridView could be any server-driven component. The GridView use is more suitable for visual content and is recommended for situations where an item repeats itself but with different data, like a card with movies details for example.
This is how this component is structured:
Attribute | Type | Required | Definition |
---|---|---|---|
spanCount | Int | ✓ | Defines the number of columns or rows that the GridView will display. |
direction | GridViewDirection | Sets the direction in which 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. | |
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. | |
itemAspectRatio | Double | only valid for Flutter. This sets the aspect ratio of the items in the grid. If left in blank, the items will be squares (itemAspectRatio = 1). The Flutter GridView doesn’t accept items with arbitrary size. |
It is an ENUM
, the values are:
Values | Definition |
---|---|
VERTICAL | When itens are displayed in COLUMNS . |
HORIZONTAL | When itens are displayed in ROWS . |
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"
),
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.