New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Compose Foundation Layout

FlowColumn

Common

[FlowColumn] is a layout that fills items from top to bottom, and when it runs out of space on the bottom, moves to the next "column" or "line" on the right or left based on ltr or rtl layouts, and then continues filling items from top to bottom.

It supports ltr in LTR layouts, by placing the first column to the left, and then moving to the right It supports rtl in RTL layouts, by placing the first column to the right, and then moving to the left

Last updated:

Installation

dependencies {
   implementation("androidx.compose.foundation:foundation-layout:1.7.0-beta04")
}

Overloads

@ExperimentalLayoutApi
@Composable
fun FlowColumn(
    modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    maxItemsInEachColumn: Int = Int.MAX_VALUE,
    maxLines: Int = Int.MAX_VALUE,
    overflow: FlowColumnOverflow = FlowColumnOverflow.Clip,
    content: @Composable FlowColumnScope.() -> Unit
)

Parameters

namedescription
modifierThe modifier to be applied to the Row.
verticalArrangementThe vertical arrangement of the layout's children.
horizontalArrangementThe horizontal arrangement of the layout's virtual columns
maxItemsInEachColumnThe maximum number of items per column
maxLinesThe max number of rows
overflowThe strategy to handle overflowing items
contentThe content as a [ColumnScope]

Code Example

SimpleFlowColumn

@Composable
@Sampled
@OptIn(ExperimentalLayoutApi::class
fun SimpleFlowColumn() {

    Text(modifier = Modifier
        .fillMaxWidth(1f)
        .padding(20.dp)
        .wrapContentHeight(align = Alignment.Top),
        text = "FlowColumn with weights",
        fontWeight = FontWeight.Bold
    )

    FlowColumn(
        Modifier
            .padding(20.dp)
            .fillMaxWidth()
            .padding(20.dp)
            .wrapContentHeight(align = Alignment.Top)
            .height(200.dp)
            .border(BorderStroke(2.dp, Color.Gray)),
        horizontalArrangement = Arrangement.spacedBy(10.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp),
        maxItemsInEachColumn = 3,
    ) {

        repeat(17) { index ->
            Box(
                Modifier
                    .align(Alignment.CenterHorizontally)
                    .width(50.dp)
                    .height(50.dp)
                    .weight(1f, true)
                    .background(color = Color.Green)
            ) {
                Text(text = index.toString(), fontSize = 18.sp, modifier = Modifier.padding(3.dp))
            }
        }
    }
}