Jetpack Compose小屏幕下实现组件固定在屏幕底部

原来的方案在带滚动的Column中使用weight(1f)的Spacer，当屏幕尺寸较小时，Column因verticalScroll属性会根据内容高度自适应，导致weight无法将底部组件推至屏幕底部。

修改方案改用Box作为根布局，将可滚动内容与底部组件分离：

@Preview(showBackground = true, widthDp = 240, heightDp = 432)
@Composable
fun PreviewCompose() {
    Theme {
        Box(Modifier.fillMaxSize()) {
            // 可滚动的内容区域
            Column(
                Modifier
                    .fillMaxSize()
                    .verticalScroll(rememberScrollState())
            ) {
                Text(
                    "Parent 1",
                    modifier = Modifier.background(Color(0xffF44336)),
                    color = Color.White,
                    fontSize = 75.sp
                )
                Text(
                    "Parent 2",
                    modifier = Modifier.background(Color(0xffF44336)),
                    color = Color.White,
                    fontSize = 75.sp
                )
                Text(
                    "Parent 3",
                    modifier = Modifier.background(Color(0xffF44336)),
                    color = Color.White,
                    fontSize = 75.sp
                )
                // 内容不足屏幕高度时，保持与底部组件的间距
                Spacer(modifier = Modifier.weight(1f))
            }
            
            // 固定在底部的组件
            Column(Modifier.align(Alignment.BottomCenter)) {
                Text(
                    "Child 1",
                    modifier = Modifier.background(Color(0xffF44336)),
                    color = Color.White
                )
                Text(
                    "Child 2",
                    modifier = Modifier.background(Color(0xffF44336)),
                    color = Color.White
                )
            }
        }
    }
}

原理说明 #

• Box作为根布局占据整个屏幕空间，为底部组件提供稳定的屏幕边界定位基准。
• 可滚动的Column使用fillMaxSize，内部的weight(1f) Spacer在内容高度不足屏幕时，会将内容区域的底部推至屏幕底部，避免底部组件覆盖内容；当内容超出屏幕时，滚动操作不会影响底部组件的固定位置。
• 底部组件通过align(Alignment.BottomCenter)直接固定在Box的底部，完全独立于内容滚动逻辑。

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