Jetpack Compose 布局问题：居中文本+底部卡片时第二列超出屏幕如何修复

问题原因 #

• 你当前使用Box作为根布局，内部放了两个同时设置fillMaxSize()的Column，两个列会完全层叠，布局逻辑本身就不合理
• 第二个底部列设置了verticalArrangement = Arrangement.Bottom，如果内部内容总高度超过屏幕可用高度，内容会从列的顶部方向溢出；如果底部内容高度过高，也会直接超出屏幕下边界
• 层叠的布局下如果中间的文本内容高度过大，还会和底部列的内容出现重叠，进一步挤压底部内容的展示空间导致超出

修复方法 #

直接调整布局结构，去掉层叠的双Column逻辑，改用单个Column作为根容器，中间的居中内容块用weight(1f)占满剩余空间，底部内容自然排在最下方，天然不会重叠也不会超出边界，示例修复代码如下：

Box(
    modifier = Modifier
        .fillMaxSize()
        .background(Color.Transparent),
) {
    // 仅保留一个Column作为根布局容器
    Column(
        Modifier
            .fillMaxSize()
            .padding(30.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // 中间居中内容区域，weight占满剩余所有空间
        Column(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Text(
                "Some title and subtitle",
                textAlign = TextAlign.Center,
                color = Color.White,
                fontWeight = FontWeight.Bold,
                fontSize = 30.sp
            )
            Column(
                Modifier
                    .height(100.dp)
                    .width(100.dp),
                verticalArrangement = Arrangement.SpaceBetween,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                //some other text and button
            }
        }

        // 底部内容区域，直接排在最下方
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 15.dp), // 这里保留你需要的水平padding即可
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                "Some text",
                textAlign = TextAlign.Center,
                color = Color.White,
                fontWeight = FontWeight.Bold,
                fontSize = 15.sp,
            )
            //some text and image
        }
    }
}

如果你的底部内容可能出现高度过高的情况，还可以给底部Column加上verticalScroll(rememberScrollState())修饰符，让内容可以滚动，不会超出屏幕。

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