Instruction
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Understanding Flow Layouts
Compose offers two variants of the flow layout construct:
Exploring FlowRow and FlowColumn
Before working with Flow Layouts, it’s worth exploring their inner workings. Here are the signatures of FlowRow and FlowColumn:
@Composable
@ExperimentalLayoutApi
inline fun FlowRow(
modifier: Modifier = Modifier,
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
maxItemsInEachRow: Int = Int.MAX_VALUE,
content: @Composable FlowRowScope.() -> Unit
) {
val measurePolicy = rowMeasurementHelper(
horizontalArrangement,
verticalArrangement,
maxItemsInEachRow
)
Layout(
content = { FlowRowScopeInstance.content() },
measurePolicy = measurePolicy,
modifier = modifier
)
}
@Composable
@ExperimentalLayoutApi
inline fun FlowColumn(
modifier: Modifier = Modifier,
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
maxItemsInEachColumn: Int = Int.MAX_VALUE,
content: @Composable FlowColumnScope.() -> Unit
) {
val measurePolicy = columnMeasurementHelper(
verticalArrangement,
horizontalArrangement,
maxItemsInEachColumn
)
Layout(
content = { FlowColumnScopeInstance.content() },
measurePolicy = measurePolicy,
modifier = modifier
)
}
Using Flow Layouts
Flow layouts are excellent candidates for building UI where either the container items are of variable length or the UI must adapt to the amount of data coming in.
@Composable
private fun FilterUI() {
FlowRow(
modifier = Modifier.padding(8.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp)) {
FilterItem("Rating: High to Low")
FilterItem("Price: High to Low")
FilterItem("Rating: 4+")
FilterItem("Red")
}
}
Using Item Weights in FlowRow
In cases where you want to control the width of individual items in a FlowRow, you can use weights to grow the item based on the supplied factor and the line’s available space.
@Composable
private fun GridUI() {
val numRows = 4
val numColumns = 4
FlowRow(
modifier = Modifier.padding(4.dp),
horizontalArrangement = Arrangement.spacedBy(4.dp),
maxItemsInEachRow = numRows
) {
val itemModifier = Modifier
.padding(4.dp)
.height(80.dp)
.weight(1f)
.clip(RoundedCornerShape(8.dp))
.background(Color.Green)
repeat(numRows * numColumns) {
Spacer(modifier = itemModifier)
}
}
@Composable
private fun AlternatingGridUI() {
FlowRow(
modifier = Modifier.padding(4.dp),
horizontalArrangement = Arrangement.spacedBy(4.dp),
maxItemsInEachRow = 2
) {
val itemModifier = Modifier
.padding(4.dp)
.height(80.dp)
.clip(RoundedCornerShape(8.dp))
.background(Color.Red)
repeat(7) { item ->
if ((item + 1) % 3 == 0) {
Spacer(modifier = itemModifier.fillMaxWidth())
} else {
Spacer(modifier = itemModifier.weight(0.5f))
}
}
}}
