Android Jetpack Compose中Bottom Sheet含TextField时键盘遮挡问题

1. 正确配置BottomSheet的WindowInsets #

给ModalBottomSheet指定包含IME的WindowInsets，让BottomSheet自动适配键盘高度，同时在内容容器上添加imePadding()确保内容不被键盘覆盖：

val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
var text by remember { mutableStateOf("") }

ModalBottomSheet(
    onDismissRequest = { /* 关闭逻辑 */ },
    sheetState = sheetState,
    // 让BottomSheet同时考虑IME和导航栏的Insets
    windowInsets = WindowInsets.ime.union(WindowInsets.navigationBars)
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp)
            .imePadding() // 给内容底部添加键盘高度的padding
    ) {
        TextField(
            value = text,
            onValueChange = { text = it },
            modifier = Modifier.fillMaxWidth(),
            placeholder = { Text("输入内容") }
        )
        Spacer(modifier = Modifier.height(16.dp))
        Button(
            onClick = { /* 确认逻辑 */ },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("确认")
        }
    }
}

2. 手动监听键盘高度动态调整padding #

如果系统Insets适配失效，可以手动获取IME的高度，给内容底部设置动态padding：

val density = LocalDensity.current
val imeInsets = LocalWindowInsets.current.ime
// 将像素高度转为dp单位
val imeBottomPadding = remember(imeInsets) {
    density.run { imeInsets.bottom.toDp() }
}

ModalBottomSheet(
    onDismissRequest = { /* 关闭逻辑 */ },
    sheetState = sheetState
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp)
            .padding(bottom = imeBottomPadding) // 手动添加键盘高度的padding
    ) {
        // TextField和Button代码同上
    }
}

3. 配置Activity的软键盘模式 #

在AndroidManifest.xml中给对应Activity设置windowSoftInputMode为adjustResize，同时在Activity代码中关闭DecorFitsSystemWindows，确保布局能响应键盘变化：

AndroidManifest.xml

<activity
    android:name=".YourActivity"
    android:windowSoftInputMode="adjustResize">
</activity>

Activity代码

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // 关闭系统自动适配布局，让Compose自行处理Insets
    WindowCompat.setDecorFitsSystemWindows(window, false)
    setContent {
        // 你的Compose页面内容
    }
}

4. 改用BottomSheetScaffold #

如果上述方法都无效，可以尝试使用BottomSheetScaffold，它的底部Sheet对Insets的适配逻辑可能更稳定：

val scaffoldState = rememberBottomSheetScaffoldState(
    bottomSheetState = rememberStandardBottomSheetState(skipPartiallyExpanded = true)
)
var text by remember { mutableStateOf("") }

BottomSheetScaffold(
    scaffoldState = scaffoldState,
    sheetContent = {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
                .imePadding()
        ) {
            TextField(
                value = text,
                onValueChange = { text = it },
                modifier = Modifier.fillMaxWidth()
            )
            Spacer(modifier = Modifier.height(16.dp))
            Button(
                onClick = { /* 确认逻辑 */ },
                modifier = Modifier.fillMaxWidth()
            ) {
                Text("确认")
            }
        }
    },
    content = { padding ->
        // 主页面内容，使用padding处理系统Insets
        Box(modifier = Modifier.padding(padding)) {
            // ...
        }
    }
)

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