【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小时内删除侵权内容。