如何在Jetpack Compose的ModalBottomSheetLayout中实现取消事件？

要实现用户关闭底部弹窗（点击外部、按下返回键等场景）时触发自定义逻辑，核心思路是监听ModalBottomSheetState的状态变化，当弹窗状态切换为Hidden时执行你的业务代码。以下是具体实现步骤和完整代码：

1. 核心实现逻辑 #

• 使用rememberModalBottomSheetState创建并持有弹窗状态实例
• 通过snapshotFlow监听状态变化，当状态变为Hidden时触发自定义回调
• 该方式会覆盖所有弹窗关闭场景：点击外部遮罩、按下返回键、主动调用sheetState.hide()

2. 完整代码示例 #

fun BottomSheetWrapper(
    onBottomSheetCancel: () -> Unit, // 自定义关闭回调
    content: @Composable () -> Unit
) {
    // 创建底部弹窗状态，初始为隐藏
    val sheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)

    // 监听弹窗状态变化
    LaunchedEffect(sheetState) {
        snapshotFlow { sheetState.currentState }
            .distinctUntilChanged()
            .collect { currentState ->
                if (currentState == ModalBottomSheetValue.Hidden) {
                    onBottomSheetCancel() // 触发自定义逻辑
                }
            }
    }

    ModalBottomSheetLayout(
        sheetState = sheetState,
        sheetContent = {
            Spacer(modifier = Modifier.height(1.dp))
            content()
        },
        content = {
            // 主内容区域示例：比如打开弹窗的按钮
            Button(onClick = {
                coroutineScope.launch { sheetState.show() }
            }) {
                Text("打开底部弹窗")
            }
        }
    )
}

3. 额外说明 #

• 如果需要拦截返回键并自定义关闭行为，可以配合BackHandler使用，但上述状态监听已经能覆盖默认返回键关闭场景：

  BackHandler(sheetState.isVisible) {
      coroutineScope.launch {
          sheetState.hide()
          // 若需要在返回键关闭时执行额外逻辑，可在此补充
      }
  }
  

• 若要区分「用户主动关闭」和「程序调用关闭」，可以在调用sheetState.hide()时传入自定义标记，结合状态监听做判断，但多数场景下无需额外区分。

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