如何禁用Material 3 Jetpack Compose ModalBottomSheet外部点击关闭行为?
禁用Material 3 ModalBottomSheet半展开时点击外部关闭的默认行为
要忽略默认的外部点击关闭逻辑、自己控制弹窗关闭,你可以这么处理:
- 拦截弹窗状态变更:创建
SheetState时用confirmValueChange回调,只有你允许关闭的时候,才让状态切换到隐藏。 - 空实现
onDismissRequest:直接留空这个回调,阻止默认的关闭触发逻辑。
具体代码示例:
// 控制是否允许关闭弹窗的开关 var isAllowedToClose by remember { mutableStateOf(false) } // 协程作用域,用于控制弹窗状态 val scope = rememberCoroutineScope() val bottomSheetState = rememberModalBottomSheetState( initialValue = ModalBottomSheetValue.HalfExpanded, confirmValueChange = { newValue -> // 只有当不是要隐藏弹窗,或者我们主动允许关闭时,才同意状态变更 newValue != ModalBottomSheetValue.Hidden || isAllowedToClose } ) ModalBottomSheet( onDismissRequest = { /* 空实现,忽略默认关闭行为 */ }, sheetState = bottomSheetState, tonalElevation = MagicUnit.mu025, dragHandle = {} ) { // 弹窗内部内容 Column( modifier = Modifier.fillMaxWidth().padding(16.dp) ) { Text("半展开状态的弹窗") // 自定义关闭按钮,自己处理关闭逻辑 Button( onClick = { isAllowedToClose = true scope.launch { bottomSheetState.hide() }.invokeOnCompletion { // 重置开关,避免下次打开弹窗时直接允许关闭 isAllowedToClose = false } } ) { Text("关闭弹窗") } } }
为什么这么做?
- 点击外部区域时,系统会尝试把弹窗状态改成
Hidden,但confirmValueChange返回false会直接拦截这个操作。 onDismissRequest留空,避免默认的关闭逻辑生效。- 只有当你点击内部的关闭按钮时,才打开允许关闭的开关,让弹窗正常隐藏,之后再重置开关,保证下次打开弹窗时的行为符合预期。
内容的提问来源于stack exchange,提问作者joghm
相关产品推荐
相关产品推荐

