Jetpack Compose Column布局：如何让一个组件居中另一个靠底部？

要实现一个子组件垂直居中、另一个对齐到底部的布局，核心思路是利用weight修饰符或者Box填充垂直方向的剩余空间，以下是两种可行的实现方式：

方式一：使用 Weight 分配空间 #

通过给占位的Spacer设置weight(1f)，让其占据顶部和中间的剩余空间，从而将目标组件推到居中位置，底部组件自然落在底部：

Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    // 顶部占位，推高中间组件至居中
    Spacer(modifier = Modifier.weight(1f))
    
    // 居中显示的子组件
    Text(
        text = "居中内容",
        fontSize = 20.sp,
        modifier = Modifier.padding(16.dp)
    )
    
    // 中间占位，隔开居中组件和底部组件
    Spacer(modifier = Modifier.weight(1f))
    
    // 底部对齐的子组件
    Text(
        text = "底部内容",
        fontSize = 16.sp,
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .background(Color.LightGray)
    )
}

方式二：使用 Box 包裹居中组件 #

用Box占据除底部组件外的全部垂直空间，直接让内部组件居中，代码更简洁：

Column(modifier = Modifier.fillMaxSize()) {
    // 占据剩余空间的Box，内部组件居中
    Box(
        modifier = Modifier
            .weight(1f)
            .fillMaxWidth(),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "居中内容",
            fontSize = 20.sp
        )
    }
    
    // 底部对齐的子组件
    Text(
        text = "底部内容",
        fontSize = 16.sp,
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .background(Color.LightGray)
    )
}

为什么 SpaceAround/SpaceBetween 不适用？ #

• Arrangement.SpaceBetween：会将组件分别放在Column的顶部和底部，中间留空，无法让单个组件居中。
• Arrangement.SpaceAround：会在所有组件周围均匀分配空间，包括顶部和底部的空白，导致居中组件的位置偏上，不符合需求。

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