flutter图片预览_flutter好用的轮子推荐四-可定制的图片预览查看器photo
前言
Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。
IT界著名的尼古拉斯·高尔包曾说:轮子是IT进步的阶梯!热门的框架千篇一律,好用轮子万里挑一!Flutter作为这两年开始崛起的跨平台开发框架,其第三方生态相比其他成熟框架还略有不足,但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来,给大家提高搬砖效率,同时也希望flutter的生态越来越完善,轮子越来越多。
本系列文章准备了超过50个轮子推荐,工作原因,尽量每1-2天出一篇文章。
tip:本系列文章合适已有部分flutter基础的开发者,入门请戳:flutter官网
正文
轮子
轮子名称:photo_view
轮子概述:可定制的图片预览查看器:photo_view.
轮子作者:caraujo.me
推荐指数:★★★★★
常用指数:★★★★★
效果预览:
效果图
安装
dependencies:
photo_view: ^0.7.0
import 'package:photo_view/photo_view.dart';
使用
默认最简单的使用方式:
@override
Widget build(BuildContext context) {
return Container(
child: PhotoView(
imageProvider: AssetImage("assets/large-image.jpg"),
)
);
}
初步的效果是这样的:
image
可以放大查看,但这是一个已经打开预览界面的样子,日常使用我们需要从缩略图点击打开预览页面,就像上面效果图那样,所以我们需要自己写一个单独的预览界面,然后从缩略图点击打开。
单图片预览
单独写一个页面,作为图片预览的界面:
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
class PhotoViewSimpleScreen extends StateleeWidget{
const PhotoViewSimpleScreen({
this.imageProvider,//图片
this.loadingChild,//加载时的widget
this.backgroundDecoration,//背景修饰
this.minScale,//最大缩放倍数
this.maxScale,//最小缩放倍数
this.heroTag,//hero动画tagid
});
final ImageProvider imageProvider;
final Widget loadingChild;
final Decoration backgroundDecoration;
final dynamic minScale;
final dynamic maxScale;
final String heroTag;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
constraints: BoxConstraints.expand(
height: MediaQuery.of(context).size.height,
),
child: Stack(
children: [
Positioned(
top: 0,
left: 0,
bottom: 0,
right: 0,
child: PhotoView(
imageProvider: imageProvider,
loadingChild: loadingChild,
backgroundDecoration: backgroundDecoration,
minScale: minScale,
maxScale: maxScale,
heroAttributes: PhotoViewHeroAttributes(tag: heroTag),
enableRotation: true,
),
),
Positioned(//右上角关闭按钮
right: 10,
top: MediaQuery.of(context).padding.top,
child: IconButton(
icon: Icon(Icons.close,size: 30,color: Colors.white,),
onPressed: (){
Navigator.of(context).pop();
},
),
)
],
),
),
);
}
}
给你展示缩图的地方加上点击事件,打开写好的预览界面:
onTap: (){
Navigator.of(context).push(new FadeRoute(page: PhotoViewSimpleScreen(
imageProvider:NetworkImage(img),
heroTag: 'simple',
)));
},
效果如上面gif的第一个效果。
多图片预览
再单独写一个页面,作为多图片预览的界面:
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';
class PhotoViewGalleryScreen extends StatefulWidget {
List images=[];
int index=0;
String heroTag;
PageController controller;
PhotoViewGalleryScreen({Key key,@required this.images,this.index,this.controller,this.heroTag}) : super(key: key){
controller=PageController(initialPage: index);
}
@override
_PhotoViewGalleryScreenState createState() => _PhotoViewGalleryScreenState();
}
class _PhotoViewGalleryScreenState extends State {
int currentIndex=0;
@override
void initState() {
// TODO: implement initState
super.initState();
currentIndex=widget.index;
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Positioned(
top: 0,
left: 0,
bottom: 0,
right: 0,
child: Container(
child: PhotoViewGallery.builder(
scrollPhysics: const BouncingScrollPhysics(),
builder: (BuildContext context, int index) {
return PhotoViewGalleryPageOptions(
imageProvider: NetworkImage(widget.images[index]),
heroAttributes: widget.heroTag.isNotEmpty?PhotoViewHeroAttributes(tag: widget.heroTag):null,
);
},
itemCount: widget.images.length,
loadingChild: Container(),
backgroundDecoration: null,
pageController: widget.controller,
enableRotation: true,
onPageChanged: (index){
setState(() {
currentIndex=index;
});
},
)
),
),
Positioned(//图片index显示
top: MediaQuery.of(context).padding.top+15,
width: MediaQuery.of(context).size.width,
child: Center(
child: Text("${currentIndex+1}/${widget.images.length}",style: TextStyle(color: Colors.white,fontSize: 16)),
),
),
Positioned(//右上角关闭按钮
right: 10,
top: MediaQuery.of(context).padding.top,
child: IconButton(
icon: Icon(Icons.close,size: 30,color: Colors.white,),
onPressed: (){
Navigator.of(context).pop();
},
),
),
],
),
);
}
}
给你展示缩图的地方加上点击事件,打开写好的预览界面:
onTap: (){
//FadeRoute是自定义的切换过度动画(渐隐渐现) 如果不需要 可以使用默认的MaterialPageRoute
Navigator.of(context).push(new FadeRoute(page: PhotoViewGalleryScreen(
images:imgs,//传入图片list
index: index,//传入当前点击的图片的index
heroTag: img,//传入当前点击的图片的hero tag (可选)
)));
},
FadeRoute的源码:
class FadeRoute extends PageRouteBuilder {
final Widget page;
FadeRoute({this.page}): super(
pageBuilder: (
BuildContext context,
Animation animation,
Animation secondaryAnimation,
) =>page,transitionsBuilder: (
BuildContext context,
Animation animation,
Animation secondaryAnimation,
Widget child,
) =>FadeTransition(
opacity: animation,
child: child,
),
);
}
效果如上面gif的第二个效果。
从上面的代码可以看出,不管是单图还是多图预览,预览界面的布局都是完全自己定义的,虽然不是拿来即用,但是可定制度非常高,非常合适改造成自己的项目风格。
常用的参数
PhotoView(
imageProvider: imageProvider, //要显示的图片 AssetImage 或者 NetworkImage
loadingChild: loadingChild,//loading时显示的widget
backgroundDecoration: backgroundDecoration,//背景修饰
minScale: minScale,//最大缩放倍数
maxScale: maxScale,//最小缩放倍数
heroAttributes: PhotoViewHeroAttributes(tag: heroTag),//hero动画tag 不设置或null为不启用hero动画
enableRotation: true,//是否允许旋转
.....
)
结尾
flutter图片预览_flutter好用的轮子推荐四-可定制的图片预览查看器photo相关推荐
- flutter图片预览_flutter好用的轮子推荐四-可定制的图片预览查看器photo_view
前言 Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. IT界著名的尼古拉斯·高尔包曾说:轮子是IT进步的阶梯!热门的框架千篇一律,好用轮子万里挑一!F ...
- android shape 按钮背景_flutter好用的轮子推荐十三-flutter可展开选项的浮动按钮
前言 Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. IT界著名的尼古拉斯·高尔包曾说:轮子是IT进步的阶梯!热门的框架千篇一律,好用轮子万里挑一!F ...
- flutter 按钮_flutter好用的轮子推荐二-点赞按钮动画
前言 Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. IT界著名的尼古拉斯·高尔包曾说:轮子是IT进步的阶梯!热门的框架千篇一律,好用轮子万里挑一!F ...
- android 渐变圆形进度条_flutter好用的轮子推荐七-flutter圆形或线型进度条
前言 Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. IT界著名的尼古拉斯·高尔包曾说:轮子是IT进步的阶梯!热门的框架千篇一律,好用轮子万里挑一!F ...
- Element-ui中 使用图片查看器(el-image-viewer) 预览图片
1. 简介 注意:本文 Element-ui 版本 2.11.1及以上 Element-ui 官方文档中有大图预览相关组件 传送门:Element-ui 图片组件,但我们不想通过使用 Image 组件 ...
- flutter 九宫格菜单_flutter九宫格图片查看器
一个九宫格图片查看器 Screenshot_1542963454.png Screenshot_1542963645.png import 'package:cached_network_image/ ...
- 图片在线预览html,Viewer.js – 强大的JS/jQuery图片查看器
Viewer.js – 强大的JS/jQuery图片查看器 分类:代码 日期:2016-08-04 点击(282,284) 下载(1) 来源:未知 收藏 简介 Viewer.js 是一款强大的图片查看 ...
- 文件查看器示例支持 文件预览,编辑和视频播放
以下为文件查看器示例,支持 文件预览,和视频播放: import QtQuick 2.2 import QtQuick.Window 2.1 import QtQuick.Controls 1.2 i ...
- 《预训练周刊》第9期:TABBIE:表格数据的预训练表示、「视觉预训练神作」:不用图片却训出图像识别SOTA?...
No.09 智源社区 预训练组 预 训 练 研究 观点 资源 活动 关于周刊 超大规模预训练模型是当前人工智能领域研究的热点,为了帮助研究与工程人员了解这一领域的进展和资讯,智源社区整理了第9期< ...
最新文章
- SQL 注入真是防不胜防!
- (二)OpenStack---M版---双节点搭建---数据库安装和配置
- CSDN内容颜色、位置以及图片大小改变
- Servlet/jsp和Action/jsp传值
- 知乎上高赞的40个有趣回复,很精辟!
- .Net orm 开源项目 FreeSql 2.0.0
- c# 情感倾向_C否则-能力倾向问题与解答
- python实现Queue和Stack
- adb logcat 通过包名过滤日志并输出到txt文件
- 启动kafka报错:__consumer_offsets-22\00000000000000000000.index.swap: 另一个程序正在使用此文件,进程无法访问。
- 闲鱼:1月13日至1月19日冻结涉欺诈用户1.1万个
- RocketMQ源码学习(六)-Name Server
- OpenCV-图像处理(03、Mat对象)
- 如何卸载服务(Service)?
- 从零开始设计RISC-V处理器——指令系统
- java 资格证_程序员从业资格证
- 闯荡江湖的必备指南(2)
- 未知USB设备(设备描述符请求失败)终于解决。网上查到的所有方法我都试过了,全部失败。我的成功方法就是调整“电源选项”
- php java 私钥 转换格式,php公钥私钥 3 ---非标准格式转换为标准格式
- 5_02_GLib库入门与实践_日志和调试
热门文章
- C和指针之反转字符串
- Android之用adb命令快速获取手机IP方法总结
- Android之AsyncTask两种线程池分析和总结
- Android之调用js常见错误
- nginx 修改配置文件使之支持pathinfo,且隐藏index.php
- linux用户取消密码,[Linux]linux下取消用户名和密码直接登录
- 115怎么利用sha1下载东西_618“甩”度娘,拥抱115,体验和价格才是王道
- 中国大学mooc慕课python语言程序设计答案_中国大学MOOC(慕课)_Python语言程序设计基础_网课答案...
- python画方波_python实现周期方波信号频谱图
- 一人之力也能抬起一辆大型箱车?