一、PageView的介绍
PageView：滑动视图列表，类型Android的ViewPage控件，不过PageView支持上下滑动，可制作轮播图。
二、PageView，PageController的源码
2.1、PageView源码
PageView({
Key? key,
this.scrollDirection = Axis.horizontal,//滑动方向
this.reverse = false,//是否反转，true 从最后一个记0
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,
}) : assert(allowImplicitScrolling != null),
assert(clipBehavior != null),
controller = controller ?? _defaultPageController,
childrenDelegate = SliverChildListDelegate(children),
super(key: key);
2.2、PageController的源码
PageController({
this.initialPage = 0,//初始化第一次默认在第几个
this.keepPage = true,//是否保存当前 Page 的状态，如果保存，下次回复对应保存的 page，initialPage被忽略，如果为 false 。下次总是从 initialPage 开始
this.viewportFraction = 1.0,//占屏幕多少，1为占满整个屏幕
}) : assert(initialPage != null),
assert(keepPage != null),
assert(viewportFraction != null),
assert(viewportFraction > 0.0);
三、PageView的属性说明
3.1、PageView的属性说明
| 属性 | 说明 |
|---|---|
| scrollDirection | 滑动反向 Axis.vertical上下滑动 Axis.horizontal左右滑动 |
| reverse | 是否反转 true从最后一个记0 |
| controller | PageController见下文 |
| physics | 滚动方式 |
| pageSnapping | 是否有回弹效果 |
| onPageChanged | 监听切换 |
| children | 子组件 |
| dragStartBehavior | 处理拖拽开始行为方式 |
3.2、PageController的属性说明
| 属性 | 说明 | |
|---|---|---|
| initialPage | 初始化第一次默认在第几个 | |
| keepPage | 是否保存当前 Page 的状态 true下次回复对应保存的 page，initialPage被忽略 false总是从 initialPage 开始 |
|
| viewportFraction | 占屏幕多少，1为占满整个屏幕 |
四、PageView的demo
4.1、PageView的简单使用
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("PageView学习"),
),
body: Center(
child: PageView(
scrollDirection: Axis.horizontal,
reverse: false,
controller: PageController(
initialPage: 1,
keepPage: false,
viewportFraction: 0.8
),
children: [
Container(
color: Colors.red,
child: Text("我是页面0"),
),
Container(
color: Colors.blue,
child: Text("我是页面1"),
),
Container(
color: Colors.green,
child: Text("我是页面2")
)
],
),
),
),
);
7276bc59a958f21769ed76defed1580.png
4.2、
PageView添加指示器及无限滚动
class _ViewPagerStudyState extends State<ViewPagerStudy> {
List<Widget> pageList = [
Page(name: "我是页面A", mColor: Colors.red),
Page(name: "我是页面B", mColor: Colors.blue),
Page(name: "我是页面C", mColor: Colors.green)
];
int _nowIndex = 0;
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("PageView无限滚动"),
),
body: Stack(
alignment: Alignment.bottomCenter,
children: [
PageView.builder(
onPageChanged: (int index) {
setState(() {
_nowIndex = index % pageList.length;
});
},
itemCount: 1000,
itemBuilder: (context, index) {
return pageList[index % pageList.length];
}),
//指示器
Positioned(
bottom: 10,
child: Row(
children: List.generate(pageList.length, (index) {
return Container(
margin: EdgeInsets.all(10),
width: 10,
height: 10,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: _nowIndex == index
? Colors.amberAccent
: Colors.white),
);
}).toList()),
),
],
)),
);
}
}
class Page extends StatelessWidget {
String name;
Color mColor;
Page({Key key, this.name, this.mColor}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: mColor,
child: Text(
"${this.name}",
style: TextStyle(color: Colors.white),
),
);
}
}
892c5266fe52c9548a752904dbcef45.png
