继续Flutter系列博客的更新，google在昨天12月14日发布了Flutter的1.0(Stable)版本，不同于google挖的其他坑，Flutter自发布release版本号到第一个stable版本之间也才过了十个月，可见google对Flutter的定位绝不是一个实验性质的框架。
虽然有人说放版本号不要钱，但这最起码也说明了官方的态度，像Facebook的ReactNative，已经陆陆续续更新了三年，目前为止的最新版是0.57，仍旧没有发布1.0，加上其他因素已经有很多开发者放弃了使用ReactNative和相关开源库的维护。
Google在昨天放出的公告上还有更劲爆的消息，Flutter支持桌面应用开发和Web应用开发的框架将会陆续放出来，届时Flutter将真正成为跨APP/桌面/Web的跨平台UI框架，非常值得期待，相关链接放上(梯子自备)。
碎碎念有点多了，本篇记录如何使用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 {

  @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: [
              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 {
  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),
      ),
    );

本篇完

更多干货移步我的个人博客 https://www.nightfarmer.top/

Flutter之使用PageView实现图片预览视差效果

创建工程

使用PageView

给PageView加上特效

你可能感兴趣的:(Flutter之使用PageView实现图片预览视差效果)