Flutter 将手势检测细节传递给下层 Stack 小部件

问题描述

我有一个 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: 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,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,);


}

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

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

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

解决方法

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

<ion-content padding>
  <ion-grid>
    <form>
      <ion-row *ngIf="!showPassword">
        <ion-col><input type="password" [formControlName]="oldPassword" placeholder="Old Password"></ion-col>
      </ion-row>
      <ion-row *ngIf="showPassword">
        <ion-col><input type="text" [formControlName]="oldPasswordText" placeholder="Old Password"></ion-col>
      </ion-row>
      <ion-row *ngIf="!showPassword">
        <ion-col><input type="password" [formControlName]="newPassword" placeholder="Confirm new password"></ion-col>
      </ion-row>
      <ion-row *ngIf="showPassword">
        <ion-col><input type="text" [formControlName]="newPasswordText" placeholder="Confirm new password"></ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-button color="success" expand="block" (click)="update()">Update</ion-button>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-button color="success" expand="block" (click)="togglePassword()">View Password</ion-button>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-button color="success" expand="block" (click)="cancel()">Cancel</ion-button>
        </ion-col>
      </ion-row>
    </form>
  </ion-grid>
</ion-content>