在 Flutter 中Navigator.push 用于实现页面之间的导航

在 Flutter 中，Navigator.push 是一个非常紧张的方法，用于实现页面之间的导航。通过 Navigator.push，你可以将一个新的页面（路由）推送到导航栈中，从而表现新的内容。
以下是一个详细的教程，帮助你理解如何利用 Navigator.push 举行页面跳转。

---

一、根本用法

Navigator.push 的根本语法如下：

1. Navigator.push(
2.   context,
3.   MaterialPageRoute(builder: (context) => TargetPage()),
4. );

复制代码

参数说明：

• context：当前的 BuildContext，通常是从 StatelessWidget 或 StatefulWidget 的 build 方法中获取。
  
• MaterialPageRoute：界说了一个页面路由，builder 属性用于指定目的页面的内容。
  

---

二、完整示例

以下是一个完整的示例，演示如何从主页跳转到另一个页面。
示例代码：

1. import 'package:flutter/material.dart';
3. void main() {
4.   runApp(MyApp());
5. }
7. class MyApp extends StatelessWidget {
8.   @override
9.   Widget build(BuildContext context) {
10.     return MaterialApp(
11.       home: HomePage(),
12.     );
13.   }
14. }
16. // 主页
17. class HomePage extends StatelessWidget {
18.   @override
19.   Widget build(BuildContext context) {
20.     return Scaffold(
21.       appBar: AppBar(title: Text('主页')),
22.       body: Center(
23.         child: ElevatedButton(
24.           onPressed: () {
25.             // 跳转到新页面
26.             Navigator.push(
27.               context,
28.               MaterialPageRoute(builder: (context) => SecondPage()),
29.             );
30.           },
31.           child: Text('跳转到第二页'),
32.         ),
33.       ),
34.     );
35.   }
36. }
38. // 第二页
39. class SecondPage extends StatelessWidget {
40.   @override
41.   Widget build(BuildContext context) {
42.     return Scaffold(
43.       appBar: AppBar(title: Text('第二页')),
44.       body: Center(
45.         child: ElevatedButton(
46.           onPressed: () {
47.             // 返回上一页
48.             Navigator.pop(context);
49.           },
50.           child: Text('返回主页'),
51.         ),
52.       ),
53.     );
54.   }
55. }

复制代码

运行结果：

• 启动应用后，表现的是 HomePage。
  
• 点击按钮后，跳转到 SecondPage。
  
• 在 SecondPage 中点击按钮，返回到 HomePage。
  

---

三、带参数的页面跳转

偶然你需要在页面之间转达数据。可以通过构造函数将参数转达给目的页面。
示例代码：

1. // 主页
2. class HomePage extends StatelessWidget {
3.   @override
4.   Widget build(BuildContext context) {
5.     return Scaffold(
6.       appBar: AppBar(title: Text('主页')),
7.       body: Center(
8.         child: ElevatedButton(
9.           onPressed: () {
10.             // 跳转到新页面，并传递参数
11.             Navigator.push(
12.               context,
13.               MaterialPageRoute(
14.                 builder: (context) => SecondPage(message: '来自主页的消息'),
15.               ),
16.             );
17.           },
18.           child: Text('跳转到第二页'),
19.         ),
20.       ),
21.     );
22.   }
23. }
25. // 第二页
26. class SecondPage extends StatelessWidget {
27.   final String message;
29.   SecondPage({required this.message});
31.   @override
32.   Widget build(BuildContext context) {
33.     return Scaffold(
34.       appBar: AppBar(title: Text('第二页')),
35.       body: Center(
36.         child: Column(
37.           mainAxisAlignment: MainAxisAlignment.center,
38.           children: [
39.             Text('收到的消息：$message'),
40.             ElevatedButton(
41.               onPressed: () {
42.                 // 返回上一页
43.                 Navigator.pop(context);
44.               },
45.               child: Text('返回主页'),
46.             ),
47.           ],
48.         ),
49.       ),
50.     );
51.   }
52. }

复制代码

说明：

• 在 SecondPage 的构造函数中界说了一个 message 参数。
  
• 利用 Navigator.push 跳转时，通过构造函数转达参数。
  
