How to set maxLines to FlowRow in Compose?

Question

I have a design requirement where we have a FlowRow type of layout with multiple labels that are placed one after the other, and if labels occupy more than two lines, we just truncate at that. So something like this:

If I configure maxLines to 2, if there are more labels overflowing to line 3, then don't show them.

In a FlowRow, truncating by the amount of elements is super easy, like:

        FlowRow(
            modifier = ...
        ) {
            showItem(items.first())
            showItem(items.second())
            if items.length > 2 then showIndicator()
        }
    }

However to truncate on the amount of lines you need to measure the components and know how many lines they're taking giving the content you have.

Compose's FlowRow doesn't expose the measure policy nor line count so I cannot really tweak this and writing my own Layout sounds like overkill. Copying the measure policy and tweak it seems like the only option, but I wonder is there a better way??

Using modifier.height in FlowRow is not acceptable as that won't scale well.

Worth clarifying, the row doesn't scroll horizontally.

I found this issue in Google's issue tracker, but it's not shipped yet.

Any ideas? Thanks!

Answer 1

Ended up writing a simple custom Layout, got inspired by a similar impl I found on this article.

        val measurePolicy = flowLayoutMeasurePolicy(maxLines)

        Layout(
            measurePolicy = measurePolicy,
            content =
            {
                items.forEach {
                    ChipItem(it)
                }
            },
            modifier = modifier
        )

where the measure policy is:

private fun flowLayoutMeasurePolicy(maxLines: Int) = MeasurePolicy { measurables, constraints ->
    layout(constraints.maxWidth, constraints.maxHeight) {
        var lines = 0
        var yPos = 0
        var xPos = 0
        var maxY = 0

        for (index in measurables.indices) {
            val rest = constraints.maxWidth - xPos
            // if there's enough space left, try to fit one more pill in the current row
            val isEnoughSpace = rest >= (0.4 * constraints.maxWidth)

            val measurable = measurables[index]
            val placeable = if (isEnoughSpace) {
                measurable.measure(Constraints(maxWidth = rest))
            } else {
                measurable.measure(Constraints())
            }

            if (lines == maxLines) {
                break
            }

            if (xPos + placeable.width > constraints.maxWidth && !isEnoughSpace) {
                yPos += maxY
                xPos = 0
                maxY = 0
                lines += 1
            }

            if (lines < maxLines) {
                placeable.placeRelative(
                    x = xPos,
                    y = yPos
                )
            }

            xPos += placeable.width

            if (maxY < placeable.height) {
                maxY = placeable.height
            }

        }
    }

Notice I try to fit in another chip in the same row if the remaining space is around 40% or more.

I'm thinking this could be be optimised with SubComposeLayout, as we dont want to compose every item if we're only showing a few (which is the canonical use case).

Also we could add some calculations to determine if it is the last line and more items are overflowing, to add a composable indicating this.

This is how it behaves, when limited to two rows, and the text in the chip items are set to overflow: