介绍
PageView是一页一页滚动的列表组件，类似于Android中的ViewPager
属性
// PageView构造函数
PageView({
Key? key,
this.scrollDirection = Axis.horizontal,
this.reverse = false,
PageController? controller,
this.physics,
this.pageSnapping = true,
this.onPageChanged,
List<Widget> children = const <Widget>[],
this.dragStartBehavior = DragStartBehavior.start,
this.allowImplicitScrolling = false,
this.restorationId,
this.clipBehavior = Clip.hardEdge,
this.scrollBehavior,
this.padEnds = true,
})
- scrollDirection = Axis.horizontal
滚动方向，水平或者垂直，默认垂直 - reverse
这个规定了children(子节点)的排序是否是倒序 - controller
滚动控制器，可以定位页面，获取当前页面等信息 - physics
滑动效果，不设置，会根据不同平台有不同的滚动效果
- NeverScrollableScrollPhysics 设置后，页面就不可滚动
- BouncingScrollPhysics 表示滚动到底了会有弹回的效果，就是iOS的默认交互
- ClampingScrollPhysics 表示滚动到底了就给一个效果，就是Android的默认交互
- FixedExtentScrollPhysics 就是iOS经典选择时间组件UIDatePicker那种交互
- pageSnapping
设置是否整页滚动 - onPageChanged
页面发生改变时的回调 - children
子页面组件列表 - dragStartBehavior
这个属性是设置认定开始拖动行为的方式，可以选择的是down和start两个，默认是start. down是第一个手指按下认定拖动开始，start是手指拖动才算开始。 - allowImplicitScrolling
这个属性一般提供给视障人士使用的，默认是fasle
示例
PageView一般使用方式如下：
- PageView()
这种方式没有实现Sliver模型，会把所有的子页面一次性全部初始化出来。
PageView(
scrollDirection: Axis.horizontal,
children: [
Container(
height: 300,
color: Colors.pink,
child: const Center(
child: Text("This is a page1"),
),
),
Container(
color: Colors.teal,
child: const Center(
child: Text("This is a page2"),
),
),
Container(
color: Colors.amber,
child: const Center(
child: Text("This is a page3"),
),
),
],
);
效果如下：
2 PageView.builder()
这个方式不会把所有的子组件一次性全部创建，是Sliver懒加载，推荐使用，会传一个itemCount和itemBuilder
PageView.builder(
scrollDirection: Axis.vertical,
itemCount: 3,
itemBuilder: (context, index) {
Color? color;
if (index == 0) {
color = Colors.pink;
} else if (index == 1) {
color = Colors.teal;
} else {
color = Colors.amber;
}
return Container(
color: color,
child: const Center(
child: Text("This is a page"),
),
);
},
);
效果如下：
- PageView.custom()
这种方式是需要一个SliverChildDelegate，来自定义子组件行为，属于比较进阶的用法，这里先不讲了。
