如何用Jetpack Compose实现指定UI：一个元素居中其余在其下方

要实现「一个元素居中、另外两个元素在其下方」的布局，用Column作为根容器是最简洁的方案，结合布局参数就能精准控制元素位置：

核心思路 #

1. 根Column设置fillMaxSize()占满屏幕，通过verticalArrangement = Arrangement.Center让整体内容垂直居中
2. 直接添加居中元素，用Spacer拉开与下方元素的间距
3. 下方两个元素可嵌套Column（垂直排列）或Row（水平排列），按需调整对齐方式

代码示例（下方元素垂直排列） #

@Composable
fun CenterBottomLayout() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // 屏幕中央的元素
        Text(
            text = "中央元素",
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold
        )

        // 中央元素与下方元素的间距
        Spacer(modifier = Modifier.height(32.dp))

        // 下方垂直排列的两个元素
        Column(horizontalAlignment = Alignment.CenterHorizontally) {
            Text(text = "下方元素1")
            Spacer(modifier = Modifier.height(16.dp))
            Text(text = "下方元素2")
        }
    }
}

代码示例（下方元素水平排列） #

如果需要下方两个元素横向分布，把内层Column换成Row即可：

@Composable
fun CenterBottomHorizontalLayout() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // 屏幕中央的元素
        Text(
            text = "中央元素",
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold
        )

        Spacer(modifier = Modifier.height(32.dp))

        // 下方水平排列的两个元素
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceAround
        ) {
            Text(text = "下方元素1")
            Text(text = "下方元素2")
        }
    }
}

关键参数说明 #

• verticalArrangement = Arrangement.Center：让Column内元素在垂直方向居中对齐
• horizontalAlignment = Alignment.CenterHorizontally：让Column内元素在水平方向居中
• Spacer：灵活控制元素间间距，避免布局拥挤

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