Jetpack Compose：长文本致滚动Column按钮移位，需固定按钮于屏幕底部

原代码的问题在于内层滚动Column设置了fillMaxSize()，加上外层Column的Arrangement.SpaceBetween和按钮Row的weight(1f, false)配置，导致文本内容过长时按钮位置被挤压偏移。以下是两种可行的修复方案：

方案一：利用Column的weight分配空间 #

将滚动内容区域设置为weight(1f)，让它占满屏幕除按钮外的所有空间，按钮自然固定在底部：

Column(
    modifier = modifier.fillMaxSize(),
) {
    // 滚动内容区域：占满剩余空间
    Column(
        modifier = Modifier
            .weight(1f)
            .verticalScroll(rememberScrollState())
            .padding(top = Padding.contentBig)
    ) {
        title.Widget()
        Spacer(modifier = Modifier.height(Padding.contentBig))
        description.Widget()
    }

    // 按钮区域：固定在底部
    Row {
        button.Widget(
            onClick = { onClickListener?.invoke(it) }
        )
    }
}

方案二：使用Box布局定位按钮 #

通过Box的对齐属性直接将按钮固定在屏幕底部，滚动内容区域填充整个Box：

Box(modifier = modifier.fillMaxSize()) {
    // 滚动内容区域：填充整个Box，底部留空避免被按钮遮挡
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
            .padding(
                top = Padding.contentBig,
                bottom = 60.dp // 根据按钮实际高度调整留空值
            )
    ) {
        title.Widget()
        Spacer(modifier = Modifier.height(Padding.contentBig))
        description.Widget()
    }

    // 按钮固定在底部
    Row(
        modifier = Modifier.align(Alignment.BottomStart)
    ) {
        button.Widget(
            onClick = { onClickListener?.invoke(it) }
        )
    }
}

关键说明 #

• 移除原代码中滚动Column的fillMaxSize()与按钮Row的weight(1f, false)，这两个配置是导致布局偏移的核心原因
• 方案一中，即便内容较短，按钮依然会固定在屏幕底部；方案二更适合需要精确控制按钮位置的场景
• 若使用方案二，需确保滚动内容的底部padding足够，避免文本被按钮遮挡

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