ContextualFlowColumn

ContextualFlowColMaxLineDynamicSeeMore

@OptIn(ExperimentalLayoutApi::class)
@Composable
fun ContextualFlowColMaxLineDynamicSeeMore() {
    val totalCount = 300
    var maxLines by remember { mutableStateOf(2) }
    Text(
        modifier = Modifier.fillMaxWidth(1f).padding(20.dp),
        text =
            "ContextualFlowColumn (based on Subcompose)" +
                " is great for Large Items & +N dynamic labels",
        fontWeight = FontWeight.Bold,
    )
    val moreOrCollapseIndicator =
        @Composable { scope: ContextualFlowColumnOverflowScope ->
            val remainingItems = totalCount - scope.shownItemCount
            DynamicSeeMore(isHorizontal = true, remainingItems = remainingItems) {
                if (remainingItems == 0) {
                    maxLines = 2
                } else {
                    maxLines += 2
                }
            }
        }
    ContextualFlowColumn(
        modifier =
            Modifier.fillMaxWidth(1f)
                .horizontalScroll(rememberScrollState())
                .padding(20.dp)
                .height(200.dp)
                .wrapContentHeight(align = Alignment.Top),
        verticalArrangement = Arrangement.spacedBy(10.dp),
        horizontalArrangement = Arrangement.spacedBy(20.dp),
        maxLines = maxLines,
        overflow =
            ContextualFlowColumnOverflow.expandOrCollapseIndicator(
                minColumnsToShowCollapse = 4,
                expandIndicator = moreOrCollapseIndicator,
                collapseIndicator = moreOrCollapseIndicator,
            ),
        itemCount = totalCount,
    ) { index ->
        Box(
            modifier =
                Modifier.align(Alignment.CenterHorizontally)
                    .height(50.dp)
                    .width(50.dp)
                    .background(Color.Green)
        ) {
            Text(
                text = index.toString(),
                fontSize = 18.sp,
                modifier = Modifier.padding(3.dp).align(Alignment.Center),
            )
        }
    }
}