Jetpack Compose中实现ModalBottomSheetLayout隐藏时同步关闭软键盘

我完全懂你的困扰！当点击BottomSheet外部让它收起来时，软键盘还留在屏幕上确实影响体验。咱们可以通过监听BottomSheet的状态变化，在它切换到隐藏状态时主动关闭软键盘，具体实现看下面：

核心思路 #

1. 获取LocalSoftwareKeyboardController实例，它是Jetpack Compose中用来控制软键盘显示/隐藏的核心工具。
2. 监听ModalBottomSheetState的状态变化，当状态变为Hidden时，调用键盘控制器的hide()方法。

修改后的完整代码 #

import androidx.compose.foundation.layout.Column
import androidx.compose.material.OutlinedButton
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Text
import androidx.compose.material.ModalBottomSheetLayout
import androidx.compose.material.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.platform.LocalSoftwareKeyboardController

@Composable
fun YourScreen() {
    val state = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
    val scope = rememberCoroutineScope()
    // 获取软键盘控制器
    val keyboardController = LocalSoftwareKeyboardController.current

    // 监听BottomSheet状态变化，收起时关闭软键盘
    LaunchedEffect(state.currentValue) {
        if (state.currentValue == ModalBottomSheetValue.Hidden) {
            keyboardController?.hide()
        }
    }

    ModalBottomSheetLayout(
        sheetContent = {
            Column {
                var text by remember { mutableStateOf("") }
                OutlinedTextField(
                    value = text,
                    label = { Text("Text") },
                    onValueChange = { text = it }
                )
                var text1 by remember { mutableStateOf("") }
                OutlinedTextField(
                    value = text1,
                    label = { Text("Text1") },
                    onValueChange = { text1 = it }
                )
                OutlinedButton(
                    onClick = { /* 你的提交逻辑 */ },
                ) {
                    Text(text = "SUBMIT")
                }
            }
        },
        sheetState = state,
        content = { Greeting(state = state, scope = scope) }
    )
}

@Composable
fun Greeting(state: ModalBottomSheetState, scope: androidx.compose.runtime.CoroutineScope) {
    // 主内容区域示例：打开BottomSheet的按钮
    OutlinedButton(onClick = {
        scope.launch {
            state.show()
        }
    }) {
        Text("Open BottomSheet")
    }
}

代码说明 #

• LocalSoftwareKeyboardController.current：从Compose的本地上下文获取键盘控制器，它能直接控制软键盘的显示和隐藏。
• LaunchedEffect(state.currentValue)：这个副作用会在state.currentValue变化时触发——不管是点击外部收起BottomSheet，还是通过代码主动隐藏，只要状态变为Hidden，就会调用keyboardController?.hide()关闭软键盘。

这样修改后，下次你收起BottomSheet时，软键盘就会跟着一起消失啦！

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