Flutter中如何让超出Stack范围的Widget响应点击事件？

嘿，这个问题我之前也踩过坑！Flutter目前有个已知限制：那些超出Stack范围的Widget没办法接收手势事件。不过别担心，咱们可以通过自定义扩展Stack类的方式来绕过这个问题，我整理了一个优化后的实现方案，亲测可用：

class StackTappableOutside extends Stack {
  const StackTappableOutside({
    super.key,
    super.alignment,
    super.textDirection,
    super.fit,
    super.clipBehavior,
    super.children,
  });

  @override
  RenderStack createRenderObject(BuildContext context) {
    return RenderStackTappableOutside(
      alignment: alignment,
      textDirection: textDirection ?? Directionality.of(context),
      fit: fit,
      clipBehavior: clipBehavior,
    );
  }
}

class RenderStackTappableOutside extends RenderStack {
  RenderStackTappableOutside({
    super.alignment,
    super.textDirection,
    super.fit,
    super.clipBehavior,
  });

  @override
  bool hitTestChildren(BoxHitTestResult result, {required Offset position}) {
    // 遍历所有子组件，忽略Stack边界限制，执行点击测试
    for (final child in children) {
      final childParentData = child.parentData as StackParentData;
      final transformedPosition = position - childParentData.offset;
      if (child.hitTest(result, position: transformedPosition)) {
        return true;
      }
    }
    return false;
  }
}

核心原理很简单：默认的RenderStack只会检测子组件在自身范围内的点击，咱们重写hitTestChildren方法后，会遍历所有子组件，不管它们是否超出Stack的边界，都会对其进行点击测试，这样超出范围的Widget就能正常响应点击事件啦。

备注：内容来源于stack exchange，提问作者TSR