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

继续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<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的translatescale方法,也就是偏移和缩放效果。

将这两个效果嵌套到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),
      ),
    );

本篇完

文章目录
,