如何禁用ModalBottomSheet向下滚动时的关闭行为?
如何禁用ModalBottomSheet向下滚动时的关闭行为?
我太懂这个痛点了——ModalBottomSheet一向下拖拽滚动就自动关闭,确实影响使用体验。其实你已经找对了核心的解决方向,就是通过rememberModalBottomSheetState的confirmValueChange回调来控制状态切换,可能是细节没卡准,我给你整理好完整的可运行方案:
核心逻辑很简单:利用confirmValueChange的拦截能力,当底部sheet想要切换到Hidden(关闭)状态时,我们返回false来阻止这个状态变化,这样滚动拖拽就不会触发关闭了。
给你看调整后的完整代码,关键部分我都加了注释,你直接替换原有实现就行:
// 1. 自定义sheetState,核心是confirmValueChange的拦截逻辑 val bottomSheetState = rememberModalBottomSheetState( skipPartiallyExpanded = true, // 只保留「完全展开/隐藏」两种状态,避免半展开的干扰 confirmValueChange = { newState -> // 只要新状态是Hidden,就返回false阻止关闭 newState != SheetValue.Hidden } ) val configuration = LocalConfiguration.current val screenHeight = configuration.screenHeightDp.dp val sheetHeight = screenHeight * 0.8f var firstQuestionText by remember{ mutableStateOf(TextFieldValue("")) } var secondQuestionText by remember { mutableStateOf(TextFieldValue("")) } // 2. 在ModalBottomSheet中传入这个自定义的sheetState ModalBottomSheet( onDismissRequest = onDismissRequest, // 若需要保留「点击外部/返回键关闭」的逻辑就留着,不需要则设为{} sheetState = bottomSheetState, modifier = Modifier.fillMaxWidth(), sheetMaxWidth = Dp.Unspecified, containerColor = Color.White, dragHandle = null, // 隐藏默认拖拽手柄,按需保留即可 ) { // 这里放你的sheet内容,比如原来的输入框组件 Column(Modifier.fillMaxSize()) { TextField( value = firstQuestionText, onValueChange = { firstQuestionText = it }, label = { Text("第一个问题") } ) TextField( value = secondQuestionText, onValueChange = { secondQuestionText = it }, label = { Text("第二个问题") } ) } }
额外提两个细节:
- 如果只是想禁用滚动关闭,保留
onDismissRequest的原有逻辑即可,用户点击sheet外部或按返回键仍能正常关闭;如果想完全禁用所有关闭方式,把onDismissRequest设为{}就可以了。 skipPartiallyExpanded = true是可选配置,但开启后sheet不会出现半展开的中间态,更符合大多数禁用滚动关闭的场景需求。
测试一下,应该就能解决你遇到的问题啦~
内容来源于stack exchange
相关产品推荐
相关产品推荐

