如何使用Jetpack Compose实现按钮在父容器中垂直均匀分布

要实现两个按钮在屏幕垂直方向上均匀分布，只需对Column做两处关键修改：

1. 给Column添加Modifier.fillMaxHeight()，让它占据整个屏幕的垂直空间
2. 设置verticalArrangement = Arrangement.SpaceEvenly，指定子元素的垂直排列规则

修改后的完整App可组合项代码如下：

@Composable
fun App(modifier: Modifier) {
    Surface(
        modifier = modifier,
        color = MaterialTheme.colorScheme.background
    ) {
        Column(
            modifier = Modifier.fillMaxHeight(), // 让Column占满垂直可用空间
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.SpaceEvenly // 实现子元素均匀分布
        ) {
            CameraButton()
            ImageButton()
        }
    }
}

补充说明： #

• Modifier.fillMaxHeight()是基础前提：如果不设置这个，Column只会包裹自身内容的高度，没有多余空间来实现均匀分布效果。
• 关于verticalArrangement的可选值：
  • Arrangement.SpaceEvenly：按钮之间的间距、顶部到第一个按钮的间距、底部到第二个按钮的间距完全相等，是最贴合"均匀分布"需求的选项。
  • Arrangement.SpaceBetween：第一个按钮贴屏幕顶部，第二个按钮贴屏幕底部，两个按钮之间的间距均匀。
  • Arrangement.SpaceAround：顶部和底部的间距是按钮之间间距的一半，视觉上也能达到近似均匀的效果。

你可以根据实际UI需求选择合适的排列规则。

内容的提问来源于stack exchange，提问作者Code-Apprentice