【Flutter】Flutter 頁面跳轉 ( 路由 Route | 導航器 Navigator | 頁面關閉 )

文章目錄

一、flutter 頁面跳轉

二、路由信息注冊

三、通過路由名實現頁面跳轉

四、通過路由名實現頁面跳轉

五、退出界面

六、完整代碼示例

七、相關資源

一、flutter 頁面跳轉

Flutter 頁面跳轉 :

路由 ( Route ) : 每個頁面都可以設置一個路由名稱 , 在路由中注冊該名稱 , 之后便可以通過路由名稱進行頁面跳轉 ;

// 通過路由名稱實現頁面跳轉 , 通過路由名稱字符串實現跳轉 Navigator.pushNamed(context, "LayoutPage");

1

2

導航 ( Navigator ) : 通過 Navigator 直接跳轉 ;

// 通過 Navigator 實現頁面跳轉 , 直接通過頁面組件對象跳轉 Navigator.push(context, MaterialPageRoute(builder: (context) => LayoutPage()));

1

2

二、路由信息注冊

注冊路由 : 在 MaterialApp 根節點組件中的 routes 字段注冊路由 , 路由信息存儲在 Map 集合中 , 鍵是路由名稱 , 值是頁面 Widget 組件 ;

代碼示例 :

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( // 設置標題 title: 'Flutter Demo', // 設置主題 theme: ThemeData( primarySwatch: Colors.blue, ), // 設置界面主組件 home: Scaffold( // 設置標題欄 appBar: AppBar( title: Text("路由與導航"), ), // 設置界面主體組件 body: RouteNavigator(), ), // 配置路由 routes: { "StatelessWidgetPage" : (BuildContext context) => StatelessWidgetPage(), "StatefulWidgetPage" : (BuildContext context) => StatefulWidgetPage(), "LayoutPage" : (BuildContext context) => LayoutPage() }, ); } }

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

代碼解析 : 上述代碼的作用是注冊如下路由信息 ,

StatelessWidgetPage 頁面組件對應的路由名稱是 " StatelessWidgetPage " 字符串 ,

StatefulWidgetPage 頁面組件對應的路由名稱是 " StatefulWidgetPage " 字符串 ,

LayoutPage 頁面組件對應的路由名稱是 " LayoutPage " 字符串 ,

三、通過路由名實現頁面跳轉

通過路由名實現頁面跳轉 : 調用 Navigator 的 pushNamed 方法 , 實現頁面跳轉 , 第一個參數是 BuildContext context , 第二個參數是路由名字符串 ; 代碼格式如下 :

Navigator.pushNamed(上下文對象, "路由名稱");

1

代碼示例 : 下面代碼的作用是跳轉到 “LayoutPage” 路由名稱對應的頁面 ;

RaisedButton( onPressed: (){ Navigator.pushNamed(context, "LayoutPage"); }, child: Text("通過路由名跳轉到頁面1"), ),

1

2

3

4

5

6

四、通過路由名實現頁面跳轉

調用 Navigator.push 方法實現頁面跳轉 , 此處第二個參數傳入 MaterialPageRoute 類型對象 , 代碼如下 :

Navigator.push(context, MaterialPageRoute(builder: (context) => LayoutPage()));

1

代碼示例 : 跳轉到 LayoutPage 界面 ;

RaisedButton( onPressed: (){ Navigator.push(context, MaterialPageRoute(builder: (context) => LayoutPage())); }, child: Text("通過導航跳轉到頁面1"), ),

1

2

3

4

5

6

五、退出界面

在 AppBar 組件中設置回退按鈕點擊事件 , 調用 Navigator.pop(context) 方法 , 即可退出當前界面 ;

// 退出當前界面 Navigator.pop(context);

1

2

代碼示例 :

import 'package:flutter/material.dart'; class LayoutPage extends StatefulWidget { @override _LayoutPageState createState() => _LayoutPageState(); } class _LayoutPageState extends State { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: '布局組件示例', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( // 頂部標題欄 appBar: AppBar( title: Text('布局組件示例'), // 回退按鈕, 點擊該按鈕退出該界面 leading: GestureDetector( onTap: (){ // 退出界面方法 Navigator.pop(context); }, child: Icon(Icons.arrow_back_ios), ), ), body: 主組件省略, ) ); } }

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

六、完整代碼示例

完整代碼示例 :

import 'package:flutter/material.dart'; import 'package:flutter_cmd/StatelessWidgetPage.dart'; import 'LayoutPage.dart'; import 'StatefulWidgetPage.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( // 設置標題 title: 'Flutter Demo', // 設置主題 theme: ThemeData( primarySwatch: Colors.blue, ), // 設置界面主組件 home: Scaffold( // 設置標題欄 appBar: AppBar( title: Text("路由與導航"), ), // 設置界面主體組件 body: RouteNavigator(), ), // 配置路由 routes: { "StatelessWidgetPage" : (BuildContext context) => StatelessWidgetPage(), "StatefulWidgetPage" : (BuildContext context) => StatefulWidgetPage(), "LayoutPage" : (BuildContext context) => LayoutPage() }, ); } } class RouteNavigator extends StatefulWidget { @override _RouteNavigatorState createState() => _RouteNavigatorState(); } class _RouteNavigatorState extends State { @override Widget build(BuildContext context) { return Container( child: Column( children: [ RaisedButton( onPressed: (){ Navigator.pushNamed(context, "LayoutPage"); }, child: Text("通過路由名跳轉到頁面1"), ), RaisedButton( onPressed: (){ Navigator.pushNamed(context, "StatefulWidgetPage"); }, child: Text("通過路由名跳轉到頁面2"), ), RaisedButton( onPressed: (){ Navigator.pushNamed(context, "StatelessWidgetPage"); }, child: Text("通過路由名跳轉到頁面3"), ), RaisedButton( onPressed: (){ Navigator.push(context, MaterialPageRoute(builder: (context) => LayoutPage())); }, child: Text("通過導航跳轉到頁面1"), ), RaisedButton( onPressed: (){ Navigator.push(context, MaterialPageRoute(builder: (context) => StatefulWidgetPage())); }, child: Text("通過導航跳轉到頁面2"), ), RaisedButton( onPressed: (){ Navigator.push(context, MaterialPageRoute(builder: (context) => StatelessWidgetPage())); }, child: Text("通過導航跳轉到頁面3"), ), ], ), ); } }

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

設置回退按鈕示例 :

import 'package:flutter/material.dart'; class LayoutPage extends StatefulWidget { @override _LayoutPageState createState() => _LayoutPageState(); } class _LayoutPageState extends State { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: '布局組件示例', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( // 頂部標題欄 appBar: AppBar( title: Text('布局組件示例'), // 回退按鈕, 點擊該按鈕退出該界面 leading: GestureDetector( onTap: (){ // 退出界面方法 Navigator.pop(context); }, child: Icon(Icons.arrow_back_ios), ), ), body: 主組件省略, ) ); } }

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

運行效果展示 :

七、相關資源

參考資料 :

Flutter 官網 : https://flutter.dev/

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 地址 : https://github.com/han1202012/flutter_cmd ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

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

Flutter NAT

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。