Flutter 导航路由：构建流畅的应用导航体验

优质文章学习记录

— 6 min read

Flutter 导航路由：构建流畅的应用导航体验

代码如诗，导航如画。让我们用 Flutter 路由的强大能力，构建出既流畅又直观的应用导航系统。

什么是 Flutter 导航？

Flutter 导航是指在不同页面（或称为路由）之间进行切换的机制。良好的导航系统是应用用户体验的重要组成部分，它决定了用户如何在应用中浏览和找到所需内容。

基础导航

1. 使用 Navigator

import 'package:flutter/material.dart'; // 跳转到新页面 Navigator.push( context, MaterialPageRoute(builder: (context) => SecondPage()), ); // 返回上一页 Navigator.pop(context); // 替换当前页面 Navigator.pushReplacement( context, MaterialPageRoute(builder: (context) => SecondPage()), ); // 清除所有页面并跳转到新页面 Navigator.pushAndRemoveUntil( context, MaterialPageRoute(builder: (context) => HomePage()), (route) => false, );

2. 命名路由

// 在 MaterialApp 中定义路由 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', initialRoute: '/', routes: { '/': (context) => HomePage(), '/second': (context) => SecondPage(), '/third': (context) => ThirdPage(), }, ); } } // 使用命名路由导航 Navigator.pushNamed(context, '/second'); // 返回上一页 Navigator.pop(context); // 替换当前页面 Navigator.pushReplacementNamed(context, '/second'); // 清除所有页面并跳转到新页面 Navigator.pushNamedAndRemoveUntil(context, '/', (route) => false);

3. 传递参数

// 跳转到新页面并传递参数 Navigator.pushNamed( context, '/second', arguments: {'id': 1, 'name': 'Flutter'}, ); // 在新页面接收参数 class SecondPage extends StatelessWidget { @override Widget build(BuildContext context) { final Map<String, dynamic> args = ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>; final int id = args['id']; final String name = args['name']; return Scaffold( appBar: AppBar(title: Text('Second Page')), body: Center( child: Text('ID: $id, Name: $name'), ), ); } }

高级路由管理

1. 使用 onGenerateRoute

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', initialRoute: '/', onGenerateRoute: (settings) { switch (settings.name) { case '/': return MaterialPageRoute(builder: (context) => HomePage()); case '/second': final args = settings.arguments as Map<String, dynamic>; return MaterialPageRoute( builder: (context) => SecondPage( id: args['id'], name: args['name'], ), ); default: return MaterialPageRoute(builder: (context) => NotFoundPage()); } }, ); } }

2. 自定义路由动画

// 自定义页面路由 class CustomPageRoute<T> extends PageRouteBuilder<T> { final Widget child; CustomPageRoute({required this.child}) : super( pageBuilder: (context, animation, secondaryAnimation) => child, transitionsBuilder: (context, animation, secondaryAnimation, child) { const begin = Offset(1.0, 0.0); const end = Offset.zero; const curve = Curves.easeInOut; var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve)); var offsetAnimation = animation.drive(tween); return SlideTransition( position: offsetAnimation, child: child, ); }, ); } // 使用自定义路由 Navigator.push( context, CustomPageRoute(child: SecondPage()), );

3. 使用 PageRouteBuilder

Navigator.push( context, PageRouteBuilder( pageBuilder: (context, animation, secondaryAnimation) => SecondPage(), transitionsBuilder: (context, animation, secondaryAnimation, child) { return FadeTransition( opacity: animation, child: child, ); }, transitionDuration: Duration(milliseconds: 500), ), );

路由守卫和拦截

1. 登录验证

