Flutter中如何透过Bottom Sheet透明区域拖动后方Google Map

默认实现下完全不行。

核心原因 #

Android的触摸事件分发遵循从上到下的捕获逻辑：只要上层组件的布局边界覆盖了触摸点，事件会优先分发给上层组件，和组件本身是不是透明背景没有任何关系。
你当前的组件结构里，Bottom Sheet和承载Google Map的Stack是平级、且层级高于Stack的：

Scaffold
- Stack
  - Google Map
  - Other Overlay
- Bottom Sheet

只要Bottom Sheet的布局范围覆盖到了对应透明区域，不管这个区域画出来是什么颜色，所有落在这个区域的触摸事件默认都会被Bottom Sheet拦截消费，根本不会传递到下层的Google Map上，自然没法拖动地图。如果用的是官方带遮罩的模态Bottom Sheet，遮罩层本身也会默认消费点击事件，进一步阻断事件传递。

可落地的解决方法 #

• 最低成本方案：调整Bottom Sheet布局边界
  不要让Bottom Sheet的布局范围延伸到你需要操作地图的透明区域，只把Bottom Sheet的布局高度限定在自身实际非透明内容的高度区间，上方预留的透明区域不属于Bottom Sheet的布局范围，事件自然会直接落到下层的Google Map上，直接就能拖动，不会有任何事件冲突。
• 自定义事件分发方案：重写Bottom Sheet的触摸拦截逻辑
  如果业务要求Bottom Sheet的布局必须覆盖到透明区域（比如要做全区域下拉收起的交互），就自定义Bottom Sheet的根容器，重写onInterceptTouchEvent方法：提前记录Bottom Sheet内所有非透明可交互控件的布局坐标，触摸事件到来时先判断坐标是否落在非透明内容的范围内，如果在透明区域就直接返回false放弃拦截事件，让事件透传给下层的地图控件；如果落在Bottom Sheet自身的内容区域或者拖动手势触发阈值内，再正常消费事件处理Bottom Sheet的滑动、点击交互。
  要是用了带默认遮罩的Bottom Sheet组件，还要同步重写遮罩层的事件逻辑，不要让遮罩消费透明区域的触摸事件。

内容的提问来源于stack exchange，提问作者julian nr