Flutter中Stack内PageView上层存在其他组件时无法响应滑动手势如何解决

这个问题本质是Flutter手势竞技场的默认规则导致：触摸事件会优先交给渲染层级更高的组件处理，如果上层组件消费了触摸事件，下层的PageView就无法接收事件触发滑动。根据上层组件的交互需求，可以选择以下对应方案： #

方案1：上层组件完全不需要响应任何手势（最常用） #

给所有上层不需要交互的组件套IgnorePointer组件，它会直接忽略自身和子组件的所有触摸事件，将事件完全透传给下层的PageView，实现成本最低、性能最优。
代码示例：

Stack(
  children: [
    PageView(...),
    // 所有上层无交互需求的组件都包裹IgnorePointer
    IgnorePointer(
      child: Container(...),
    ),
    IgnorePointer(
      child: Text(...),
    ),
    // 其余上层组件
    ...
  ],
)

方案2：上层组件只有部分子元素需要响应手势 #

不需要给整个上层容器套IgnorePointer，仅给不需要交互的子区域套IgnorePointer即可；如果上层容器本身无默认手势响应，也可以给容器设置hitTestBehavior: HitTestBehavior.translucent，这样触摸事件会同时透传给下层PageView和上层需要响应交互的子组件（比如按钮）。
代码示例：

Stack(
  children: [
    PageView(...),
    Container(
      // 配置透传属性
      hitTestBehavior: HitTestBehavior.translucent,
      child: Column(
        children: [
          // 不需要交互的文本
          IgnorePointer(
            child: Text('展示用文本，不响应点击'),
          ),
          // 需要响应点击的按钮，不需要包IgnorePointer
          ElevatedButton(
            onPressed: () => print('按钮可正常点击'),
            child: Text('可点击按钮'),
          )
        ],
      ),
    )
  ],
)

方案3：上层组件需要响应滑动手势，同时要保留PageView滑动能力 #

可以通过RawGestureDetector自定义手势识别逻辑，修改上层手势识别器的竞技场规则，不独占手势事件，让上层和下层的PageView可以同时响应滑动操作。该方案适合复杂交互动效的场景，一般业务开发优先选择前两种方案即可。 #

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