Flutter如何实现Draggable Bottom Sheet且不阻挡背景UI交互

问题根源 #

默认接入DraggableScrollableSheet时背景无法交互，核心是两个默认逻辑拦截了触摸事件：

• 调用showModalBottomSheet等模态弹窗方法时，框架会自动插入全屏的遮罩层（barrier），哪怕将遮罩透明度设为0，这层组件依然会消费所有触摸事件，阻断背景交互
• 直接将DraggableScrollableSheet插入Overlay时，组件默认占满全屏布局，面板上方的透明空白区域依然会参与命中测试，拦截背景控件的触摸事件

具体实现步骤 #

• 放弃模态弹窗调用方式：不要使用showModalBottomSheet、showGeneralDialog这类自带模态拦截的方法，直接通过当前上下文的OverlayState插入自定义OverlayEntry承载拖拽面板，完全控制上层组件的命中逻辑
• 自定义全屏布局的命中规则：给OverlayEntry的根节点设为全屏尺寸的Stack，Stack中除了底部面板实际可视区域外的所有部分，全部用IgnorePointer包裹，让透明区域直接透传触摸事件给下层背景页面
• 保留面板自身的交互能力：DraggableScrollableSheet组件不要套IgnorePointer，保证内部拖拽、控件点击逻辑正常生效

核心代码示例 #

// 点击按钮时调用该方法显示拖拽面板
void showDraggableBottomSheet(BuildContext context) {
  late OverlayEntry sheetEntry;
  sheetEntry = OverlayEntry(
    builder: (context) {
      return SizedBox.expand(
        child: Stack(
          alignment: Alignment.bottomCenter,
          children: [
            // 全屏透明区域，透传所有触摸事件给背景
            Positioned.fill(
              // 如果需要背景变暗的视觉效果，可给Container加color: Colors.black.withOpacity(0.2)
              child: IgnorePointer(child: Container()),
            ),
            // 可拖拽底部面板
            DraggableScrollableSheet(
              initialChildSize: 0.3, // 初始高度占屏幕30%
              minChildSize: 0.2, // 最小拖拽高度占屏幕20%
              maxChildSize: 0.8, // 最大拖拽高度占屏幕80%
              snap: true,
              builder: (context, scrollController) {
                return Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
                    boxShadow: [BoxShadow(blurRadius: 10, color: Colors.black12)],
                  ),
                  child: ListView(
                    controller: scrollController,
                    padding: EdgeInsets.all(16),
                    children: [
                      Center(
                        child: Container(
                          width: 40,
                          height: 4,
                          decoration: BoxDecoration(
                            color: Colors.grey[300],
                            borderRadius: BorderRadius.circular(2)
                          ),
                        ),
                      ),
                      SizedBox(height: 20),
                      Text("更多操作", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                      // 此处放置自定义操作控件
                      TextButton(
                        onPressed: () => sheetEntry.remove(),
                        child: Text("关闭面板")
                      )
                    ],
                  ),
                );
              },
            )
          ],
        ),
      );
    }
  );
  // 往Overlay插入面板
  Overlay.of(context).insert(sheetEntry);
}

注意事项 #

• 如果需要面板弹出/收起的过渡动画，可自行给DraggableScrollableSheet包裹动画组件，通过动画控制器控制尺寸、透明度变化即可，不需要依赖路由动画
• 若需要点击面板外区域关闭面板的能力，不要用barrier实现，可给透明区域的IgnorePointer外层套GestureDetector，点击时调用sheetEntry.remove()即可，通过behavior: HitTestBehavior.translucent调整命中逻辑，避免拦截背景的滑动、点击事件
• 面板销毁时一定要调用OverlayEntry.remove()，避免内存泄漏

内容的提问来源于stack exchange，提问作者Omari Celestine