Jetpack Compose：实现Column中按钮自适应屏幕底部布局

核心思路是通过Box分层布局实现需求：内容不足时按钮固定在屏幕底部，内容过多时按钮随滚动内容推至页面下方。

修正后代码实现 #

根页面布局（OrderScreen） #

@Destination
@Composable
fun OrderScreen(navigator: DestinationsNavigator) {
    Box(modifier = Modifier.fillMaxSize()) {
        // 可滚动内容区域
        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
                .padding(12.dp)
        ) {
            StepOne()
        }

        // 操作按钮，默认对齐屏幕底部
        ActionButton(modifier = Modifier.align(Alignment.BottomCenter))
    }
}

步骤组件（StepOne） #

@Composable
fun StepOne() {
    Column(
        verticalArrangement = Arrangement.spacedBy(12.dp),
        modifier = Modifier.imePadding()
    ) {
        Text(text = "Step One")
        // 这里放置其他业务元素（输入框、文本说明等）
    }
}

操作按钮组件（ActionButton） #

@Composable
fun ActionButton(modifier: Modifier = Modifier) {
    Button(
        onClick = { /* 替换为你的点击逻辑 */ },
        modifier = modifier
            .fillMaxWidth()
            .padding(horizontal = 12.dp, vertical = 5.dp)
            .height(24.dp)
    ) {
        Text(text = "Proceed")
    }
}

关键说明 #

• 用Box作为根容器，将滚动内容和按钮分为两个层级：滚动内容占满全屏，按钮默认对齐底部
• 当内容高度不足屏幕时，按钮会固定在屏幕底部；当内容超出屏幕高度，滚动到底部即可看到按钮
• 移除了原代码中fillMaxHeight和Modifier.weight(1f)的错误用法，避免布局挤压问题

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