• 在目的页面中，直接利用转达的参数即可。
  

---

四、返回值的页面跳转

偶然你可能需要从目的页面返回一些数据。可以利用 Navigator.push 的返回值来实现。
示例代码：

1. // 主页
2. class HomePage extends StatelessWidget {
3.   @override
4.   Widget build(BuildContext context) {
5.     return Scaffold(
6.       appBar: AppBar(title: Text('主页')),
7.       body: Center(
8.         child: ElevatedButton(
9.           onPressed: () async {
10.             // 跳转到新页面并等待返回值
11.             final result = await Navigator.push(
12.               context,
13.               MaterialPageRoute(
14.                 builder: (context) => SecondPage(),
15.               ),
16.             );
18.             // 显示返回值
19.             ScaffoldMessenger.of(context).showSnackBar(
20.               SnackBar(content: Text('返回值：$result')),
21.             );
22.           },
23.           child: Text('跳转到第二页'),
24.         ),
25.       ),
26.     );
27.   }
28. }
30. // 第二页
31. class SecondPage extends StatelessWidget {
32.   @override
33.   Widget build(BuildContext context) {
34.     return Scaffold(
35.       appBar: AppBar(title: Text('第二页')),
36.       body: Center(
37.         child: Column(
38.           mainAxisAlignment: MainAxisAlignment.center,
39.           children: [
40.             ElevatedButton(
41.               onPressed: () {
42.                 // 返回数据
43.                 Navigator.pop(context, '这是从第二页返回的数据');
44.               },
45.               child: Text('返回数据'),
46.             ),
47.           ],
48.         ),
49.       ),
50.     );
51.   }
52. }

复制代码

说明：

• 利用 await Navigator.push 捕获目的页面返回的数据。
  
• 在目的页面中，通过 Navigator.pop(context, data) 返回数据。
  
• 在主页中，吸收到返回值后，可以通过 SnackBar 或其他方式展示。
  

---

五、命名路由（Navigator.pushNamed）

除了动态创建路由外，Flutter 还支持命名路由。这种方式更适用于大型项目，由于可以集中管理路由。
示例代码：

1. import 'package:flutter/material.dart';
3. void main() {
4.   runApp(MyApp());
5. }
7. class MyApp extends StatelessWidget {
8.   @override
9.   Widget build(BuildContext context) {
10.     return MaterialApp(
11.       initialRoute: '/',
12.       routes: {
13.         '/': (context) => HomePage(),
14.         '/second': (context) => SecondPage(),
15.       },
16.     );
17.   }
18. }
20. // 主页
21. class HomePage extends StatelessWidget {
22.   @override
23.   Widget build(BuildContext context) {
24.     return Scaffold(
25.       appBar: AppBar(title: Text('主页')),
26.       body: Center(
27.         child: ElevatedButton(
28.           onPressed: () {
29.             // 使用命名路由跳转
30.             Navigator.pushNamed(context, '/second');
31.           },
32.           child: Text('跳转到第二页'),
33.         ),
34.       ),
35.     );
36.   }
37. }
39. // 第二页
40. class SecondPage extends StatelessWidget {
41.   @override
42.   Widget build(BuildContext context) {
43.     return Scaffold(
44.       appBar: AppBar(title: Text('第二页')),
45.       body: Center(
46.         child: ElevatedButton(
47.           onPressed: () {
48.             // 返回上一页
49.             Navigator.pop(context);
50.           },
51.           child: Text('返回主页'),
52.         ),
53.       ),
54.     );
55.   }
56. }

复制代码

说明：

• 在 MaterialApp 中界说了 routes，其中键是路由名称，值是对应的页面构建器。
  
• 利用 Navigator.pushNamed 跳转到指定的命名路由。
  

---

六、总结

• Navigator.push：用于动态创建路由并跳转到新页面。
  
• Navigator.pushNamed：通过命名路由跳转，适合管理复杂的应用。
  
• 转达参数：通过构造函数或 ModalRoute.of(context) 获取参数。
  
• 返回值：利用 Navigator.pop 返回数据，并通过 await 捕获返回值。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。