如何解决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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。