class AuthGuard { static bool isLoggedIn = false; static Route<dynamic>? onGenerateRoute(RouteSettings settings) { // 需要登录的页面 final authRoutes = ['/profile', '/settings']; if (authRoutes.contains(settings.name) && !isLoggedIn) { return MaterialPageRoute( builder: (context) => LoginPage(), settings: RouteSettings(name: '/login'), ); } // 正常路由 switch (settings.name) { case '/': return MaterialPageRoute(builder: (context) => HomePage()); case '/login': return MaterialPageRoute(builder: (context) => LoginPage()); case '/profile': return MaterialPageRoute(builder: (context) => ProfilePage()); default: return MaterialPageRoute(builder: (context) => NotFoundPage()); } } }

2. 路由拦截器

class RouteInterceptor extends NavigatorObserver { @override void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) { super.didPush(route, previousRoute); print('Pushed: ${route.settings.name}'); // 可以在这里进行埋点、权限检查等 } @override void didPop(Route<dynamic> route, Route<dynamic>? previousRoute) { super.didPop(route, previousRoute); print('Popped: ${route.settings.name}'); } } // 在 MaterialApp 中使用 MaterialApp( navigatorObservers: [RouteInterceptor()], // ... )

底部导航栏

1. 基础底部导航

class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { int _selectedIndex = 0; final List<Widget> _pages = [ HomeTab(), SearchTab(), ProfileTab(), ]; void _onItemTapped(int index) { setState(() { _selectedIndex = index; }); } @override Widget build(BuildContext context) { return Scaffold( body: _pages[_selectedIndex], bottomNavigationBar: BottomNavigationBar( items: const <BottomNavigationBarItem>[ BottomNavigationBarItem( icon: Icon(Icons.home), label: '首页', ), BottomNavigationBarItem( icon: Icon(Icons.search), label: '搜索', ), BottomNavigationBarItem( icon: Icon(Icons.person), label: '我的', ), ], currentIndex: _selectedIndex, selectedItemColor: Colors.blue, onTap: _onItemTapped, ), ); } }

2. 使用 IndexedStack 保持页面状态

class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { int _selectedIndex = 0; final List<Widget> _pages = [ HomeTab(), SearchTab(), ProfileTab(), ]; @override Widget build(BuildContext context) { return Scaffold( body: IndexedStack( index: _selectedIndex, children: _pages, ), bottomNavigationBar: BottomNavigationBar( items: const <BottomNavigationBarItem>[ BottomNavigationBarItem( icon: Icon(Icons.home), label: '首页', ), BottomNavigationBarItem( icon: Icon(Icons.search), label: '搜索', ), BottomNavigationBarItem( icon: Icon(Icons.person), label: '我的', ), ], currentIndex: _selectedIndex, selectedItemColor: Colors.blue, onTap: (index) { setState(() { _selectedIndex = index; }); }, ), ); } }

抽屉导航

class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('首页')), drawer: Drawer( child: ListView( padding: EdgeInsets.zero, children: <Widget>[ DrawerHeader( decoration: BoxDecoration( color: Colors.blue, ), child: Text( '菜单', style: TextStyle( color: Colors.white, fontSize: 24, ), ), ), ListTile( leading: Icon(Icons.home), title: Text('首页'), onTap: () { Navigator.pop(context); Navigator.pushNamed(context, '/'); }, ), ListTile( leading: Icon(Icons.settings), title: Text('设置'), onTap: () { Navigator.pop(context); Navigator.pushNamed(context, '/settings'); }, ), ], ), ), body: Center(child: Text('首页内容')), ); } }

最佳实践

  1. 使用命名路由：便于管理和维护
  2. 参数类型安全：使用强类型传递参数
  3. 路由守卫：在关键页面进行权限验证
  4. 动画一致性：保持应用内导航动画的一致性
  5. 状态保持：使用 IndexedStack 保持页面状态
  6. 错误处理：处理路由不存在的情况

实践案例：完整的导航系统

import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Navigation Demo', theme: ThemeData( primarySwatch: Colors.blue, ), initialRoute: '/', routes: { '/': (context) => HomePage(), '/second': (context) => SecondPage(), '/third': (context) => ThirdPage(), }, onUnknownRoute: (settings) { return MaterialPageRoute( builder: (context) => NotFoundPage(), ); }, ); } } class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('首页'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( '首页', style: TextStyle(fontSize: 24), ), SizedBox(height: 20), ElevatedButton( onPressed: () { Navigator.pushNamed( context, '/second', arguments: {'message': '来自首页的问候'}, ); }, child: Text('跳转到第二页'), ), ], ), ), ); } } class SecondPage extends StatelessWidget { @override Widget build(BuildContext context) { final args = ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>; final message = args['message']; return Scaffold( appBar: AppBar( title: Text('第二页'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( '第二页', style: TextStyle(fontSize: 24), ), SizedBox(height: 10), Text( message, style: TextStyle(fontSize: 16, color: Colors.grey), ), SizedBox(height: 20), ElevatedButton( onPressed: () { Navigator.pushNamed(context, '/third'); }, child: Text('跳转到第三页'), ), SizedBox(height: 10), ElevatedButton( onPressed: () { Navigator.pop(context); }, child: Text('返回上一页'), ), ], ), ), ); } } class ThirdPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('第三页'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( '第三页', style: TextStyle(fontSize: 24), ), SizedBox(height: 20), ElevatedButton( onPressed: () { Navigator.pushNamedAndRemoveUntil( context, '/', (route) => false, ); }, child: Text('返回首页'), ), ], ), ), ); } } class NotFoundPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('页面未找到'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon( Icons.error_outline, size: 64, color: Colors.red, ), SizedBox(height: 16), Text( '404', style: TextStyle( fontSize: 48, fontWeight: FontWeight.bold, ), ), SizedBox(height: 8), Text( '页面未找到', style: TextStyle(fontSize: 18), ), SizedBox(height: 20), ElevatedButton( onPressed: () { Navigator.pushReplacementNamed(context, '/'); }, child: Text('返回首页'), ), ], ), ), ); } }

