Flutter InteractiveViewer 支持平移和缩放子Widget

在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天、每周,都会留下一些脚印,就是这些创作的内容,有一种执着,就是不知为什么,如果你迷茫,不妨来瞅瞅码农的轨迹。


1 InteractiveViewer 是什么 ?

InteractiveViewer 是Flutter 中一个可以将子Widget进行平移与缩放操作的 Widget,用户可以通过拖动进行平移或者双指捏放来放大来子元素。

2 基本使用

如对一个图片的双指捍合放大

void main() => runApp(MaterialApp(
      home: TestPage(),
    ));

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      ///填充布局
      body: Center(
        child: InteractiveViewer(
          alignPanAxis: false,
          //对子Widget 进行缩放平移
          child: Image.asset("assets/images/banner1.webp"),
        ),
      ),
    );
  }
}

3 InteractiveViewer 属性详细说明

  InteractiveViewer({
    Key? key,
    this.alignPanAxis = false,
    this.boundaryMargin = EdgeInsets.zero,
    this.constrained = true,
    // These default scale values were eyeballed as reasonable limits for common
    // use cases.
    this.maxScale = 2.5,
    this.minScale = 0.8,
    this.onInteractionEnd,
    this.onInteractionStart,
    this.onInteractionUpdate,
    this.panEnabled = true,
    this.scaleEnabled = true,
    this.transformationController,
    required this.child,
  })

maxScale属性用来设置最大缩放比例,minScale用来设置最小缩放比例。

3.1 alignPanAxis

默认为 false ,子Widget可以沿任意方向平移,如果设置为true,对角线平移是不允许的,也就是说只能沿一个方向平移,如果开始平移为水平方向则在本次手指抬起前只能是水平移动,竖直方向的移动同理。

3.2 boundaryMargin

平移边缘距离,默认为EdgeInsets.zero,四个边缘为0,如下图平移无边缘出现
在这里插入图片描述
当配置为 EdgeInsets.all(20) 时,效果如下图所示:

在这里插入图片描述

3.3 constrained 属性

用来设置 是否约束子 Widget ,默认为true,也就是 InteractiveViewer 的大小会强加给子Widget的大小约束,如果设置为 false ,则可理解为是 InteractiveViewer 包裹子Widget.

3.4 InteractiveViewer 手势监听与回调

InteractiveViewer(
   //对子Widget 进行缩放平移
   child: Image.asset("assets/images/banner1.webp"),
   //结束平移与缩放的回调
   onInteractionEnd: (ScaleEndDetails details) {},
   //开始平移与缩放的回调
   onInteractionStart: (ScaleStartDetails details) {},
   //平移或者是缩放过程中的回调
   onInteractionUpdate: (ScaleUpdateDetails details) {},
 )

完毕

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
已标记关键词 清除标记
<p> <span style="color:#333333;">Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的用户界面。本课程以理论+实例的方式带领大家学习动画的基础理论及各种动画特效的编写。</span> </p> <p> <span style="color:#333333;"><strong>本次课程包含以下内容:<br /> 动画基本概念</strong><br /> <span style="color:#333333;">动画的本质</span><br /> <span style="color:#333333;">帧与FPS</span><br /> <span style="color:#333333;">插值器/估值器</span><br /> <span style="color:#333333;">动画类型</span><br /> <br /> <strong>动画相关核心类</strong><br /> <span style="color:#333333;">Animation介绍</span><br /> <span style="color:#333333;">AnimationController动画管理类</span><br /> <span style="color:#333333;">CurvedAnimation非线性动画</span><br /> <span style="color:#333333;">Tween补间值生成类</span><br /> <br /> <strong>动画事件监听及控制流程</strong><br /> <span style="color:#333333;">Listeners和StatusListeners动画监听</span><br /> <span style="color:#333333;">动画控制流程</span><br /> <br /> <strong>动画示例</strong><br /> <span style="color:#333333;">字体放大动画</span><br /> <span style="color:#333333;">缓动动画</span><br /> <span style="color:#333333;">遮罩动画</span><br /> <span style="color:#333333;">数字变化动画</span><br /> <span style="color:#333333;">图表动画</span><br /> <span style="color:#333333;">AnimatedOpacity实现渐变效果</span><br /> <span style="color:#333333;">Hero实现页面切换动画</span><br /> </span> </p>
相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页