Flutter 通过 Gesture Detection Details 来降低 Stack widgets

Question

我有一个 Stack 上面有两个 widgets。较低的应该能够检测到 GestureDetection 但这是不可能的，因为上面的是阻止它。我的设置：

    return Stack(
  children: [
    Hero(
      tag: month.name + 'image',
      child: Container(
        height: _scaledWidth,
        width: _scaledWidth,
        child: PaintService.getCollageImagesFromCollageOption(
          month.collageOption,
          month.images,
          _scaledWidth,
        ),
      ),
    ),
    Hero(
      tag: month.name + 'shape',
      child: Container(
        height: _scaledWidth,
        width: _scaledWidth,
        child: PaintService.getShapeFromCollageOption(
            month.collageOption, _scaledWidth),
      ),
    ),
  ],
);

上面的小部件是图片中的白框，它必须在图像的顶部。但图像应该是 transformable，我喜欢这样：

  Widget build(BuildContext context) {
final _zoom = useState<double>(1.0);
final _previousZoom = useState<double>(1.0);
final _offset = useState<Offset>(Offset.zero);
final _previousOffset = useState<Offset>(Offset.zero);
final _startingFocalPoint = useState<Offset>(Offset.zero);

final _zoom_2 = useState<double>(1.0);
final _previousZoom_2 = useState<double>(1.0);
final _offset_2 = useState<Offset>(Offset.zero);
final _previousOffset_2 = useState<Offset>(Offset.zero);
final _startingFocalPoint_2 = useState<Offset>(Offset.zero);
return Stack(
  children: [
    Positioned(
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      child: GestureDetector(
        onTap: () => print("tapped"),
        onScaleStart: (details) {
          _startingFocalPoint.value = details.focalPoint;
          _previousOffset.value = _offset.value;
          _previousZoom.value = _zoom.value;
        },
        onScaleUpdate: (details) {
          _zoom.value = _previousZoom.value * details.scale;
          final Offset normalizedOffset =
              (_startingFocalPoint.value - _previousOffset.value) /
                  _previousZoom.value;
          _offset.value =
              details.focalPoint - normalizedOffset * _zoom.value;
        },
        child: ClipPath(
          clipper: _Position1ClipperImage(),
          child: Transform(
            transform: Matrix4.identity()
              ..translate(_offset.value.dx, _offset.value.dy)
              ..scale(_zoom.value),
            child: Image.asset(widget.images[0].path,
                width: widget.width,
                height: widget.width,
                fit: BoxFit.fill),
          ),
        ),
      ),
    ),
    Positioned(
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      child: GestureDetector(
        onTap: () => print("tapped"),
        onScaleStart: (details) {
          _startingFocalPoint_2.value = details.focalPoint;
          _previousOffset_2.value = _offset_2.value;
          _previousZoom_2.value = _zoom_2.value;
        },
        onScaleUpdate: (details) {
          _zoom_2.value = _previousZoom_2.value * details.scale;
          final Offset normalizedOffset =
              (_startingFocalPoint_2.value - _previousOffset_2.value) /
                  _previousZoom_2.value;
          _offset_2.value =
              details.focalPoint - normalizedOffset * _zoom_2.value;
        },
        child: ClipPath(
          clipper: _Position2ClipperImage(),
          child: Transform(
            transform: Matrix4.identity()
              ..translate(_offset_2.value.dx, _offset_2.value.dy)
              ..scale(_zoom_2.value),
            child: Image.asset(widget.images[1].path,
                width: widget.width,
                height: widget.width,
                fit: BoxFit.fill),
          ),
        ),
      ),
    ),
  ],
);


}

就像我说的那样，如果我在图像（第一个代码片段）顶部有第二个 widget，这将不起作用。

我知道我可以简单地将 GestureDetector 移动到 top-level 小部件。但是我怎样才能将这些信息传递给我的图像呢？我被困在这里...

如果您需要更多信息，请告诉我！

Answer 1

尝试用 IgnorePointer 小部件包裹顶部小部件。

  IgnorePointer(
    child: Hero(
      tag: month.name + 'shape',
      child: Container(
        height: _scaledWidth,
        width: _scaledWidth,
        child: PaintService.getShapeFromCollageOption(
            month.collageOption, _scaledWidth),
      ),
    ),
  )

Flutter 通过 Gesture Detection Details 来降低 Stack widgets

Flutter pass Gesture Detection Details to lower Stack widgets

stack

widget

gesturedetector

dart

flutter