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:
What the code shows when I uncomment .height(IntrinsicSize.Min)
and .fillMaxHeight()
:
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.