1.概要
很多APP在初次启动时,都会有一个引导页,这个引导页一般是可以整屏左右或者上下滑动的切换的。由于我是iOS程序员,我知道,这样一个引导页,如果自己写,是相当花时间的。现在,如果使用Flutter,那么,引导页会非常的简单,同时其它类似的整屏滑动的页面也非常的简单。只需要使用PageView就可以了。
2.源码
PageView({
Key key,
// 滚动方向
this.scrollDirection = Axis.horizontal,
// 是否反转,即从最后一个开始
this.reverse = false,
// 控制器
PageController controller,
// 滚动方式:Bouncing阻尼效果 Clamping水波纹效果
this.physics,
// 是否有回弹效果
this.pageSnapping = true,
// 页面改变事件回调
this.onPageChanged,
// 具体内容
List<Widget> children = const <Widget>[],
// 设置触发滚动的行为
this.dragStartBehavior = DragStartBehavior.start,
// 允许像listview一样滚动,而不是单页滚动,默认false
this.allowImplicitScrolling = false,
// 恢复ID,如果设置了,将会保存当前偏移量,恢复状态时会恢复它
this.restorationId,
// 裁剪方式
this.clipBehavior = Clip.hardEdge,
})
PageView使用的时候,如果需要外部控制页面的滚动等行为,则需要传入一个控制器,当然,如果不需要外部控制,那么可以不传控制器。控制器源码:
PageController({
// 初始化页数
this.initialPage = 0,
// 当页面重构时,是否保持页面
this.keepPage = true,
// 每个页面占据视图的部分,默认1
this.viewportFraction = 1.0,
})
3.示例
class _MyHomeState extends State<MyHome> {
PageController _controller;
@override
void initState() {
super.initState();
_controller = PageController();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: PageView(
controller: _controller,
children: [
Container(
color: Colors.red,
),
Container(
color: Colors.blue,
),
Container(
color: Colors.green,
),
],
),
);
}
}
如果要手动用代码对PageView的滚动进行控制,使用_controller的对应方法即可,包括了:跳动某一页,下一页,上一页等操作。
网友评论