FlowRowOverflow

@ExperimentalLayoutApi
fun expandIndicator(content: @Composable FlowRowOverflowScope.() -> Unit): FlowRowOverflow

Registers an "expand indicator" composable for handling overflow in a FlowRow.

This function allows the creation of a custom composable that can be displayed when there are more items in the FlowRow than can be displayed in the available space. The "expandable indicator" composable can be tailored to show a summary, a button, or any other composable element that indicates the presence of additional items.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.FlowRowOverflow
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

val totalCount = 20
var maxLines by remember {
    mutableStateOf(2)
}

Text(modifier = Modifier
    .fillMaxWidth(1f)
    .padding(20.dp)
    .wrapContentHeight(align = Alignment.Top),
    text = "Flow Row with total items of 40, " +
        "with Max Lines of 2 and See More, " +
        "which when clicked, increases max lines by two",
    fontWeight = FontWeight.Bold
)
FlowRow(
    Modifier
        .fillMaxWidth(1f)
        .padding(20.dp)
        .wrapContentHeight(align = Alignment.Top),
    horizontalArrangement = Arrangement.spacedBy(10.dp),
    verticalArrangement = Arrangement.spacedBy(20.dp),
    maxLines = maxLines,
    overflow = FlowRowOverflow.expandIndicator {
        Ellipsis(text = "...") {
            maxLines += 2
        }
    }
) {
    repeat(totalCount) {
        Box(
            Modifier
                .align(Alignment.CenterVertically)
                .width(50.dp)
                .height(50.dp)
                .background(Color.Green)
        ) {
            Text(text = it.toString(), fontSize = 18.sp, modifier =
            Modifier
                .padding(3.dp)
                .align(Alignment.Center))
        }
    }
}

@ExperimentalLayoutApi
@Composable
fun expandOrCollapseIndicator(
    expandIndicator: @Composable FlowRowOverflowScope.() -> Unit,
    collapseIndicator: @Composable FlowRowOverflowScope.() -> Unit,
    minRowsToShowCollapse: Int = 1,
    minHeightToShowCollapse: Dp = 0.dp
): FlowRowOverflow

Registers an "expand or collapse indicator" composable for handling overflow in a FlowRow.

This function is designed to switch between two states: a "Expandable" state when there are more items to show, and a "Collapsable" state when all items are being displayed and can be collapsed.

Prior to layout, the function evaluates both composables indicators to determine their maximum intrinsic size. Depending on the space available and the number of items, either the expandIndicator or the collapseIndicator is rendered.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.FlowRowOverflow
import androidx.compose.foundation.layout.FlowRowOverflowScope
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

val totalCount = 40
var maxLines by remember {
    mutableStateOf(2)
}

Text(modifier = Modifier
    .fillMaxWidth(1f)
    .padding(20.dp)
    .wrapContentHeight(align = Alignment.Top),
    text = "Flow Row with total items of 40, " +
        "with Max Lines of 2 and See More/collapse button, " +
        "which when clicked, increases max lines by two",
    fontWeight = FontWeight.Bold
)
val moreOrLessIndicator = @Composable { scope: FlowRowOverflowScope ->
    DynamicSeeMoreForDrawText(
        isHorizontal = true,
        totalCount = totalCount,
        { scope.shownItemCount },
        onExpand = { maxLines += 2 },
        onShrink = { maxLines = 2 }
    )
}
FlowRow(
    Modifier
        .fillMaxWidth(1f)
        .padding(20.dp)
        .wrapContentHeight()
        .padding(20.dp)
        .fillMaxWidth(1f),
    horizontalArrangement = Arrangement.spacedBy(10.dp),
    verticalArrangement = Arrangement.spacedBy(20.dp),
    maxLines = maxLines,
    overflow = FlowRowOverflow.expandOrCollapseIndicator(
        minRowsToShowCollapse = 4,
        expandIndicator = moreOrLessIndicator,
        collapseIndicator = moreOrLessIndicator
    )
) {
    repeat(totalCount) {
        Box(
            Modifier
                .align(Alignment.CenterVertically)
                .width(50.dp)
                .height(50.dp)
                .background(Color.Green)
        ) {
            Text(text = it.toString(), fontSize = 18.sp, modifier =
            Modifier
                .padding(3.dp)
                .align(Alignment.Center))
        }
    }
}

@ExperimentalLayoutApi
val Clip: FlowRowOverflow

Clip the overflowing content to fix its container.

@ExperimentalLayoutApi
val Visible: FlowRowOverflow

Display all content, even if there is not enough space in the specified bounds.