Flutter 滑动、缩放控件

Flutter有封装好的缩放和滑动控件，我们只要学会去使用就好了

class InteractiveViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: 400,
        width: 300,
        alignment: Alignment.center,
        color: Colors.red.withAlpha(33),
        child: InteractiveViewer(
          ///只能沿着坐标轴滑动，就是横着或者竖着滑动
          alignPanAxis: false,

          ///是否能够用手指滑动
          panEnabled: true,

          ///子控件可以移动的范围
          boundaryMargin: EdgeInsets.all(400),

          ///是否开启缩放
          scaleEnabled: true,

          ///放大系数
          maxScale: 2.5,

          ///缩小系数
          minScale: 0.3,

          ///是否约束
          constrained: false,
      onInteractionStart: (details){
              print("onInteractionStart----"+details.toString());
            },
            onInteractionEnd: (details){
              print("onInteractionEnd----"+details.toString());
            },
            onInteractionUpdate: (details){
              print("onInteractionUpdate----"+details.toString());
            },
          child: Container(
            child: Image.network(
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201306%2F02%2F20130602095625_ZM3vr.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640313340&t=6a29cf9a1944f755e308ee02c769b62e"),
          ),
        ),
      ),
    );
  }
}

对应的交互回调

onInteractionEnd 交互结束
onInteractionStart 交互开始
onInteractionUpdate 滑动时候一直会回调

回调的对象ScaleUpdateDetails

focalPoint 是相对于屏幕左上角的偏移量。
localFocalPoint是相对于父容器区域左上角的偏移量。
scale缩放量。
horizontalScale水平缩放量。
verticalScale竖直缩放量。
rotation旋转量。------ 这里说明能监听到旋转量

还可以通过transformationController进行变换控制，有兴趣的可以自己研究。

参考文章 https://juejin.cn/post/6859185139402932238