为何Flutter中extendBody为true时BottomAppBar会传递手势至Scaffold Body？

原因说明 #

Flutter里BottomAppBar的CircularNotchedRectangle只是做了视觉上的裁剪，缺口区域并没有实际的组件来拦截手势。再加上你设置了extendBody: true，Scaffold的body会直接延伸到底部导航栏的下方，缺口位置本质上还是body的可交互区域，所以点击缺口时手势会直接传递给body里的组件。

不用额外嵌套Stack的解决办法 #

如果你想让缺口区域不触发body的手势，不需要给body套Stack加透明容器，直接在BottomAppBar内部给缺口位置补个透明的拦截层就行：

bottomNavigationBar: BottomAppBar(
  shape: const CircularNotchedRectangle(),
  clipBehavior: Clip.antiAlias,
  notchMargin: 10,
  child: Stack(
    children: [
      const SizedBox(height: 100),
      // 拦截缺口处的手势，尺寸对应FAB+notchMargin的范围
      Positioned(
        right: 0,
        bottom: 0,
        width: 80,
        height: 80,
        child: GestureDetector(
          onTap: () {}, // 空回调吃掉手势
          child: Container(color: Colors.transparent),
        ),
      ),
    ],
  ),
),

这个方案直接在BottomAppBar内部处理，逻辑更清晰，也不会多套不必要的组件。

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