Jetpack Compose中Row子项fillMaxHeight与aspectRatio共存失效问题

我想要实现如下布局：

目前编写的Jetpack Compose代码如下：

Column(
    modifier = Modifier
        .fillMaxSize()
        .verticalScroll(rememberScrollState())
        .padding(8.dp)
) {

    //First Row
    WidgetComposed(
        Modifier
            .fillMaxWidth()
            .height(300.dp),
        bgColor = Color.Red,
        widgetName = "Widget 1"
    )

    Spacer(modifier = Modifier.height(8.dp))

    // Second Row
    Row(modifier = Modifier
        .fillMaxWidth()
        .wrapContentHeight(), horizontalArrangement = Arrangement.SpaceBetween) {
        WidgetComposed(
            Modifier
                .fillMaxWidth(0.6f)
                .aspectRatio(2f / 3f, true),
            bgColor = Color.Green,
            widgetName = "Widget 2 (2:3)"
        )

        Spacer(modifier = Modifier.width(8.dp))

        Column(modifier = Modifier
            .fillMaxHeight()) {
            WidgetComposed(
                Modifier
                    .fillMaxWidth()
                    .weight(1f),
                bgColor = Color.Blue,
                widgetName = "Widget 3"
            )

            Spacer(modifier = Modifier.height(8.dp))

            WidgetComposed(
                Modifier
                    .fillMaxWidth()
                    .weight(1f),
                bgColor = Color.Cyan,
                widgetName = "Widget 4"
            )
        }
}

实际运行效果如下：

问题：包含Widget 3和Widget 4的Column无法填充父级Row的高度，只有设置硬编码高度时才能正常显示。要求保留Widget 2的60%宽度与2:3的宽高比，且不使用onGloballyPositioned修饰符，实现该Column自动填充可用高度。

WidgetComposed代码如下：

@Composable
fun WidgetComposed(modifier: Modifier = Modifier, bgColor: Color, widgetName: String) {
    Card(modifier = modifier, shape = RoundedCornerShape(8.dp), backgroundColor = bgColor) {
        Box(modifier = Modifier.padding(16.dp), contentAlignment = Alignment.Center) {
            Text(text = widgetName)
        }
    }
} 

解决方案 #

问题核心在于Row的高度计算逻辑，修改方式如下：

1. 给Row添加height(IntrinsicSize.Max)修饰符，让Row高度由内容中最高的子元素决定；
2. 确保右侧Column使用fillMaxHeight()填充Row高度，同时保留子Widget的weight分配逻辑。

修改后的第二部分Row代码：

// Second Row
Row(
    modifier = Modifier
        .fillMaxWidth()
        .height(IntrinsicSize.Max), // 关键：让Row高度匹配最高子元素
    horizontalArrangement = Arrangement.SpaceBetween
) {
    WidgetComposed(
        Modifier
            .fillMaxWidth(0.6f)
            .aspectRatio(2f / 3f, true),
        bgColor = Color.Green,
        widgetName = "Widget 2 (2:3)"
    )

    Spacer(modifier = Modifier.width(8.dp))

    Column(
        modifier = Modifier
            .fillMaxHeight()
            .fillMaxWidth(),
        verticalArrangement = Arrangement.spacedBy(8.dp) // 可以用这个替代手动Spacer
    ) {
        WidgetComposed(
            Modifier
                .fillMaxWidth()
                .weight(1f),
            bgColor = Color.Blue,
            widgetName = "Widget 3"
        )

        WidgetComposed(
            Modifier
                .fillMaxWidth()
                .weight(1f),
            bgColor = Color.Cyan,
            widgetName = "Widget 4"
        )
    }
}

原理说明

• height(IntrinsicSize.Max)让Row先测量所有子元素的高度，将自身高度设为最大值，此时左侧Widget 2的高度会成为Row的高度基准；
• 右侧Column设置fillMaxHeight()后，会自动匹配Row的高度，再通过weight(1f)让两个子Widget平分剩余高度（用Arrangement.spacedBy可以简化Spacer的使用）。

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