Jetpack Compose：BottomBar与TextField重叠问题的解决方法

问题根源在于语法错误导致Scaffold内边距未正确应用，加上BottomBar的padding设置影响了内边距计算。以下是具体修复方案：

核心修复步骤 #

• 修正Scaffold参数语法：原代码中scaffoldPadding -是语法错误，改为scaffoldPadding ->，才能正确获取Scaffold自动生成的内边距。
• 正确应用Scaffold内边距：Scaffold会根据BottomBar的显示状态动态计算内容区域的安全内边距，将scaffoldPadding应用到内容根布局（Column），即可避免内容被BottomBar覆盖。
• 调整BottomBar的padding：将BottomBar内Box的顶部padding改为垂直方向padding，让Scaffold能正确识别BottomBar的整体高度，生成准确的内边距值。

修复后的完整代码 #

@Preview
@Composable
fun EditContent() {
    var text by remember { mutableStateOf("") }
    Scaffold(
        bottomBar = {
            if (text.isNotEmpty()) {
                Box(
                    modifier = Modifier
                        .background(Color.White)
                        .padding(horizontal = 16.dp)
                        .padding(vertical = 12.dp)
                ) {
                    Button(
                        modifier = Modifier.fillMaxWidth(),
                        onClick = { }
                    ) {
                        Text(text = "Save")
                    }
                }
            }
        }
    ) { scaffoldPadding ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
                .padding(scaffoldPadding)
                .padding(horizontal = 16.dp)
        ) {
            Spacer(modifier = Modifier.height(1000.dp))
            TextField(
                value = text,
                onValueChange = { text = it }
            )
        }
    }
}

原理说明 #

Scaffold的scaffoldPadding是动态值：当BottomBar显示时，自动包含对应高度的底部内边距；当BottomBar隐藏时，底部内边距恢复为0。正确应用该padding后，TextField会在BottomBar出现时自动向上偏移，彻底解决重叠问题。

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