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