一列三行的布局，其中中间的应该占据所有剩余空间

Question

我想创建一个 Jetpack Compose 桌面布局，其中有：

• 顶行按钮
• 中间行内容占据所有剩余空间
• 状态标签的底行

我尝试过这个，但我不知道如何使中间行不将最后一行推到可见区域之外。我是否为此使用了正确的组件？我不确定这是否可以通过列和行来实现，还是我需要其他东西？

@Preview
@Composable
fun AppPreview() {

    Box{
        Column {
            Row(Modifier.border(width = 1.dp, color = Color.Blue).fillMaxWidth()) { Text("top") }
            Row(Modifier.border(width = 1.dp, color = Color.Magenta).fillMaxWidth().fillMaxHeight()) { Text("middle") }
            Row(Modifier.border(width = 1.dp, color = Color.Green).fillMaxSize()) { Text("bottom") }
        }
    }
}

Answer 1

您可以使用权重修改器来控制空间的分布。 假设面积为 10 个单位的示例：

Column {
    Row(
        Modifier.weight(1f)
    ) {}

    Row(
        Modifier.weight(2f)
    ) {}

    Row(
        Modifier.weight(7f)
    ) {}
}