一知态、PageView的介紹
PageView：滑動視圖列表巢价，類型Android的ViewPage控件牲阁，不過PageView支持上下滑動，可制作輪播圖壤躲。
二城菊、PageView，PageController的源碼
2.1碉克、PageView源碼
PageView({
Key? key,
this.scrollDirection = Axis.horizontal,//滑動方向
this.reverse = false,//是否反轉(zhuǎn)凌唬，true 從最后一個記0
PageController? controller,//控制初始化
this.physics,//滾動方式
this.pageSnapping = true,//是否有回彈效果
this.onPageChanged,//監(jiān)聽切換
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 的狀態(tài)漏麦，如果保存客税，下次回復(fù)對應(yīng)保存的 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 | 是否反轉(zhuǎn) true從最后一個記0 |
| controller | PageController見下文 |
| physics | 滾動方式 |
| pageSnapping | 是否有回彈效果 |
| onPageChanged | 監(jiān)聽切換 |
| children | 子組件 |
| dragStartBehavior | 處理拖拽開始行為方式 |
3.2、PageController的屬性說明
| 屬性 | 說明 | |
|---|---|---|
| initialPage | 初始化第一次默認在第幾個 | |
| keepPage | 是否保存當前 Page 的狀態(tài) true下次回復(fù)對應(yīng)保存的 page号涯，initialPage被忽略 false總是從 initialPage 開始 |
|
| viewportFraction | 占屏幕多少熬北，1為占滿整個屏幕 |
四、PageView的demo
4.1诚隙、PageView的簡單使用
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("PageView學(xué)習"),
),
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
