前言

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。

IT界著名的尼古拉斯·高尔包曾说：轮子是IT进步的阶梯！热门的框架千篇一律，好用轮子万里挑一！Flutter作为这两年开始崛起的跨平台开发框架，其第三方生态相比其他成熟框架还略有不足，但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来，给大家提高搬砖效率，同时也希望flutter的生态越来越完善，轮子越来越多。

本系列文章准备了超过50个轮子推荐，工作原因，尽量每1-2天出一篇文章。

tip:本系列文章合适已有部分flutter基础的开发者，入门请戳：flutter官网

正文

轮子

• 轮子名称：photo_view
• 轮子概述：可定制的图片预览查看器:photo_view.
• 轮子作者：http://caraujo.me
• 推荐指数：★★★★★
• 常用指数：★★★★★
• 效果预览：

安装

dependencies

使用

默认最简单的使用方式：

@

初步的效果是这样的：

可以放大查看，但这是一个已经打开预览界面的样子，日常使用我们需要从缩略图点击打开预览页面，就像上面效果图那样，所以我们需要自己写一个单独的预览界面，然后从缩略图点击打开。

单图片预览

单独写一个页面，作为图片预览的界面：

import 

给你展示缩图的地方加上点击事件，打开写好的预览界面：

onTap: 

效果如上面gif的第一个效果。

多图片预览

再单独写一个页面，作为多图片预览的界面：

import 

给你展示缩图的地方加上点击事件，打开写好的预览界面：

onTap: 

FadeRoute的源码：

class 

效果如上面gif的第二个效果。

从上面的代码可以看出，不管是单图还是多图预览，预览界面的布局都是完全自己定义的，虽然不是拿来即用，但是可定制度非常高，非常合适改造成自己的项目风格。

常用的参数

PhotoView

查看所有的参数：https://pub.flutter-io.cn/documentation/photo_view/latest/photo_view/PhotoView-class.html

结尾

• 轮子仓库地址：https://pub.flutter-io.cn/packages/photo_view
• 系列演示demo源码：https://github.com/826327700/flutter_plugins_demo