android-jetpack-composeheightflowlayout

Jetpack Compose: How to make all items in a FlowRow the same height


I have some dynamic Text Composables laid out in a FlowRow, but I can't seem to get them to be the same height. With a normal Row, you can use .height(Intrinsic.Min) on the Row in conjunction with .fillMaxHeight() on the children, but I can't get that to work with the FlowRow. The documentation of Flow Layouts talks about alignment of items with different heights within the FlowRow, but it doesn't mention how to make them all the same height. Maybe I missed something?

Here's a code example. I commented out where I tried intrinsic height along with fillMaxHeight:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp


@OptIn(ExperimentalLayoutApi::class)
@Preview(showBackground = true, widthDp = 400)
@Composable
private fun FlowRowPreview() {
    val textModifier = Modifier.width(185.dp).background(Color.Red)//.fillMaxHeight()
    FlowRow(
        horizontalArrangement = Arrangement.Absolute.SpaceBetween,
        verticalArrangement = Arrangement.spacedBy(16.dp),
        modifier = Modifier//.height(IntrinsicSize.Min)
    ) {
        Text(modifier = textModifier, text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam")
        Text(modifier = textModifier, text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit")
        Text(modifier = textModifier, text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit")
        Text(modifier = textModifier, text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit")
    }
}

What the Code currently shows: Preview of how code is currently

What the code shows when I uncomment .height(IntrinsicSize.Min) and .fillMaxHeight(): Preview when I uncomment the height modifiers

What I actually want: Preview of expected behavior


Solution

  • The latest version of FlowRow and FlowColumn (1.7.0-alpha03) should now have a modifier:

    Modifier.fillMaxRowHeight(fraction) Modifier.fillMaxColumnWidth(fraction)

    That should solve this.

    https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowScope#(androidx.compose.ui.Modifier).fillMaxRowHeight(kotlin.Float)

    https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowColumnScope#(androidx.compose.ui.Modifier).fillMaxColumnWidth(kotlin.Float)