flutter图片预览_Flutter 108: 图解 PageView 滑动页面预览小尝试

PageView 滑动页面预览应用在很多场景中，小菜之前只用过最基本的用法，今天小菜尝试系统性的学习一下 PageView 的基本应用；

PageView 一般用户少量需要滑动页面切换的场景，但整体使用很灵活，常用作切换 Tab 页或活动 Banner 等；

源码分析

PageView({

Key key,

this.scrollDirection = Axis.horizontal, // 页面滑动方向(水平/竖直)

this.reverse = false, // 是否反向滑动

PageController controller, // 页面控制器

this.physics, // 滑动到首页和末页动画效果

this.pageSnapping = true, // 是否整页滑动

this.onPageChanged, // 页面监听滑动回调

List children = const [], // Page 页面展示子 Widget

this.dragStartBehavior = DragStartBehavior.start,

})

PageView.builder({

Key key,

this.scrollDirection = Axis.horizontal,

...

this.dragStartBehavior = DragStartBehavior.start,

})

PageView.custom({

Key key,

this.scrollDirection = Axis.horizontal,

...

this.dragStartBehavior = DragStartBehavior.start,

})

分析源码可得，PageView 是一个有状态的 StatefulWidget 小部件，主要通过 PageController 和 onPageChanged 控制滑动与数据监听，并且提供了两种命名构造方法，小菜逐个学习属性特性；

案例尝试

默认构造函数

1. PageView()

小菜首先使用默认构造函数生成一个基本的 PageView；

return Container( height: 240,

child: PageView(children: [

_itemCard(0), _itemCard(1), _itemCard(2), _itemCard(3)

]));

2. scrollDirection

scrollDirection 主要用于 PageView 滑动方向，分别为 Axis.horizontal 水平方向和 Axis.vertical 竖直方向；

return Container( height: 240,

child: PageView(scrollDirection: Axis.horizontal, children: [

_itemCard(0), _itemCard(1), _itemCard(2), _itemCard(3)

]));

3. pageSnapping

pageSnapping 用于是否禁止页面捕捉，小菜理解为 Page 页面是否