Flutter中Stack布局仅对主图应用InteractiveViewer实现缩放拖动的问题求助

解决方案 #

给上层的相框容器包裹IgnorePointer组件即可解决事件拦截问题，该组件会让上层元素忽略所有触摸交互，事件将直接透传给下层的InteractiveViewer，不会影响相框的正常展示效果。

修改后代码如下：

Stack(
  alignment: Alignment.center,
  children:<Widget>[
    InteractiveViewer(
      maxScale: 3.5,
      minScale: 0.1,
      boundaryMargin: EdgeInsets.all(100),
      child: Container(
        padding: EdgeInsets.only(top: 10, bottom: 10),
        alignment: Alignment.center,
        child: Image.asset("assets/images/1.png")
      )
    ),
    // 用IgnorePointer包裹相框容器，使其不拦截触摸事件
    IgnorePointer(
      ignoring: true,
      child: Container(
        height: double.infinity,
        width: double.infinity,
        child: Image.asset("assets/images/frame.png",
            fit: BoxFit.fitHeight, color: frameColor(category)),
      ),
    ),
  ],
);

原理解释 #

• Stack布局中后声明的子元素渲染层级更高，默认会消费落在自身区域内的所有触摸事件，因此原本上层的相框会拦截所有缩放、拖动手势，导致下层的InteractiveViewer无法响应。
• IgnorePointer的ignored属性设为true时，该组件不会参与任何手势命中判断，既不响应触摸事件，也不会拦截事件向底层传递，完全适配仅将相框作为视觉层、不参与交互的场景。

注意事项 #

如果后续需要给相框添加点击等交互能力，可改用GestureDetector的hitTestBehavior属性自定义手势命中规则，无需再使用IgnorePointer。

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