Flutter Stack中使用InteractiveViewer缩放底层图片失效问题

Stack组件的手势命中测试默认从最上层子组件开始匹配，你当前放在最上层的相框图片覆盖了整个交互区域，所有缩放手势都被上层图片拦截，无法传递到下层包裹待缩放图片的InteractiveViewer，因此底层图片无法响应缩放操作。

直接给上层相框组件套IgnorePointer即可，这个组件会跳过自身的手势命中测试，所有手势事件会直接透传到下层的可交互组件，且不会影响上层图片的显示效果，改动量最小。
注意：不要把整个Stack都放到InteractiveViewer内部，否则上层相框会跟随底层图片一起缩放，无法实现固定相框的效果。

修改后的核心代码片段：

Stack(
  children: <Widget>[
    Padding(
      padding: const EdgeInsets.only(
          left: 67.5, right: 67, top: 9, bottom: 9),
      child: pikedFile == null 
          ? Container()
          : InteractiveViewer(
              panEnabled: false,
              boundaryMargin: EdgeInsets.all(100),
              minScale: 0.5,
              maxScale: 2,
              child: Image(image: FileImage(pikedFile!)) // 底层待缩放图片
            ),
    ),
    // 上层相框增加手势透传
    IgnorePointer(
      child: Center(
        child: Image(image: AssetImage(getResource())), // 上层透明相框
      ),
    ),
  ],
)

你原代码中Padding内部嵌套的单层Column属于冗余组件，可以直接删除，不会影响布局效果。

如果后续需要给相框增加单独的点击交互（比如点击切换相框样式），可以按需调整事件拦截逻辑，当前固定相框+底层缩放的需求直接用上述代码即可满足。

内容的提问来源于stack exchange，提问作者user12711663