Jetpack Compose中如何监听ModalBottomSheetLayout的关闭事件？

架构老林

2026-10-5

Jetpack Compose ModalBottomSheetLayout 关闭事件监听方案

存在对应的监听方法，核心是通过ModalBottomSheetState的状态变化实现监听，目前有两种常用实现方式：

方案1：全场景关闭事件监听（推荐）

ModalBottomSheetLayout的可见状态由ModalBottomSheetValue枚举控制，包含Expanded（展开）、HalfExpanded（半展开，可选配置）、Hidden（隐藏）三个状态。你可以通过LaunchedEffect监听状态变化，当状态变为Hidden时触发关闭逻辑，该方案可以覆盖所有关闭场景：包括用户点击遮罩层关闭、下滑关闭、代码主动调用关闭的情况。
示例代码如下：

val sheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)

// 监听底部页状态变化
LaunchedEffect(sheetState.currentValue) {
    if (sheetState.currentValue == ModalBottomSheetValue.Hidden) {
        // 此处写入底部页关闭后的业务逻辑
        Log.d("BottomSheet", "底部弹出页已关闭")
    }
}

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

方案2：仅监听代码主动触发的关闭

如果你只需要监听代码主动调用hide()触发的关闭场景，可以直接等待hide()方法执行完成后执行后续逻辑：

val scope = rememberCoroutineScope()
val sheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)

Button(onClick = {
    scope.launch {
        sheetState.hide()
        // hide方法执行完成即代表底部页已关闭，此处写入后续逻辑
        Log.d("BottomSheet", "主动关闭底部页完成")
    }
}) {
    Text("关闭底部弹出页")
}

注意：该方案无法覆盖用户交互触发的关闭行为，仅适合特定场景使用。