Flutter：如何使下面的图像小部件在 Stack 中发挥作用

Question

我尝试实现功能：双指缩放 in/out 一张图片在另一张叠加图片下。

我的方法是使用 photo_view 使主照片可缩放，并通过“堆栈”将叠加图像放在主照片的顶部。

import 'package:photo_view/photo_view.dart';

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: <Widget>[
          Container(
            child: PhotoView(
              initialScale: PhotoViewComputedScale.covered,
              imageProvider: AssetImage("assets/mainphoto.jpg"),
              ),
            ),
          ),
          Container(
            child: Center(
              child: AssetImage("assets/overlay.png”),
            ),
          ),
        ],
      ),
    );
  }
}

以上代码的结果

但是叠加图像完全禁用了主照片，我无法缩放 in/out 主照片。

我认为是 Stack 的问题，我用 google 搜索了它，但仍然没有任何合适的解决方案。

如果有任何建议，我将不胜感激。

Answer 1

使用IgnorePointer小部件

IgnorePointer(
  child: Container(
    child: Center(
      child: Image.asset(
        "assets/overlay.png",
      ),
    ),
  ),
)

Flutter：如何使下面的图像小部件在 Stack 中发挥作用

Flutter: How to make the below image widget functional in Stack

flutter

dart

zooming

overlay

photoviewer