Flutter技术剖析（Flutter技术）
764
2022-05-30
【Flutter】侧拉导航栏实现 ( Drawer 组件 | PageView 组件 )
文章目录
一、Drawer 组件
二、PageView 组件
三、完整代码示例
四、相关资源
一、Drawer 组件
Scaffold 组件中的 drawer 参数 , 就是设置侧拉导航栏菜单的 , 为其赋值一个 Drawer 组件 ;
Drawer 组件就是侧拉菜单 , 该组件的 child 设置一个 ListView 组件 , 在列表中设置 DrawerHeader , ListTile 等子组件 ;
class Drawer extends StatelessWidget { const Drawer({ Key? key, this.elevation = 16.0, this.child, this.semanticLabel, }) : assert(elevation != null && elevation >= 0.0), super(key: key); }
1
2
3
4
5
6
7
8
9
侧拉菜单示例 :
drawer: Drawer( child: ListView( children: datas.map((TabData data) { /// 单个按钮条目 return ListTile( title: Text(data.title), /// 点击事件 onTap: () { /// 跳转到对应的导航页面 _pageController.jumpToPage(data.index); _currentIndex = data.index; /// 关闭侧拉菜单 Navigator.pop(context); }, ); }).toList(), ), ),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
二、PageView 组件
PageView 组件最重要的两个字段 :
PageController? controller
List
PageController 用于控制 PageView 的跳转 , PageController 主要作用是调用 void jumpToPage(int page) 方法 , 进行页面跳转 ;
jumpToPage 页面跳转在底部菜单栏的 onTap 点击事件中调用 , 更新当前页面后 , 需要调用 setState 方法更新界面 ;
PageView 构造函数 :
PageView({ Key? key, this.scrollDirection = Axis.horizontal, // 设置滚动方向 垂直 / 水平 this.reverse = false, // 反向滚动 PageController? controller, // 滚动控制类 this.physics, // 滚动逻辑 , 不滚动 / 滚动 / 滚动到边缘是否反弹 this.pageSnapping = true, // 如果设置 false , 则无法进行页面手势捕捉 this.onPageChanged, // 页面切换时回调该函数 List
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
PageView 代码示例 :
/// 滑动组件 , 界面的核心元素 PageView( /// 控制跳转翻页的控制器 controller: _pageController, /// Widget 组件数组 , 设置多个 Widget 组件 children: datas.map((TabData data) { return Padding( /// 内边距 20 padding: const EdgeInsets.all(20.0), /// PageView 中单个显示的组件 child: TabContent(data: data), ); }).toList(), physics: NeverScrollableScrollPhysics(), ),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
三、完整代码示例
完整代码示例 :
import 'package:flutter/material.dart'; /// 侧拉导航栏示例 void main() { runApp( DrawerWidget() ); } class DrawerWidget extends StatefulWidget { @override _DrawerWidgetState createState() => _DrawerWidgetState(); } class _DrawerWidgetState extends State
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
运行效果展示 :
四、相关资源
参考资料 :
flutter 官网 : https://flutter.dev/
Flutter 插件下载地址 : https://pub.dev/packages
Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
官方 GitHub 地址 : https://github.com/flutter
Flutter 中文社区 : https://flutter.cn/
Flutter 实用教程 : https://flutter.cn/docs/cookbook
Flutter CodeLab : https://codelabs.flutter-io.cn/
Dart 中文文档 : https://dart.cn/
Dart 开发者官网 : https://api.dart.dev/
Flutter 中文网 : https://flutterchina.club/ , http://flutter.axuer.com/docs/
Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )
GitHub 上的 Flutter 开源示例 : https://download.csdn.net/download/han1202012/15989510
Flutter 实战电子书 : https://book.flutterchina.club/chapter1/
重要的专题 :
Flutter 动画参考文档 : https://flutterchina.club/animations/
博客源码下载 :
GitHub 地址 : https://github.com/han1202012/flutter_frame ( 随博客进度一直更新 , 有可能没有本博客的源码 )
博客源码快照 : https://download.csdn.net/download/han1202012/16277725 ( 本篇博客的源码快照 , 可以找到本博客的源码 )
Flutter GitHub
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
推荐文章
最近发表
