Flutter Stack中InkWell被PageView遮挡导致点击失效如何解决

Flutter的手势事件命中测试在Stack布局中遵循从最上层子组件（即Stack children列表的最后一个元素）到最下层子组件的遍历规则，一旦某层组件通过命中测试，事件就不会再向下传递。
你当前布局中PageView.builder位于Stack上层，即使对应位置的首个item通过Opacity(opacity: 0)设置为完全透明，该组件依然会参与命中测试，会拦截所有落在首个卡片区域内的点击事件，导致下层包裹在InkWell里的首个PageViewItem永远无法收到点击回调。

方案1：透传首个卡片区域的点击事件（改动最小） #

核心思路是让上层PageView中占据首个卡片位置的透明组件不参与命中测试，直接把事件透传给下层的InkWell。
只需修改PageView.builder的itemBuilder逻辑，给首个透明item包裹IgnorePointer组件即可：

itemBuilder: (context, index) {
  if (index <= _firstItemIndex) {
    return IgnorePointer( // 包裹后子组件不参与命中测试，事件自动向下透传
      child: Opacity(
        opacity: 0,
        child: PageViewItem(
          index: index,
          width: _itemWidth,
          url: model[index],
        ),
      ),
    );
  }
  return PageViewItem(
    index: index,
    width: _itemWidth,
    url: model[index],
  );
},

注意：不要直接使用空Container或者SizedBox占位，PageView的item宽度必须和其他item保持一致，否则会导致滚动偏移计算错误。

方案2：收敛点击逻辑到PageView层（推荐，结构最清晰） #

完全去掉Stack中单独在下层放置首个PageViewItem的逻辑，所有卡片（包括首个透明卡片）的渲染、点击逻辑全部放到PageView.builder内部处理，从根源上避免Stack层级的事件冲突：

1. 删除Stack下Positioned.fill对应的整段底层首个卡片代码
2. 给PageView的每个item统一包裹点击组件，针对首个item单独处理点击逻辑：

SizedBox(
  height: 250,
  child: PageView.builder(
    padEnds: false,
    controller: _controller,
    itemBuilder: (context, index) {
      return Opacity(
        opacity: index <= _firstItemIndex ? 0 : 1,
        child: InkWell(
          onTap: () {
            if (index == _firstItemIndex) {
              debugPrint("clicked");
              // 写首个卡片的点击逻辑
              return;
            }
            // 写其他卡片的点击逻辑
          },
          child: PageViewItem(
            index: index,
            width: _itemWidth,
            url: model[index],
          ),
        ),
      );
    },
    itemCount: model.length,
  ),
)

这个方案不需要额外处理事件透传，所有逻辑都在PageView内部，后续调整卡片样式、新增点击逻辑时不需要跨层级修改代码，维护成本最低。

方案3：手动监听指针事件转发回调（不推荐） #

如果必须保留现有Stack上下层分离的结构，可以在上层PageView外层包裹Listener组件，监听原始指针按下事件，手动判断点击坐标是否落在首个卡片的区域内，如果是则主动触发下层对应的点击逻辑。但这个方案需要自己计算坐标转换、处理手势竞争，容易和PageView的滚动手势冲突，非特殊场景不建议使用。

• 如果不想大改现有代码结构，选方案1，仅需加几行代码即可解决问题
• 如果是新写逻辑或者后续需要迭代功能，优先选方案2，代码结构更合理，没有隐式的事件透传逻辑

内容的提问来源于stack exchange，提问作者Cyrus the Great