一、术语
路由(route)
:
- 在 Flutter 中,屏 (screen) 和 页面 (page) 都叫做 路由 (route)。
- 在 Android 开发中,Activity 相当于“路由”,在 iOS 开发中,ViewController 相当于“路由”。在 Flutter 中,“路由”也是一个 widget。
导航(Navigator)
:
Navigator
是一个路由管理的组件,它提供了打开和退出路由页方法。Navigator官方链接
Navigator
常用的路由管理方法包括push
和pop
二、路由管理
1、Navigator示例代码
| import 'package:flutter/material.dart'; |
| |
| void main() => runApp(const MyApp()); |
| |
| class MyApp extends StatelessWidget { |
| const MyApp({super.key}); |
| |
| |
| @override |
| Widget build(BuildContext context) { |
| return MaterialApp( |
| title: 'Flutter Demo', |
| theme: ThemeData( |
| primarySwatch: Colors.blue, |
| ), |
| routes: { |
| '/': (context) => const HomePage(), |
| '/second': (context) => const SecondScreen(), |
| }); |
| } |
| } |
| |
| |
| class HomePage extends StatelessWidget { |
| const HomePage({super.key}); |
| |
| @override |
| Widget build(BuildContext context) { |
| return Scaffold( |
| appBar: AppBar( |
| title: const Text('Home'), |
| ), |
| body: Center( |
| child: Column( |
| children: [ |
| ElevatedButton( |
| onPressed: () { |
| Navigator.push(context, MaterialPageRoute( |
| builder: (context) => const SecondScreen(), |
| ), |
| ); |
| }, |
| child: const Text('使用Navigator+构造器跳转'), |
| ), |
| ElevatedButton( |
| onPressed: () { |
| Navigator.pushNamed(context, '/second'); |
| }, |
| child: const Text('使用Navigator+命名路由跳转'), |
| ), |
| ], |
| ), |
| ), |
| ); |
| } |
| } |
| |
| |
| class SecondScreen extends StatelessWidget { |
| const SecondScreen({super.key}); |
| |
| @override |
| Widget build(BuildContext context) { |
| return Scaffold( |
| appBar: AppBar( |
| title: const Text('Second Screen'), |
| ), |
| body: Center( |
| child: ElevatedButton( |
| onPressed: () { |
| Navigator.pop(context); |
| }, |
| child: const Text('Go back!'), |
| ), |
| ), |
| ); |
| } |
| } |
2、路由定义(命名路由)
在App中定义router:
| routes: { |
| '/': (context) => const HomePage(), |
| '/second': (context) => const SecondScreen(), |
| } |
3、Navigator方法介绍
1.Navigator.push
push(BuildContext context, Route route)
将给定的路由入栈(即打开新的页面),返回值是一个Future对象,用以接收新路由出栈(即关闭)时的返回数据。
pushNamed(BuildContext context, String routeName, {Object? arguments,})
将给定的路由名入栈,返回值是一个Future对象,用以接收新路由出栈(即关闭)时的返回数据。
2.Navigor.pop
- pop(BuildContext context, [ T? result ])
将栈顶路由出栈,result为页面关闭时返回给上一个页面的数据
3.其他
Navigator
还有很多其他方法,如Navigator.replace
、Navigator.popUntil
等,具体参考Navigator官方链接
3、路由传值
示例代码
定义传值Model
| class DetailInfo { |
| final String title; |
| final String message; |
| final String? other; |
| |
| DetailInfo(this.title, this.message,{this.other}); |
| } |
使用pushNamed
传递数据
| Navigator.pushNamed(context, '/second', arguments: DetailInfo('详情页','返回')); |
获取数据
使用MaterialPageRoute
中的ModalRoute
来获取路由参数,注意要避空
| final detail = ModalRoute.of(context)?.settings.arguments as DetailInfo?; |
完整代码:
| class SecondScreen extends StatelessWidget { |
| const SecondScreen({super.key}); |
| |
| @override |
| Widget build(BuildContext context) { |
| |
| final detail = ModalRoute.of(context)?.settings.arguments as DetailInfo?; |
| |
| return Scaffold( |
| appBar: AppBar( |
| title: Text(detail?.title ?? ''), |
| ), |
| body: Center( |
| child: ElevatedButton( |
| onPressed: () { |
| Navigator.pop(context); |
| }, |
| child: Text(detail?.message ?? ''), |
| ), |
| ), |
| ); |
| } |
| } |
4、其他
1.返回到指定页面
| Navigator.popUntil(context, ModalRoute.withName('/')); |
2.跳转指定页面,并销毁当前页
| Navigator.pushReplacementNamed(context, '/third'); |
3.推出当前页,然后跳转指定页
会有一个推出的动画效果
| Navigator.popAndPushNamed(context, '/third'); |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!