Jetpack Compose中match parent替代方案及文本高度统一方法

问题描述 #

在Jetpack Compose中，需要让两个文本组件高度保持一致——当蓝色文本内容比红色文本短时，蓝色背景能填充至红色文本的高度。尝试过fillMaxSize、height(IntrinsicSize.Max)、height(IntrinsicSize.Min)等组合，但未达到预期效果。

解决方案 #

给外层Row添加height(IntrinsicSize.Max)修饰符，同时让每个Text组件使用fillMaxHeight()，就能实现高度匹配。

修改后的代码示例 #

@Composable
fun FilterPreview() {
    Row(
        modifier = Modifier.height(IntrinsicSize.Max),
        horizontalArrangement = Arrangement.SpaceBetween,
    ) {
        Text(
            modifier = Modifier
                .weight(1f)
                .fillMaxHeight()
                .background(Color.Red),
            text = "slfdsfkld77777777777777777777777777777777777777777777skfkdlsfkldskfkdlkfldskflkdlskflsdkflds"
        )
        Text(
            modifier = Modifier
                .weight(1f)
                .fillMaxHeight()
                .background(Color.Blue),
            text = "44444444444444444444444444444444444444444444444444444444"
        )
    }
}

原理说明 #

• height(IntrinsicSize.Max)让Row的高度取所有子组件中的最大高度，确保容器能容纳最长文本的高度；
• fillMaxHeight()让每个Text组件填充Row的高度，这样即使文本内容较短，背景也会铺满整个容器高度，实现两者视觉高度一致。

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