总结

Flutter 的导航系统提供了丰富的功能来构建流畅的应用导航体验。通过合理使用命名路由、自定义动画、路由守卫等技术，我们可以创建出既美观又实用的导航系统。

导航不仅仅是页面的切换，更是用户体验的引导。让我们用 Flutter 路由的强大能力，构建出令人惊叹的应用导航系统，展现前端技术的无限可能。

Read more

基于动态三维环境下的Q-Learning算法无人机自主避障路径规划研究（Matlab代码实现）

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭：行百里者，半于九十。 📋📋📋本文内容如下：🎁🎁🎁  ⛳️赠与读者 👨‍💻做科研，涉及到一个深在的思想系统，需要科研者逻辑缜密，踏实认真，但是不能只是努力，很多时候借力比努力更重要，然后还要有仰望星空的创新点和启发点。建议读者按目录次序逐一浏览，免得骤然跌入幽暗的迷宫找不到来时的路，它不足为你揭示全部问题的答案，但若能解答你胸中升起的一朵朵疑云，也未尝不会酿成晚霞斑斓的别一番景致，万一它给你带来了一场精神世界的苦雨，那就借机洗刷一下原来存放在那儿的“躺平”上的尘埃吧。      或许，雨过云收，神驰的天地更清朗.......🔎🔎🔎 💥第一部分——内容介绍 基于 Q-learning 的三维无人机动态避障导航方法研究 摘要 针对低空复杂三维环境下无人机自主飞行的安全与路径优化问题，本文提出一种基于 Q-learning 强化学习的无人机导航与避障方法。该方法在离散化

VR跨设备同步：提示工程如何让内容一致？

VR跨设备同步：提示工程如何让内容一致？ 一、一场“找不同”的VR聚会：同步问题的痛与惑 上周末，我和三个朋友凑了四台不同的VR设备——Quest 3、Valve Index、Pico 4、Oculus Rift S，打算一起体验热门的VR密室逃脱《迷室： VR》。我们的目标很简单：合力破解密码锁，打开通向终点的门。但游戏开始10分钟后，场面彻底失控： * 我戴着Quest 3站在密码锁前，朋友A的Valve Index画面里，我还在房间门口“飘着”； * 我转动密码盘输入“123”，朋友B的Pico 4里，密码数字显示的是“456”； * 我抓起桌上的钥匙，朋友C的Oculus Rift S里，钥匙还稳稳地躺在原地…… 原本的“团队协作”变成了“集体找不同”，大家纷纷摘下头显吐槽：“这VR同步也太离谱了吧？” 这不是个例。
机器人-六轴机械臂的正运动学

机器人-六轴机械臂的正运动学

在机器人运动学建模领域，D-H（Denavit-Hartenberg）参数法绝对是绕不开的核心技术。它以极简的4个参数，就能清晰描述机械臂各连杆间的相对位姿关系，是实现正运动学求解、轨迹规划的基础。本文将从理论原理出发，一步步拆解六轴机械臂的D-H法建模流程，最后结合代码实现让理论落地，适合机器人初学者或技术爱好者深入学习。 一、为什么选择D-H法？—— 机械臂建模的“通用语言” 六轴机械臂作为工业场景中最常用的机器人构型，其连杆与关节的空间关系复杂。如果直接用三维坐标系叠加计算，不仅公式繁琐，还容易出现坐标混乱的问题。而D-H法的核心优势的在于“标准化”： * 简化参数：用仅4个参数（关节角、连杆偏移、连杆长度、连杆扭转角）描述相邻连杆的位姿，替代复杂的三维坐标变换； * 通用性强：适用于所有串联机械臂，无论是六轴、四轴还是协作机械臂，都能套用同一套建模逻辑； * 计算高效：通过齐次变换矩阵的乘积，可快速求解末端执行器相对于基坐标系的位姿，为后续运动学分析奠定基础。 简单来说，学会D-H法，就掌握了串联机械臂建模的“通用语言”。 二、D-H法核心：4个
AI魔术师：基于视觉的增强现实特效

AI魔术师：基于视觉的增强现实特效

AI魔术师：基于视觉的增强现实特效 * 一、前言 * 二、AR 与视觉 AI 的技术基石 * 2.1 增强现实的核心概念 * 2.2 计算机视觉与 AI 的技术融合 * 2.3 技术栈选型与环境搭建 * 三、视觉 AR 的核心技术解析 * 3.1 相机标定与坐标系统 * 3.1.1 相机标定原理 * 3.1.2 标定代码实现 * 3.2 实时特征跟踪技术 * 3.2.1 ORB 特征跟踪原理 * 3.2.2 单目视觉里程计实现 * 3.3 语义分割与虚实融合