Jetpack Compose中ModalBottomSheetLayout按返回键如何隐藏sheetState

ModalBottomSheetLayout是Compose Material库自带的组件，默认已经实现了返回键拦截逻辑：只要你把实例化的sheetState正确传入组件的sheetState参数，弹窗显示时按下系统返回键，组件会自动隐藏弹窗，不需要额外写代码。

如果默认逻辑失效，或者你需要在返回键触发时加入自定义逻辑（比如埋点、隐藏前确认提示），可以用Compose原生的BackHandlerAPI手动实现，步骤如下：

• 首先在对应Composable作用域内初始化弹窗状态和协程作用域：

// 初始化弹窗状态，初始值设为隐藏
val sheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)
// 获取和当前Composable生命周期绑定的协程作用域
val scope = rememberCoroutineScope()

• 添加返回键拦截逻辑，仅在弹窗可见时启用拦截：

BackHandler(enabled = sheetState.isVisible) {
    scope.launch {
        // 此处可插入自定义逻辑
        sheetState.hide()
    }
}

• 正常编写页面布局即可，不需要修改其他现有代码：

ModalBottomSheetLayout(
    sheetState = sheetState,
    sheetContent = {
        // 底部弹窗的内容区域
    }
) {
    // 主页面的内容区域
}

常见问题说明 #

• sheetState.hide()是挂起函数，必须在协程内执行，不要直接在主线程同步调用，用rememberCoroutineScope()获取的协程作用域会随Composable销毁自动取消，不会产生内存泄漏。
• 如果你使用的是Material3版本的ModalBottomSheet组件，上述代码逻辑完全通用，sheetState相关API没有变动。
• 若当前页面存在多个BackHandler，Compose会优先触发UI层级更靠上的拦截逻辑，只要弹窗对应的拦截器在弹窗显示时处于启用状态，就会优先执行隐藏弹窗的逻辑，不会直接触发页面退出。

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