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> {@overrideWidget 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) {},)

完毕

Flutter InteractiveViewer 支持平移和缩放子Widget相关推荐

flutter Transform 矩阵变换（平移旋转缩放）
Transform其子Widget绘制时外面包着矩阵变换(transformation),通过它可以实现各种矩阵操作. 1.widget平移效果图 2.旋转(rotate) 效果图: 3.缩放 Tr ...
android 缩放透明动画,Android旋转、平移、缩放和透明度渐变的补间动画
android实现旋转.平移.缩放和透明度渐变的补间动画,具体实现如下: 1.在新建项目的res目录中,创建一个名为anim的目录,并在该目录中创建实现旋转.平移.缩放和透明度渐变的动画资源文件. 透 ...
Flutter基础（四）开发Flutter应用前需要掌握的Basic Widget
本文首发于公众号「刘望舒」关联系列 ReactNative入门系列 React Native组件 Flutter基础系列前言学完了Dart语言,接下来就可以学习Widget了,Flutter的U ...
flutter listview 滚动到底部_Flutter常用Widget详解（三）
前言前面两篇文章给大家介绍了Widget中对应原生开发中的一些常用基础控件,Text.TextField.Button.Dialog.Picker等,本篇我们将和大家一起学习ListView.Gri ...
Flutter Web 支持现已进入稳定版
作者 / Mariam Hasnany, Product Manager, Flutter 我们对 Flutter 的愿景是成为一个可移植的 UI 框架,在全平台上构建精美的应用体验.做为 Flutt ...
openGL-设计交互平面图形(旋转、平移、缩放)
###综述最近在学习图形学的一些知识.现在做一个可交互的平面图形. 要求是: 1.三个不同的平面图形 2.可以通过鼠标"各自"进行指定的操作. 3.第二条中操作包括:旋转.平移. ...
opencv之图像翻转、平移、缩放、旋转、仿射学习笔记
opencv版本:opencv3.4.1 目录 1. 图像翻转(坐标映射) 2. 平移 3. 缩放 4. 旋转 1. 图像翻转(坐标映射) int main() {cv::Mat srcImage ...
Android中实现图片平移、缩放、旋转同步进行
转载请注明转自:noyet12的博客博客原址:http://blog.csdn.net/u012975705/article/details/49797911 源码下载地址: (github)htt ...
第三天--css3-3D平移、缩放、旋转
第三天–css3-3D平移.缩放.旋转 01-认识3D转换 3D特点: 近大远小物体后面遮挡不可见 x轴:水平向右,右正左负 y轴:垂直向下,下正上负 z轴:垂直屏幕,外正里负 02-3D平移-tr ...

Flutter InteractiveViewer 支持平移和缩放子Widget

1 InteractiveViewer 是什么？

2 基本使用

3 InteractiveViewer 属性详细说明

3.1 alignPanAxis

3.2 boundaryMargin

3.3 constrained 属性

3.4 InteractiveViewer 手势监听与回调

Flutter InteractiveViewer 支持平移和缩放子Widget相关推荐

最新文章

热门文章

Flutter InteractiveViewer 支持平移和缩放子Widget

1 InteractiveViewer 是什么 ？

2 基本使用

3 InteractiveViewer 属性详细说明

3.1 alignPanAxis

3.2 boundaryMargin

3.3 constrained 属性

3.4 InteractiveViewer 手势监听与回调

Flutter InteractiveViewer 支持平移和缩放子Widget相关推荐

最新文章

热门文章

1 InteractiveViewer 是什么？