Jetpack Compose布局疑问：顶部文本底部按钮，如何填充剩余空间？

你需要把所有组件放在同一个Column容器内，通过Modifier.weight(1f)让中间区域占据Text和Button之间的全部剩余空间。具体实现如下：

Column(
    modifier = Modifier
        .fillMaxSize()
        .background(Color.White),
    verticalArrangement = Arrangement.Top
) {
    // 顶部标题Text
    Text(
        text = "Heading",
        fontSize = 16.sp,
        modifier = Modifier.padding(16.dp)
    )

    // 中间填充剩余空间的内容区域
    Column(
        modifier = Modifier
            .weight(1f) // 关键：占据所有剩余空间
            .fillMaxWidth()
            .padding(16.dp)
            .background(Color.LightGray) // 仅用于演示，可替换为实际内容
    ) {
        // 这里放你的剩余内容，比如列表、文本、自定义组件等
        Text(text = "这是中间填充的内容，会自动撑满剩余空间")
    }

    // 底部Button
    Button(
        onClick = {},
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        Text(text = "底部按钮")
    }
}

核心说明： #

• 统一父容器：所有组件必须放在同一个Column里，才能让weight正确计算剩余空间
• Modifier.weight(1f)：这个修饰符会让中间区域优先分配父容器中除了顶部Text和底部Button之外的所有剩余空间，无论中间内容多少，都会撑满该区域
• fillMaxSize()：父Column需要设置fillMaxSize()来占满整个屏幕，这样剩余空间的计算才有效

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