Jetpack Compose：实现ModalBottomSheetLayout下滑关闭、屏蔽外部点击及动画修复

一、实现“允许滑动关闭，阻止外部点击关闭” #

不能直接设置confirmValueChange = { false }（这会阻止所有状态变更，包括滑动关闭），正确做法是拦截外部遮罩（scrim）的点击事件，同时保留滑动关闭逻辑：

1. 正常初始化sheetState，不设置confirmValueChange为false（默认允许状态变更）：

   val sheetState = rememberModalBottomSheetState(
       initialValue = ModalBottomSheetValue.Hidden,
       animationSpec = tween(
           durationMillis = 2000,
           easing = FastOutSlowInEasing
       )
   )
   

2. 在ModalBottomSheetLayout上添加pointerInput修饰符，拦截遮罩区域的点击：

   ModalBottomSheetLayout(
       sheetState = sheetState,
       sheetContent = {
           // 你的底部弹窗内容
       },
       scrimColor = Color.Black.copy(alpha = 0.5f), // 保留遮罩的视觉效果
       modifier = Modifier.pointerInput(Unit) {
           awaitPointerEventScope {
               while (true) {
                   val event = awaitPointerEvent()
                   if (event.type == PointerEventType.Press && sheetState.isVisible) {
                       // 判断点击位置是否在弹窗区域外
                       val sheetBounds = sheetState.requireSheetCoordinates()?.bounds ?: continue
                       if (!sheetBounds.contains(event.position)) {
                           event.consume() // 拦截点击，不触发关闭
                       }
                   }
               }
           }
       }
   ) {
       // 主界面内容
   }
   

   这段代码会监听所有点击事件，仅当弹窗可见且点击位置在遮罩区域时拦截操作，滑动关闭的逻辑不受影响。

二、修复动画不生效问题 #

之前动画失效是因为confirmValueChange = { false }阻止了状态变更，动画没有触发条件。按照上面的方法去掉该设置后，动画即可正常生效。

额外注意：

• 确保通过协程正确触发弹窗的显示/隐藏：

  Button(onClick = {
      CoroutineScope(Dispatchers.Main).launch {
          if (sheetState.isVisible) sheetState.hide() else sheetState.show()
      }
  }) {
      Text(text = if (sheetState.isVisible) "关闭弹窗" else "打开弹窗")
  }
  

• 弹窗内容高度要足够，否则动画效果可能不明显；可通过Modifier.height()固定弹窗高度。

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