如何在Kotlin Compose中将BottomBar嵌入Surface组件内？

直接用Column配合weight(1f)的布局方案就能解决你的问题，既保证BottomBar固定在Surface底部且属于其内部，又能保留文本的正常显示效果。以下是完整实现代码和关键说明：

import androidx.compose.foundation.layout.*
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.sp

@Composable
fun DictionaryScreen() {
    // 外层Surface包裹整个布局，BottomBar将嵌入其中
    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colorScheme.background
    ) {
        Column(modifier = Modifier.fillMaxSize()) {
            // 内容区域：通过weight(1f)填充Surface除BottomBar外的所有剩余空间
            Text(
                text = "create your own dictionary",
                modifier = Modifier
                    .weight(1f)
                    .fillMaxWidth()
                    .wrapContentHeight(Alignment.CenterVertically),
                textAlign = TextAlign.Center,
                fontSize = 20.sp,
                color = MaterialTheme.colorScheme.onBackground
            )

            // BottomBar：固定在Surface底部，属于Surface内部元素
            BottomBar(modifier = Modifier.fillMaxWidth()) {
                // 这里替换成你的BottomBar实际内容，比如导航按钮
                Row(
                    modifier = Modifier.fillMaxWidth().padding(16.dp),
                    horizontalArrangement = Arrangement.SpaceAround
                ) {
                    Text("Home")
                    Text("Add")
                    Text("Settings")
                }
            }
        }
    }
}

// 自定义BottomBar组件（可根据需求修改样式）
@Composable
fun BottomBar(modifier: Modifier = Modifier, content: @Composable () -> Unit) {
    Surface(
        modifier = modifier,
        color = MaterialTheme.colorScheme.primaryContainer,
        tonalElevation = 4.dp
    ) {
        content()
    }
}

关键逻辑说明 #

1. Surface包裹整个Column：确保BottomBar是Surface的子元素，完全嵌入其中，不会出现两者重叠的问题。
2. Column+weight(1f)：内容区域通过weight(1f)占据Surface的全部剩余高度，迫使BottomBar自动被挤压到屏幕底部，同时保证文本在内容区域内垂直居中（可根据需求调整wrapContentHeight的对齐方式）。
3. 替代Box的原因：Box是层叠布局，若未设置精确的位置约束，容易出现元素重叠；而Column的线性垂直布局配合weight，能更可靠地实现「内容填充+底部固定」的结构，完全适配你的需求。

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