Jetpack Compose：如何让FlowRow中所有子项高度一致

我在FlowRow里布局了多个动态Text组件，想让所有子项高度统一，但普通Row中使用的.height(IntrinsicSize.Min)配合子项.fillMaxHeight()的方法在FlowRow中无效。查阅Flow Layouts文档后，发现仅提及不同高度子项的对齐方式，未说明如何统一所有子项高度。

原有尝试代码 #

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")
    }
}

当前运行效果 #

添加固有高度修饰符后的效果 #

期望实现的效果 #

解决方案：预计算最大高度并统一设置 #

由于FlowRow的流式布局特性，无法直接通过固有高度修饰符实现所有子项高度一致，需要先计算所有文本在指定宽度下的最大高度，再统一应用到每个Text组件。

优化后代码 #

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.width
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.text.StaticTextLayout
import androidx.compose.ui.text.style.TextStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@OptIn(ExperimentalLayoutApi::class)
@Preview(showBackground = true, widthDp = 400)
@Composable
private fun FlowRowPreview() {
    val texts = listOf(
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
    )
    val textWidth = 185.dp
    val textStyle = TextStyle(fontSize = 16.sp) // 匹配默认Text样式

    // 计算所有文本的最大高度
    val maxTextHeight = remember(texts, textWidth, textStyle) {
        val density = LocalDensity.current
        val widthPx = with(density) { textWidth.toPx() }
        texts.maxOf { text ->
            val layoutResult = StaticTextLayout(
                text = text,
                style = textStyle.toSpanStyle(),
                width = widthPx.toInt(),
                density = density,
                resourceLoader = LocalContext.current.resources
            )
            with(density) { layoutResult.height.toDp() }
        }
    }

    val textModifier = Modifier
        .width(textWidth)
        .background(Color.Red)
        .height(maxTextHeight) // 统一设置最大高度

    FlowRow(
        horizontalArrangement = Arrangement.Absolute.SpaceBetween,
        verticalArrangement = Arrangement.spacedBy(16.dp),
        modifier = Modifier
    ) {
        texts.forEach { text ->
            Text(modifier = textModifier, text = text, style = textStyle)
        }
    }
}

实现原理 #

1. 通过StaticTextLayout预计算每个文本在指定宽度下的渲染高度
2. 提取所有文本中的最大高度，用remember缓存计算结果避免重复计算
3. 将最大高度统一应用到所有Text组件的修饰符中，实现所有子项高度一致的效果

内容的提问来源于stack exchange，提问作者DHoward