Jetpack Compose：Scaffold底部栏弹出键盘时遮挡TextField的解决方法

问题描述 #

当点击TextField时，键盘弹出，但Scaffold的底部栏会遮挡该TextField。请问是否存在无需通过编程滚动的方式，让该输入框保持可见的解决方法？

原始代码 #

Scaffold(
    modifier = Modifier.fillMaxSize().navigationBarsPadding().imePadding(),
    bottomBar = {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .padding(10.dp)
        ) {
            DefaultButton(
                modifier = Modifier.align(Alignment.Center),
                enabled = true,
                onClick = {
                }) {
                Text(text = "Test")
            }
        }
    }
) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
            .padding(it)
    ) {

        Box(modifier = Modifier.height(2000.dp).fillMaxWidth().background(Color.Red))
        TextField(value = "Testing", onValueChange = {})
    }

}

解决方案 #

无需手动编写滚动逻辑，只需调整Scaffold和底部栏的Modifier配置，利用Jetpack Compose自带的布局适配即可解决：

1. 移除Scaffold根Modifier中的imePadding()——Scaffold内部的padding值（即代码中的it）已经会自动处理键盘弹出时的布局调整，手动添加imePadding()会干扰默认适配逻辑。
2. 将navigationBarsPadding()移至底部栏的Modifier中，确保底部栏始终位于系统导航栏上方，同时不影响内容区域的键盘适配。
3. 确保内容Column正确应用Scaffold提供的padding值，该值包含了底部栏、状态栏以及键盘弹出时的额外间距。

修改后的代码 #

Scaffold(
    modifier = Modifier.fillMaxSize(),
    bottomBar = {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .padding(10.dp)
                .navigationBarsPadding() // 将导航栏padding移至底部栏
        ) {
            DefaultButton(
                modifier = Modifier.align(Alignment.Center),
                enabled = true,
                onClick = {}
            ) {
                Text(text = "Test")
            }
        }
    }
) { paddingValues ->
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
            .padding(paddingValues) // 应用Scaffold自动计算的适配padding
    ) {
        Box(modifier = Modifier.height(2000.dp).fillMaxWidth().background(Color.Red))
        TextField(value = "Testing", onValueChange = {})
    }
}

修改后，当键盘弹出时，Scaffold会自动调整内容区域的底部内边距，让TextField避开底部栏和键盘，保持可见，完全不需要额外的编程滚动逻辑。

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