如何禁止用户拖拽ModalBottomSheet,仅保留完全显示/隐藏状态?
禁用ModalBottomSheet的半拖拽状态,仅保留完全显示/隐藏
要实现仅允许ModalBottomSheet在完全显示或完全隐藏两种状态切换,核心是利用Compose提供的skipHalfExpanded参数,同时可按需控制拖拽权限:
关键配置步骤
创建状态时禁用半展开状态
在初始化ModalBottomSheetState时,设置skipHalfExpanded = true,这会让BottomSheet跳过半展开的中间状态,拖拽时直接在完全展开(Expanded)和隐藏(Hidden)之间切换。val sheetState = rememberModalBottomSheetState( initialValue = ModalBottomSheetValue.Hidden, skipHalfExpanded = true // 核心参数,禁用半展开状态 )按需控制拖拽权限
- 如果允许用户拖拽直接切换状态(但不会停在半中间),保持默认的拖拽启用即可。
- 如果仅希望通过按钮或外部点击控制显示/隐藏,可在
ModalBottomSheet组件中添加dragEnabled = false,完全禁用拖拽操作。
完整代码示例
@Composable fun FixedStateBottomSheet() { val sheetState = rememberModalBottomSheetState( initialValue = ModalBottomSheetValue.Hidden, skipHalfExpanded = true ) val scope = rememberCoroutineScope() Scaffold { paddingValues -> Column( modifier = Modifier .fillMaxSize() .padding(paddingValues) .padding(16.dp), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center ) { Button(onClick = { scope.launch { if (sheetState.isVisible) sheetState.hide() else sheetState.show() } }) { Text(text = "切换底部弹窗") } } } ModalBottomSheet( sheetState = sheetState, onDismissRequest = { scope.launch { sheetState.hide() } }, // 如需禁止拖拽,取消下方注释 // dragEnabled = false ) { Column( modifier = Modifier .fillMaxWidth() .padding(16.dp) .height(300.dp), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center ) { Text(text = "仅支持完全显示/隐藏的弹窗") Spacer(modifier = Modifier.height(16.dp)) Button(onClick = { scope.launch { sheetState.hide() } }) { Text(text = "关闭") } } } }
效果说明
- 设置
skipHalfExpanded = true后,拖拽BottomSheet时,它会直接滑向完全显示或完全隐藏状态,不会停留在半展开的中间位置。 - 若启用
dragEnabled = false,用户无法通过拖拽操作改变弹窗状态,只能通过按钮点击或弹窗外部区域点击来关闭。
内容的提问来源于stack exchange,提问作者Adria Fernandez
相关产品推荐
相关产品推荐

