【Flutter】側(cè)拉導(dǎo)航欄實(shí)現(xiàn) ( Drawer 組件 | PageView 組件 )

文章目錄

一、Drawer 組件

二、PageView 組件

三、完整代碼示例

四、相關(guān)資源

一、Drawer 組件

Scaffold 組件中的 drawer 參數(shù) , 就是設(shè)置側(cè)拉導(dǎo)航欄菜單的 , 為其賦值一個(gè) Drawer 組件 ;

Drawer 組件就是側(cè)拉菜單 , 該組件的 child 設(shè)置一個(gè) ListView 組件 , 在列表中設(shè)置 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

側(cè)拉菜單示例 :

drawer: Drawer( child: ListView( children: datas.map((TabData data) { /// 單個(gè)按鈕條目 return ListTile( title: Text(data.title), /// 點(diǎn)擊事件 onTap: () { /// 跳轉(zhuǎn)到對(duì)應(yīng)的導(dǎo)航頁(yè)面 _pageController.jumpToPage(data.index); _currentIndex = data.index; /// 關(guān)閉側(cè)拉菜單 Navigator.pop(context); }, ); }).toList(), ), ),

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

二、PageView 組件

PageView 組件最重要的兩個(gè)字段 :

PageController? controller

List children

PageController 用于控制 PageView 的跳轉(zhuǎn) , PageController 主要作用是調(diào)用 void jumpToPage(int page) 方法 , 進(jìn)行頁(yè)面跳轉(zhuǎn) ;

jumpToPage 頁(yè)面跳轉(zhuǎn)在底部菜單欄的 onTap 點(diǎn)擊事件中調(diào)用 , 更新當(dāng)前頁(yè)面后 , 需要調(diào)用 setState 方法更新界面 ;

PageView 構(gòu)造函數(shù) :

PageView({ Key? key, this.scrollDirection = Axis.horizontal, // 設(shè)置滾動(dòng)方向 垂直 / 水平 this.reverse = false, // 反向滾動(dòng) PageController? controller, // 滾動(dòng)控制類 this.physics, // 滾動(dòng)邏輯 , 不滾動(dòng) / 滾動(dòng) / 滾動(dòng)到邊緣是否反彈 this.pageSnapping = true, // 如果設(shè)置 false , 則無(wú)法進(jìn)行頁(yè)面手勢(shì)捕捉 this.onPageChanged, // 頁(yè)面切換時(shí)回調(diào)該函數(shù) List children = const [], 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);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

PageView 代碼示例 :

/// 滑動(dòng)組件 , 界面的核心元素 PageView( /// 控制跳轉(zhuǎn)翻頁(yè)的控制器 controller: _pageController, /// Widget 組件數(shù)組 , 設(shè)置多個(gè) Widget 組件 children: datas.map((TabData data) { return Padding( /// 內(nèi)邊距 20 padding: const EdgeInsets.all(20.0), /// PageView 中單個(gè)顯示的組件 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'; /// 側(cè)拉導(dǎo)航欄示例 void main() { runApp( DrawerWidget() ); } class DrawerWidget extends StatefulWidget { @override _DrawerWidgetState createState() => _DrawerWidgetState(); } class _DrawerWidgetState extends State with SingleTickerProviderStateMixin { /// 當(dāng)前的索引值 int _currentIndex = 0; /// PageView 控制器 , 用于控制 PageView var _pageController = PageController( /// 初始索引值 initialPage: 0, ); @override void dispose() { super.dispose(); /// 銷毀 PageView 控制器 _pageController.dispose(); } @override Widget build(BuildContext context) { /// 根組件 return MaterialApp( home: Scaffold( /// 滑動(dòng)組件 , 界面的核心元素 body: PageView( /// 控制跳轉(zhuǎn)翻頁(yè)的控制器 controller: _pageController, /// Widget 組件數(shù)組 , 設(shè)置多個(gè) Widget 組件 children: datas.map((TabData data) { return Padding( /// 內(nèi)邊距 20 padding: const EdgeInsets.all(20.0), /// PageView 中單個(gè)顯示的組件 child: TabContent(data: data), ); }).toList(), physics: NeverScrollableScrollPhysics(), ), drawer: Drawer( child: ListView( children: datas.map((TabData data) { /// 單個(gè)按鈕條目 return ListTile( title: Text(data.title), /// 點(diǎn)擊事件 onTap: () { /// 跳轉(zhuǎn)到對(duì)應(yīng)的導(dǎo)航頁(yè)面 _pageController.jumpToPage(data.index); _currentIndex = data.index; /// 關(guān)閉側(cè)拉菜單 Navigator.pop(context); }, ); }).toList(), ), ), ), ); } } /// 封裝導(dǎo)航欄的圖標(biāo)與文本數(shù)據(jù) class TabData { /// 導(dǎo)航數(shù)據(jù)構(gòu)造函數(shù) const TabData({this.index, this.title, this.icon}); /// 導(dǎo)航標(biāo)題 final String title; /// 導(dǎo)航圖標(biāo) final IconData icon; /// 索引 final int index; } /// 導(dǎo)航欄數(shù)據(jù)集合 const List datas = const [ const TabData(index: 0, title: '3D', icon: Icons.threed_rotation), const TabData(index: 1, title: '打印機(jī)', icon: Icons.print), const TabData(index: 2, title: '動(dòng)畫(huà)', icon: Icons.animation), const TabData(index: 3, title: '變換', icon: Icons.transform), const TabData(index: 4, title: '高度', icon: Icons.height), const TabData(index: 5, title: '描述', icon: Icons.description), const TabData(index: 6, title: '向前', icon: Icons.forward), const TabData(index: 7, title: '相機(jī)', icon: Icons.camera), const TabData(index: 8, title: '設(shè)置', icon: Icons.settings), const TabData(index: 9, title: '學(xué)位', icon: Icons.school), ]; /// 通過(guò) TabBar 導(dǎo)航欄切換展示的主要內(nèi)容 /// 用于在 TabBarView 中顯示的組件 class TabContent extends StatelessWidget { const TabContent({Key key, this.data}) : super(key: key); /// 根據(jù)該數(shù)據(jù)條目生成組件 final TabData data; @override Widget build(BuildContext context) { TextStyle textStyle = TextStyle(color: Colors.yellow, fontSize: 50); return Card( /// 設(shè)置 20 像素邊距 margin: EdgeInsets.all(20), /// 設(shè)置陰影 elevation: 10, /// 卡片顏色黑色 color: Colors.black, /// 卡片中的元素居中顯示 child: Center( /// 垂直方向的線性布局 child: Column( /// 在主軸 ( 垂直方向 ) 占據(jù)的大小 mainAxisSize: MainAxisSize.min, /// 居中顯示 crossAxisAlignment: CrossAxisAlignment.center, children: [ /// 設(shè)置圖標(biāo) Icon(data.icon, size: 128.0, color: Colors.green), /// 設(shè)置文字 Text(data.title, style: TextStyle(color: Colors.yellow, fontSize: 50)), ], ), ), ); } }

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

運(yùn)行效果展示 :

四、相關(guān)資源

參考資料 :

flutter 官網(wǎng) : https://flutter.dev/

Flutter 插件- : https://pub.dev/packages

Flutter 開(kāi)發(fā)文檔 : https://flutter.cn/docs ( 強(qiáng)烈推薦 )

官方 GitHub 地址 : https://github.com/flutter

Flutter 中文社區(qū) : https://flutter.cn/

Flutter 實(shí)用教程 : https://flutter.cn/docs/cookbook

Flutter CodeLab : https://codelabs.flutter-io.cn/

Dart 中文文檔 : https://dart.cn/

Dart 開(kāi)發(fā)者官網(wǎng) : https://api.dart.dev/

Flutter 中文網(wǎng) : https://flutterchina.club/ , http://flutter.axuer.com/docs/

Flutter 相關(guān)問(wèn)題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )

GitHub 上的 Flutter 開(kāi)源示例 : https://download.csdn.net/download/han1202012/15989510

Flutter 實(shí)戰(zhàn)電子書(shū) : https://book.flutterchina.club/chapter1/

重要的專題 :

Flutter 動(dòng)畫(huà)參考文檔 : https://flutterchina.club/animations/

博客源碼下載 :

GitHub 地址 : https://github.com/han1202012/flutter_frame ( 隨博客進(jìn)度一直更新 , 有可能沒(méi)有本博客的源碼 )

博客源碼快照 : https://download.csdn.net/download/han1202012/16277725 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

Flutter GitHub

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。