颤音：放大＆amp;放大堆栈中的图像

Question

我正在使用一堆图像，并且在另一个图像上具有透明的图像，该图像可作为框架。现在，我想缩小并缩小后面图像。

我正在使用InteractiveViewer，它仅适用于前图。我需要为背部图像做同样的事情。

这是一个例子。

我想缩放大象图像，这是我在堆栈中的第一个元素。 这是我的代码。

body: Container(
        padding: EdgeInsets.all(12.0),
        margin: EdgeInsets.fromLTRB(0, 0, 0, 60),
        child: Center(
            child: Column(children: [
          Expanded(
            flex: 10,
            child: RepaintBoundary(
              key: scr,
              child: ClipRect(
                clipBehavior: Clip.hardEdge,
                child: Stack(
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.only(
                          left: 67.5, right: 67, top: 9, bottom: 9),
                      child: Column(
                        children:  <Widget>[
                          pikedFile == null ? Container(
                          ):InteractiveViewer(
                                panEnabled: false, // Set it to false
                                boundaryMargin: EdgeInsets.all(100),
                                minScale: 0.5,
                                maxScale: 2,
                                child: Image(image: FileImage(pikedFile!)) // Back Image
                              ),
                        ],
                      ),
                    ),
                    Center(
                      child: Image(image: AssetImage(getResource())), //Front Image
                    ),
                  ],
                ),
              ),
            ),
          ),
          Expanded(
              flex: 3,
              child: Row(
                children: [
                  Expanded(
                    flex: 1,
                    child: TextButton.icon(
                      icon: const Icon(Icons.camera_alt), // Your icon here
                      label: const Text("Camera"), // Your text here
                      onPressed: () {
                        _openCamera();
                      },
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: TextButton.icon(
                      icon: const Icon(Icons.photo), // Your icon here
                      label: const Text("Gallery"), // Your text here
                      onPressed: () {
                        _openGallery();
                      },
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: TextButton.icon(
                      icon: const Icon(Icons.share_sharp), // Your icon here
                      label: const Text("Share"), // Your text here
                      onPressed: () {
                        _shareScreenShot();
                      },
                    ),
                  ),
                ],
              ))
        ])),
      ),

Answer 1

根据我的理解
您想与堆栈中的底部小部件进行交互，如果是这种情况，则忽略指针可以为您提供帮助。

只需将上面的小部件用像这样的忽略堆栈中的堆栈中。

Stack(
children:[
  Container(color:Colors.red) // this is where you want to interact and 
                            //this containerbottom of the stack.
  IgnorePointer(
          ignoring: true,
          Container(color:Colors.blue)// top container
   )
 ])

Answer 2

尝试用InteractiveViewer小部件将堆栈小部件包装。

 InteractiveViewer(
   child:Stack(), 
           )

Answer 3

除了使用 ignorepointer 忽略与图像的互动和底部帧将更好地显示在多个设备屏幕上（甚至在肖像和景观模式上）。您可以使用定位将2张图像放在顶级右上和左下。

查看 nofollow noreferrer“ 。

例如，使用下面的裁剪框架：

左上框架	底部右框架

结果是：

	Zoom-In	juarm	缩放
肖像		​/I.SSTATIC.NET/PIQKQ.JPG“ alt =“ formal Protait”>
景观			https://i.sstatic.net/trv0y.png“ rel =” nofollow noreferrer“>