FlowColumn examples in Compose Foundation Layout

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.

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