Jetpack Compose：两列各占父容器一半宽度设置失效求助

问题分析 #

你给BottomLeftLetterKey内部的Column设置.fillMaxWidth(0.5f)无效，核心原因是Row布局中子元素的宽度分配需要通过weight修饰符控制。直接设置fillMaxWidth(0.5f)无法让Row正确识别并均分空间——Row会优先根据子元素的固有尺寸布局，只有通过weight才能强制分配可用宽度。

解决方案 #

步骤1：在调用组件时添加weight修饰符 #

修改Keyboard1中调用BottomLeftLetterKey的代码，给每个组件添加Modifier.weight(1f)，让Row将可用宽度均分给两个子元素：

Row(modifier = Modifier
    .background(Color.Red)
    .padding(2.dp, 2.dp)
    .fillMaxWidth()
    .height(IntrinsicSize.Min),
    horizontalArrangement = Arrangement.spacedBy(0.dp)) {
    BottomLeftLetterKey(columns = 2, rows = 2, Color.Blue)
        .apply { modifier = Modifier.weight(1f) }
    BottomLeftLetterKey(columns = 3, rows = 3, Color.Cyan)
        .apply { modifier = Modifier.weight(1f) }
}

步骤2：调整组件内部的宽度设置 #

移除BottomLeftLetterKey内部Column的.fillMaxWidth(0.5f)，改用.fillMaxWidth()让Column占满父元素分配的宽度：

@Composable
fun BottomLeftLetterKey(columns: Int, rows: Int, color: Color) {
    Column(modifier = Modifier
        .fillMaxWidth()
        .background(color)
        .fillMaxHeight()
        .padding(2.dp),
    verticalArrangement = Arrangement.spacedBy(1.dp)) {
        repeat(columns) {
            Row(modifier = Modifier
                .weight(1f),
            horizontalArrangement = Arrangement.SpaceEvenly,
            verticalAlignment = Alignment.CenterVertically) {
                repeat(rows) {
                    ElevatedButton(onClick = { /*TODO*/ },
                        shape = RoundedCornerShape(4.dp),
                        colors = ButtonDefaults.elevatedButtonColors(containerColor = Color.Green, contentColor = Color.Red),
                        contentPadding = PaddingValues(0.dp)
                    ) {
                        Text(text = "2")
                    }
                }
            }
        }
    }
}

原理说明 #

• Modifier.weight(1f)会让Row将可用宽度按权重分配，两个子元素权重均为1f时，各自占据50%的宽度。
• 内部Column用.fillMaxWidth()可以完全填充Row分配的空间，这样蓝色和青色背景就能和顶部洋红色区域的宽度匹配，实现各占50%的效果。

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