这个组件经常用到,而我在项目中用到最典型的是结合bottomNavigationBar 实现iOS的TabbarController的功能。
这篇文章我仅仅做一下pageview功能的简单实现,代码如下:
Container(
height: 200,
child: PageView(
children: <Widget>[
Container(
color: Colors.red,
),
Container(
color: Colors.blue
)
],
),
)
效果如下:
page_view.gif
PageView的属性还有scrollDirection、reverse、controller、physics、pageSnapping、dragStartBehavior和allowImplicitScrolling。
scrollDirection主要是滚动的方向即horizontal(水平)和vertical(垂直)两个,默认是horizontal的
reverse这个就是规定了children(子节点)的排序是否是倒序,默认false。这个参数在ListView也有,一般在做IM工具聊天内容用ListView展示时需要倒序展示的。
controller可以传入一个PageController的实例进去,可以更好的控制PageView的各种动作,可以设置:
- 初始页面(initialPage)、
- 是否保存PageView状态(keepPage)
- 每一个PageView子节点的内容占改视图的比例(viewportFraction)
- 直接调转到指定的PageView的子节点的方法(jumpToPage
- 动画(平滑移动)到指定的PageView的子节点的方法(animateToPage)
- 到下一个PageView的子节点的方法(nextPage)
- 到上一个PageView的子节点的方法(previousPage)
从以上可以看出基本是普通轮播图组件的API
physics就是设置滑动效果:
- NeverScrollablePhysics表示设置的不可滚动
- BouncingScrollPhysics表示滚动到底了会有弹回的效果,就是iOS的默认交互
- ClampingScrollPhysics表示滚动到底了就给一个效果,就是Android的默认交互
- FixedExtentScrollPhysics就是ios经典选择时间组件UIDatePicker那种交互。
pageSnapping就是设置是不是整页滚动,默认是true.
dragStartBehavior这个属性是设置认定开始拖动行为的方式,可以选择的是down和start两个,默认是start. down是第一个手指按下认定拖动开始,start是手指拖动才算开始。
allowImplicitScrolling这个属性一般提供给视障人士使用的,默认是fasle
这个系列的文章是根据flutter 的 Widget of the week来做的,欢迎大家斧正。