Flutter 图片预览

404 阅读 0 评论 267 点赞

我是靠谱客的博主单薄狗，最近开发中收集的这篇文章主要介绍Flutter 图片预览，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

参考
参考
参考

class Example508 extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _ExampleState();
}
}
class _ExampleState extends State<Example508> {
/// 初始化控制器
PageController pageController;
//PageView当前显示页面索引
int currentPage = 0;
@override
void initState() {
super.initState();
//创建控制器的实例
pageController = new PageController(
//用来配置PageView中默认显示的页面 从0开始
initialPage: 0,//这个很关键
//为true是保持加载的每个页面的状态
keepPage: true,
);
///PageView设置滑动监听
pageController.addListener(() {
//PageView滑动的距离
double offset = pageController.offset;
//当前显示的页面的索引
double page = pageController.page;
print("pageView 滑动的距离 $offset
索引 $page");
});
}

Flutter之使用PageView实现图片预览视差效果
本篇记录如何使用PageView组件实现图片预览的视差效果，效果图如下：
效果图
创建工程
打开AndroidStudio，创建新的Flutter工程，调整main.dar文件，清理无用代码便于demo演示，清理后得到如下代码：
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
),
);
}
}
上面代码没什么可说的，继续。
使用PageView
在'_MyHomePageState'中加入一个PageView组件，并显示几张图片，通过修改build方法：
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container(
child: PageView(
children: <Widget>[
Image.network('https://ws1.sinaimg.cn/large/0065oQSqgy1fwgzx8n1syj30sg15h7ew.jpg'),
Image.network('https://ws1.sinaimg.cn/large/0065oQSqly1fw8wzdua6rj30sg0yc7gp.jpg'),
Image.network('https://ws1.sinaimg.cn/large/0065oQSqly1fw0vdlg6xcj30j60mzdk7.jpg'),
Image.network('https://ws1.sinaimg.cn/large/0065oQSqly1fuo54a6p0uj30sg0zdqnf.jpg'),
],
),
width: 200,
height: 200,
),
),
);
}
上面的PageView的基础用法，通过上面的代码，我们能得到一个可以左右翻页的图片预览组件。
接下来创建一个PageController来监听PageView的翻页回调，在_MyHomePageState类中创建PageController对象，在initState方法中添加监听，并在build方法中将创建的PageController对象指定给PageView组件。代码如下
class _MyHomePageState extends State<MyHomePage> {
var imgUrlList = [
'https://ws1.sinaimg.cn/large/0065oQSqgy1fwgzx8n1syj30sg15h7ew.jpg',
'https://ws1.sinaimg.cn/large/0065oQSqly1fw8wzdua6rj30sg0yc7gp.jpg',
'https://ws1.sinaimg.cn/large/0065oQSqly1fw0vdlg6xcj30j60mzdk7.jpg',
'https://ws1.sinaimg.cn/large/0065oQSqly1fuo54a6p0uj30sg0zdqnf.jpg'
];
PageController controller = new PageController();
@override
void initState() {
super.initState();
controller.addListener(() {
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container(
child: PageView(
controller: controller,
children: imgUrlList
.map((item) => buildPageItem(imgUrlList.indexOf(item), item))
.toList(),
),
width: 200,
height: 200,
),
),
);
}
Widget buildPageItem(int index, String imgUrl) {
return Image.network(imgUrl);
}
在上面的代码中，我额外的将PageView的Item抽到了一个单独的build方法中，一方面精简了代码，还可以根据情况灵活接入不同的数据，统一控制样式，这在实际开发中也是一个比较实用的技巧。
给PageView加上特效
以上都是PageView基础的使用，熟悉的可以直接从这里开始看，下面开始给PageView加特效。
这个特效本质上是给PageView的Item加的，对于PageView这个容易我们并没有任何额外处理。
基本的思路是：
1.监听PageView的滚动回调
2.计算PageView每帧滚动相对于PageView宽度的百分比
3.通知Item根据计算出的滚动百分比进行相应的偏移和缩放
通过上面代码能够看到我们把组件的宽高设为了200，这里只用到了宽度200，当然你也可以设置其他宽度。
首先完成1步和2步的思路，在controller的回调方法中获取PageView的offset，并计算百分比：
var pageOffset = 0.0;
@override
void initState() {
super.initState();
controller.addListener(() {
setState(() {
pageOffset = controller.offset / 200;
});
});
}
controller.offset获取到的是逻辑像素值，也就是0到200*(N-1)的数值，每翻一页，都会有从0到到200的增量，翻到最后一页就是600。把这个值除以宽度200，得到一个以每页宽度为单位的偏移百分比数值，并保存到_MyHomePageState的成员变量pageOffset中，以便渲染Item使用。
接下来进行Item的渲染，这也是实现特效最核心的过程。
要用的是Transform的translate和scale方法，也就是偏移和缩放效果。
将这两个效果嵌套到item的最外层渲染：
Widget buildPageItem(int index, String imgUrl) {
var currentLeftPageIndex = pageOffset.floor();
var currentPageOffsetPercent = pageOffset - currentLeftPageIndex;
return Transform.translate(
offset: Offset((pageOffset - index) * 200, 0),
child: Transform.scale(
scale: currentLeftPageIndex == index
? 1 - currentPageOffsetPercent
: currentPageOffsetPercent,
child: Image.network(imgUrl),
),
);
}
这样就实现了？
是的，核心代码就是这几行，乍一看可能有些懵圈，下面我来逐行解释一下。
pageOffset.floor()得到的currentLeftPageIndex是指当前翻页进度应该位于页面左侧的item的index，你可能会问页面左侧是什么意思，以普通的PageView为例，一次翻页过程，最多只能看到两页，假如默认是第0页，你在翻向第1页的过程中，第0页露了一半，第1页也露了一半，只有完全翻到第1也的时候第0也才会完全看不到。所以这里的currentLeftPageIndex就是指第0页到第1页时的第0页，第1页到第2页时的第1页，第2页到第3页时的第2页，以此类推。
pageOffset - currentLeftPageIndex
得到了变量
currentPageOffsetPercent
，将PageView的全局偏移值减去当前左侧页面的页码，得到的是当前左侧页面的偏移值，这个值的范围是0到1，也就是从第0页到第1页的翻动过程，这个变量会从0变到1，所有页面在翻动的过程这个值都是0到1。
解释了上面两个变量之后，下面的就容易理解了。
PageView翻页过程是Item是移动的，而要实现Item不移动，则需要给Item等值的负方向偏移，也就是使用Transform.translate嵌套并赋上横向偏移值(pageOffset - index) * 200。 缩放的话需要考虑两个情况，上面讲到翻页过程只会看两个Item，所以scale的值也需要根据
currentLeftPageIndex == index
来判断图片是如何缩放的，若
currentLeftPageIndex == index
则是在渲染左侧的Item，反之则是在渲染右侧的Item，然后用Transform.scale嵌套组件即可。
看到这里，你可能会有些疑问，buildPageItem不是渲染所以的Item吗？为什么你的逻辑上只考虑了左右两个Item，其他Item不会影响到布局吗？ 答案在这里：在Flutter的PageView组件中，偏移量外的Item是不进行渲染绘制的，也就是说在正常的PageView中，从第0页翻到第1页过程中，第2页和第3页并不会被绘制，这不是懒加载，因为你在第2页翻向第3页的过程中，第0页和第1页也不会被绘制，这和PageView的Item偏移后是否应该出现在页面上无关。所以上面的逻辑就解释得通了，我们在处理左右两个Item时根本就不用考虑其余的Item，因为PageView已经控制了他们不会出现在页面上。
关于偏移组件也可以使用
FractionalTranslation
来实现，它接收的参数是基于自身百分比的，效果一样：
FractionalTranslation(
translation: Offset(pageOffset - index, 0),
child: Transform.scale(
scale: currentLeftPageIndex == index
? 1 - currentPageOffsetPercent
: currentPageOffsetPercent,
child: Image.network(imgUrl),
),
);

我自己的代码

import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:multi_image_picker/multi_image_picker.dart';
import 'package:multi_image_picker/src/asset.dart';
import 'package:music/DynamicMessage.dart';
import 'package:music/Utils/AsperctRaioImage.dart';
import 'Dialog/PageViewDialog.dart';
import 'DialogRouter.dart';
//viewPage实现图片预览
class MyHomePage extends StatefulWidget {
List<Asset> image;
int index;
MyHomePage({Key key, this.image, this.index}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
//状态栏上显示的当前页码
int titleIndex = 1;
//上个界面传进来的index
int curIndex = 0;
PageController controller;
//取屏幕最大宽度和高度
final width = window.physicalSize.width;
final height = window.physicalSize.height;
@override
void initState() {
super.initState();
//上一个界面传点击的index进来
curIndex = widget.index;
setState(() {
//titleIndex是状态栏上显示的当前index
titleIndex=curIndex+1;
});
//initialPage设置显示首张照片的index
controller=new PageController(initialPage: curIndex);
}
deleteIndex(value) {
//是否删除弹窗返回true就是要删除的意思
if (value == "true") {
//如果删除最后一张，状态栏上的定位下标要减一，因为它不自动刷新
if(titleIndex==widget.image.length){
setState(() {
widget.image.removeAt(titleIndex - 1);
titleIndex=titleIndex-1;
});
//其他的可以自动刷新
}else if(titleIndex!=widget.image.length){
setState(() {
widget.image.removeAt(titleIndex - 1);
});
}
//如果删到最后一张就返回界面
if (widget.image.length == 0) {
Navigator.pop(context);
}
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Container(
margin: const EdgeInsets.only(left: 10.0),
width: 20,
child: Image.asset(
'assets/base_widgets/icon_register_back.png',
fit: BoxFit.fitWidth,
),
),
),
backgroundColor: const Color(0xFF222222),
centerTitle: true,
title: Text("${titleIndex}/${widget.image.length}"),
actions: [
GestureDetector(
onTap: () {
Navigator.push(context, DialogRouter(PageViewDialog(true)))
.then((value) => deleteIndex(value));
},
child: Center(
child: Container(
margin: EdgeInsets.only(right: 10),
padding: EdgeInsets.only(left: 5,right: 5,top: 5,bottom: 5),
child: Text(
"删除",
textAlign: TextAlign.center,
),
),
),
),
],
),
body: Center(
child: Container(
child: PageView(
//index为当前是第几个
onPageChanged: (index) {
setState(() {
titleIndex = index + 1;
});
},
controller: controller,
children: widget.image
.map((item) => buildPageItem(widget.image.indexOf(item), item))
.toList(),
),
width: width,
height: height,
),
),
);
}
Widget buildPageItem(int index, var imgUrl) {
return Container(
width: width,
height: height,
child: AssetThumb(
asset: widget.image[index],
width: width.toInt(),
height: height.toInt(),
),
);
}
}