Skip to content

Commit 60dfffd

Browse files
wanwusangzhiwanwusangzhi
committed
feat:增加pageview组件
1 parent fdcb5f1 commit 60dfffd

File tree

8 files changed

+347
-33
lines changed

8 files changed

+347
-33
lines changed

‎docs/widget/navigator/pageview/index.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
## **PageView**
2+
> 创建一个整屏滚动的滚动列表，逐页滚动
3+
4+
5+
### 构造函数
6+
```
7+
PageView({
8+
Key key,
9+
Axis scrollDirection: Axis.horizontal,
10+
bool reverse: false,
11+
PageController controller,
12+
ScrollPhysics physics,
13+
bool pageSnapping: true,
14+
ValueChanged<int> onPageChanged,
15+
List<Widget> children: const [],
16+
DragStartBehavior dragStartBehavior: DragStartBehavior.down
17+
})
18+
```
19+
20+
### 属性介绍
21+
- children：页面列表，每个子元素对应一个当前页。
22+
- scrollDirection: Axis.horizontal/Axis.vertical， 默认是水平方向，可选择垂直方向滚动
23+
- reverse: 滚动方向取反操作
24+
- controller: 操作页面滚动行为类，可以通过PageController实例后的对象进行指定页面跳转，可携带特效跳转等。PageController.jumpToPage(index)
25+
- physics: 滚动属性，可参考滚动类别中的gridview等相近属性介绍
26+
- pageSnapping: 默认true，切换时，自动逐页跳转。当自定义滚动行为时，可设置为false，禁止页面捕获。
27+
- onPageChanged: 页面切换时，回调函数，返回页面下标值

‎docs/widget/navigator/popupmenubutton/index.md

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,34 @@
1-
## **文档完善中**
1+
## **PopupMenuButton**
2+
3+
### 构造函数
4+
```
5+
PopupMenuButton<T>({
6+
Key key,
7+
@required PopupMenuItemBuilder<T> itemBuilder,
8+
T initialValue,
9+
PopupMenuItemSelected<T> onSelected,
10+
PopupMenuCanceled onCanceled,
11+
String tooltip,
12+
double elevation: 8.0,
13+
EdgeInsetsGeometry padding: const EdgeInsets.all(8.0),
14+
Widget child,
15+
Icon icon,
16+
Offset offset: Offset.zero
17+
})
18+
```
19+
20+
### 属性介绍
21+
- itemBuilder: (_) => { return [PopupMenuItem(), PopupMenuItem(),]}
22+
> PopupMenuItem: 菜单子组件
23+
```
24+
PopupMenuItem<T>({
25+
Key key,
26+
T value,
27+
bool enabled: true,
28+
double height: _kMenuItemHeight,
29+
@required Widget child
30+
})
31+
```
32+
- onSelected: 选中后返回PopupMenuItem中value的值
33+
- child: 有默认图标，可以修改为其它显示内容。
34+

‎lib/widget/navigator/bottomnavigationbar/demo_with_pageview.dart

Lines changed: 36 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,59 +6,64 @@ class Index extends StatefulWidget {
66
}
77

