FlowColumn

Composable Function
Common
Deprecated The overflow parameter has been deprecated
@Composable
@ExperimentalLayoutApi
fun FlowColumn(
    modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    itemHorizontalAlignment: Alignment.Horizontal = Alignment.Start,
    maxItemsInEachColumn: Int = Int.MAX_VALUE,
    maxLines: Int = Int.MAX_VALUE,
    overflow: FlowColumnOverflow = FlowColumnOverflow.Clip,
    content: @Composable FlowColumnScope.() -> Unit,
)

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

When a Modifier ColumnScope.weight is provided, it scales the item based on the number items that fall on the column it was placed in.

Parameters
modifier The modifier to be applied to the Row.
verticalArrangement The vertical arrangement of the layout's children.
horizontalArrangement The horizontal arrangement of the layout's virtual columns
itemHorizontalAlignment The cross axis/horizontal alignment of an item in the column.
maxItemsInEachColumn The maximum number of items per column
maxLines The max number of rows
overflow The strategy to handle overflowing items
content The content as a ColumnScope
Common
@Composable
fun FlowColumn(
    modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    itemHorizontalAlignment: Alignment.Horizontal = Alignment.Start,
    maxItemsInEachColumn: Int = Int.MAX_VALUE,
    maxLines: Int = Int.MAX_VALUE,
    content: @Composable FlowColumnScope.() -> Unit,
) =
    FlowColumn(
        modifier,
        verticalArrangement,
        horizontalArrangement,
        itemHorizontalAlignment,
        maxItemsInEachColumn,
        maxLines,
        FlowColumnOverflow.Clip,
        content,
    )

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

When a Modifier ColumnScope.weight is provided, it scales the item based on the number items that fall on the column it was placed in.

Parameters
modifier The modifier to be applied to the Row.
verticalArrangement The vertical arrangement of the layout's children.
horizontalArrangement The horizontal arrangement of the layout's virtual columns
itemHorizontalAlignment The cross axis/horizontal alignment of an item in the column.
maxItemsInEachColumn The maximum number of items per column
maxLines The max number of rows
content The content as a ColumnScope

Code Examples

SimpleFlowColumn

@OptIn(ExperimentalLayoutApi::class)
@Composable
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))
            }
        }
    }
}