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");
    });
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

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),
      ),
    );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193

我自己的代码

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(),
      ),
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144