88
class _IndexState extends State<Index> {
9+
int _index = 0;
10+
PageController _pageController;
911
@override
1012
void initState() {
1113
super.initState();
14+
_pageController = PageController();
1215
}
1316

14-
int _index = 0;
1517
@override
1618
Widget build(BuildContext context) {
1719
return Scaffold(
1820
appBar: AppBar(
1921
title: Text('BottomNavigationBar'),
2022
),
2123
body: PageView(
22-
onPageChanged: (index) {
23-
setState(() {
24-
_index = index;
25-
});
26-
},
27-
children: [
28-
Center(
29-
child: Column(
30-
children: [
31-
Text('页面一'),
32-
Text('左右滑动切换页面哦~~~'),
33-
],
34-
),
24+
controller: _pageController,
25+
onPageChanged: (index) {
26+
setState(() {
27+
_index = index;
28+
});
29+
},
30+
children: [
31+
Center(
32+
child: Column(
33+
children: [
34+
Text('页面一'),
35+
Text('左右滑动切换页面哦~~~'),
36+
],
3537
),
36-
Center(
37-
child: Column(
38-
mainAxisAlignment: MainAxisAlignment.center,
39-
children: [
40-
Text('页面二'),
41-
Text('左右滑动切换页面哦~~~'),
42-
],
43-
),
38+
),
39+
Center(
40+
child: Column(
41+
mainAxisAlignment: MainAxisAlignment.center,
42+
children: [
43+
Text('页面二'),
44+
Text('左右滑动切换页面哦~~~'),
45+
],
4446
),
45-
Center(
46-
child: Column(
47-
mainAxisAlignment: MainAxisAlignment.end,
48-
children: [
49-
Text('页面三'),
50-
Text('左右滑动切换页面哦~~~'),
51-
],
52-
),
47+
),
48+
Center(
49+
child: Column(
50+
mainAxisAlignment: MainAxisAlignment.end,
51+
children: [
52+
Text('页面三'),
53+
Text('左右滑动切换页面哦~~~'),
54+
],
5355
),
54-
]),
56+
),
57+
],
58+
),
5559
bottomNavigationBar: BottomNavigationBar(
5660
currentIndex: _index,
5761
type: BottomNavigationBarType.shifting,
5862
onTap: (index) {
5963
setState(() {
6064
_index = index;
6165
});
66+
_pageController.jumpToPage(index);
6267
},
6368
fixedColor: Colors.red,
6469
iconSize: 28,

‎lib/widget/navigator/index.dart

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import 'drawer/index.dart' as drawer;
66
import 'floatingactionbutton/index.dart' as floatingactionbutton;
77
import 'materialapp/index.dart' as materialapp;
88
import 'navigator/index.dart' as navigator;
9+
import 'pageview/index.dart' as pageview;
910
import 'popupmenubutton/index.dart' as popupmenubutton;
1011
import 'tabbar/index.dart' as tabbar;
1112
import 'tabbarview/index.dart' as tabbarview;
@@ -69,6 +70,11 @@ List widgets = [
6970
code: 59484, // assessment
7071
title: navigator.Index.title,
7172
),
73+
ItemInfo(
74+
widget: pageview.Index(),
75+
code: 59488, // assessment
76+
title: pageview.Index.title,
77+
),
7278
];
7379

7480
List widgetMap = [

‎lib/widget/navigator/pageview/demo.dart

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
import 'package:flutter/material.dart';
2+
3+
class Index extends StatefulWidget {
4+
@override
5+
State<StatefulWidget> createState() => _IndexState();
6+
}
7+
8+
class _IndexState extends State<Index> {
9+
int _index = 0;
10+
bool _scrollDirection = true;
11+
bool _pageSnapping = true;
12+
13+
PageController _pageController;
14+
@override
15+
void initState() {
16+
super.initState();
17+
_pageController = PageController();
18+
}
19+
20+
String getScrollDirectionText () {
21+
return _scrollDirection ? '左右' : '上下';
22+
}
23+
24+
Axis getScrollDirection () {
25+
return _scrollDirection ? Axis.horizontal : Axis.vertical;
26+
}
27+
28+
@override
29+
Widget build(BuildContext context) {
30+
return Scaffold(
31+
appBar: AppBar(
32+
title: Text('PageView'),
33+
),
34+
body: PageView(
35+
pageSnapping: _pageSnapping, // 与滚动行为相关
36+
reverse: false, // 滚动反方向
37+
scrollDirection: getScrollDirection(),
38+
controller: _pageController,
39+
onPageChanged: (index) {
40+
setState(() {
41+
_index = index;
42+
});
43+
},
44+
children: [
45+
Center(
46+
child: Column(
47+
children: [
48+
Text('页面一'),
49+
Text('${getScrollDirectionText()}滑动切换页面哦~~~'),
50+
RaisedButton(
51+
child: Text('当前为${getScrollDirectionText()}滑动，可点击切换'),
52+
onPressed: () {
53+
setState(() {
54+
_scrollDirection = !_scrollDirection;
55+
});
56+
},
57+
),
58+
],
59+
),
60+
),
61+
Center(
62+
child: Column(
63+
mainAxisAlignment: MainAxisAlignment.center,
64+
children: [
65+
Text('页面二'),
66+
Text('${getScrollDirectionText()}滑动切换页面哦~~~'),
67+
RaisedButton(
68+
child: Text('当前为属性值pageSnapping为${_pageSnapping}，${_pageSnapping ? '滚动时，默认被捕获' : '由用户自行滚动'}，可点击切换'),
69+
onPressed: () {
70+
setState(() {
71+
_pageSnapping = !_pageSnapping;
72+
});
73+
},
74+
),
75+
],
76+
),
77+
),
78+
Center(
79+
child: Column(
80+
mainAxisAlignment: MainAxisAlignment.end,
81+
children: [
82+
Text('页面三'),
83+
Text('${getScrollDirectionText()}滑动切换页面哦~~~'),
84+
],
85+
),
86+
),
87+
],
88+
),
89+
bottomNavigationBar: BottomNavigationBar(
90+
currentIndex: _index,
91+
type: BottomNavigationBarType.shifting,
92+
onTap: (index) {
93+
setState(() {
94+
_index = index;
95+
});
96+
_pageController.jumpToPage(index);
97+
},
98+
fixedColor: Colors.red,
99+
iconSize: 28,
100+
items: [
101+
BottomNavigationBarItem(
102+
title: Text(
103+
'导航一',
104+
style: TextStyle(color: Colors.red),
105+
),
106+
icon: Icon(
107+
Icons.navigate_before,
108+
color: Colors.redAccent,
109+
),
110+
),
111+
BottomNavigationBarItem(
112+
title: Text(
113+
'导航二',
114+
style: TextStyle(color: Colors.red),
115+
),
116+
icon: Icon(
117+
Icons.notifications_active,
118+
color: Colors.redAccent,
119+
),
120+
),
121+
BottomNavigationBarItem(
122+
title: Text(
123+
'导航三',
124+
style: TextStyle(color: Colors.red),
125+
),
126+
icon: Icon(
127+
Icons.navigate_next,
128+
color: Colors.redAccent,
129+
),
130+
),
131+
],
132+
),
133+
);
134+
}
135+
}

‎lib/widget/navigator/pageview/index.dart

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:efox_flutter/components/widgetComp.dart' as WidgetComp;
3+
import 'demo.dart' as Demo;
4+
5+
class Index extends StatefulWidget {
6+
static String title = 'PageView';
7+
static String mdUrl = 'docs/widget/navigator/pageview/index.md';
8+
static String originCodeUrl = 'https://docs.flutter.io/flutter/widgets/PageView-class.html';
9+
10+
@override
11+
_IndexState createState() => new _IndexState();
12+
}
13+
14+
class _IndexState extends State<Index> {
15+
@override
16+
Widget build(BuildContext context) {
17+
return WidgetComp.Index(
18+
title: Index.title,
19+
originCodeUrl: Index.originCodeUrl,
20+
mdUrl: Index.mdUrl,
21+
demoChild: [
22+
Demo.Index(),
23+
],
24+
);
25+
}
26+
}

0 commit comments

Comments
 (0)