Android Compose中Modifier.weight()用法疑问及实现对比

问题背景 #

我在学习Android Studio Kotlin Compose的ComposeQuadrant教程时，对Modifier.weight()的空间分配作用存在疑问，于是尝试删除所有Modifier.weight(1f)代码，改用行列嵌套的方式实现，但最终效果和教程方案存在明显差异，想了解其中原因。

教程方案代码 #

@Composable
fun ComposeQuadrantApp() {
    Column(Modifier.fillMaxWidth()) {
        Row(Modifier.weight(1f)) {
            ComposableInfoCard(title = stringResource(R.string.c1t1),
                description = stringResource(R.string.c1t2),
                backgroundColor = Color(0xFFEADDFF),
                modifier = Modifier.weight(1f)
            )
            ComposableInfoCard(
                title = stringResource(R.string.c2t1),
                description = stringResource(R.string.c2t2),
                backgroundColor = Color(0xFFD0BCFF),
                modifier = Modifier.weight(1f)
            )
        }
        Row(Modifier.weight(1f)) {
            ComposableInfoCard(
                title = stringResource(R.string.c3t1),
                description = stringResource(R.string.c3t2),
                backgroundColor = Color(0xFFB69DF8),
                modifier = Modifier.weight(1f)
            )
            ComposableInfoCard(
                title = stringResource(R.string.c4t1),
                description = stringResource(R.string.c4t2),
                backgroundColor = Color(0xFFF6EDFF),
                modifier = Modifier.weight(1f)
            )
        }
    }
}

我的替代实现代码 #

@Composable
fun ComposeQuadrantApp2() {
    Column(Modifier.fillMaxWidth()) {
        Row() {
            Column(){
                ComposableInfoCard(title = stringResource(R.string.c1t1),
                    description = stringResource(R.string.c1t2),
                    backgroundColor = Color(0xFFEADDFF),
                    modifier = Modifier.weight(1f)
                )
                ComposableInfoCard(
                    title = stringResource(R.string.c2t1),
                    description = stringResource(R.string.c2t2),
                    backgroundColor = Color(0xFFD0BCFF),
                    modifier = Modifier.weight(1f)
                )
            }

        }
        Row() {
            Column(){
                ComposableInfoCard(
                    title = stringResource(R.string.c3t1),
                    description = stringResource(R.string.c3t2),
                    backgroundColor = Color(0xFFB69DF8)
                )
                ComposableInfoCard(
                    title = stringResource(R.string.c4t1),
                    description = stringResource(R.string.c4t2),
                    backgroundColor = Color(0xFFF6EDFF)
                )
            }

        }
    }
}

差异原因分析 #

教程方案的布局逻辑 #

1. 最外层Column设置fillMaxWidth后，两个子Row通过Modifier.weight(1f)平分了Column的可用垂直空间，每个Row占据屏幕高度的一半。
2. 每个Row内部的两个ComposableInfoCard同样通过Modifier.weight(1f)平分所在Row的水平空间，最终形成2×2的四等分网格，每个卡片占屏幕1/4区域。

替代实现的核心问题 #

1. 外层Column未设置fillMaxHeight，且两个Row没有添加weight，导致Row高度仅由内部内容决定，不会主动占满垂直空间。
2. 第一个Row内的Column未设置fillMaxWidth和fillMaxHeight，宽度仅适配卡片内容，高度只是让内部两个卡片平分自身空间，而非Row的高度。
3. 第二个Row内的Column甚至没给卡片加weight，卡片按自身内容高度垂直排列，完全没有空间分配逻辑。
4. 最终布局变成垂直排列的两列卡片，和教程的四等分网格逻辑完全不同，视觉效果自然差异巨大。

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