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

受够了网络反爬？这套 WebTop 方案，让云端 OpenClaw 像真人一样上网

受够了网络反爬？这套 WebTop 方案，让云端 OpenClaw 像真人一样上网

浏览器是网络世界的入口 对于云端部署的 OpenClaw，有一个最大的痛点，就是浏览器没有显示界面，这会对 OpenClaw 的浏览器自动化操作产生很大的影响。 刷知乎、小红书、推特，或者看 Reddit 时，传统的 Headless（无头）浏览器几乎过不了人机验证，也很容易卡在扫码登录界面。 云服务器没有显示器，你连验证码长什么样都看不到，更别提接管操作了。 那么，有没有一种优雅的姿势，让云端的 OpenClaw 拥有一个“有血有肉”的真实桌面浏览器？ 就像我们在本地自己电脑上浏览网页一样自由？ 既能保留 Cookie 环境，又能在遇到验证码时，让你通过浏览器随时“远程附体”进行人工接管？ 我花了几天时间，反复追问 Claude、GPT、Grok、Gemini、Kimi，在我的云服务器上跑通了他们一致推荐的方案：WebTop + Tailscale，并且成功登录谷歌、知乎、小红书等平台。
通过URI Scheme实现从Web网页上打开本地C++应用程序（以腾讯会议为例，附完整实现源码）

通过URI Scheme实现从Web网页上打开本地C++应用程序（以腾讯会议为例，附完整实现源码）

目录 1、需求描述 2、选择URI Scheme实现 3、何为URI Scheme？ 4、将自定义的URL Scheme信息写入注册表的C++源码实现 5、如何实现最开始的3种需求 6、后续需要考虑的细节问题        之前陆续收到一些从Web页面上启动我们C++客户端软件的需求，希望我们能提供一些技术上的支持与协助，支持从Web网页上将我们的C++客户端软件启动起来。于是我大概地研究了相关的实现方法，下面把研究的过程与结果在此做一个分享，希望能给大家提供一个借鉴或参考。 C++软件异常排查从入门到精通系列教程（核心精品专栏，订阅量已达10000多个，欢迎订阅，持续更新...）https://blog.ZEEKLOG.net/chenlycly/article/details/125529931C/C++实战专栏（重点专栏，专栏文章已更新500多篇，订阅量已达8000多个，欢迎订阅，持续更新中...）https://blog.ZEEKLOG.net/
视频续播功能实现 - 断点续看从前端到 Spring Boot 后端

视频续播功能实现 - 断点续看从前端到 Spring Boot 后端

🌷 古之立大事者，不惟有超世之才，亦必有坚忍不拔之志 🎐 个人CSND主页——Micro麦可乐的博客 🐥《Docker实操教程》专栏以最新的Centos版本为基础进行Docker实操教程，入门到实战 🌺《RabbitMQ》专栏19年编写主要介绍使用JAVA开发RabbitMQ的系列教程，从基础知识到项目实战 🌸《设计模式》专栏以实际的生活场景为案例进行讲解，让大家对设计模式有一个更清晰的理解 🌛《开源项目》本专栏主要介绍目前热门的开源项目，带大家快速了解并轻松上手使用 🍎 《前端技术》专栏以实战为主介绍日常开发中前端应用的一些功能以及技巧，均附有完整的代码示例 ✨《开发技巧》本专栏包含了各种系统的设计原理以及注意事项，并分享一些日常开发的功能小技巧 💕《Jenkins实战》专栏主要介绍Jenkins+Docker的实战教程，让你快速掌握项目CI/CD，是2024年最新的实战教程 🌞《Spring Boot》专栏主要介绍我们日常工作项目中经常应用到的功能以及技巧，代码样例完整 👍《Spring Security》专栏中我们将逐步深入Spring Security的各个

OpenWebUI联网搜索实战：如何用SearXNG让本地大模型获取实时信息（附百度/360配置）

OpenWebUI联网搜索实战：如何用SearXNG让本地大模型获取实时信息（附百度/360配置） 如果你在本地运行大模型，比如用Ollama部署了Qwen、Llama或者DeepSeek，可能会发现一个尴尬的问题：模型的知识截止日期是固定的，它不知道今天股市涨跌，不清楚最新的科技新闻，甚至不知道明天是什么节日。这种“信息孤岛”的感觉，让本地大模型的实用性大打折扣。 我最初搭建OpenWebUI环境时，也遇到了这个痛点。看着模型一本正经地分析过时的数据，那种无力感让我开始寻找解决方案。市面上有不少联网搜索方案，但要么配置复杂，要么对国内网络环境不友好。经过几周的折腾和测试，我发现SearXNG这个开源元搜索引擎，配合OpenWebUI的联网搜索功能，是目前最稳定、最灵活的方案之一。 更重要的是，通过合理配置SearXNG，我们可以让本地大模型直接调用百度、360等国内搜索引擎，获取符合中文用户习惯的实时信息。这不仅仅是技术上的连接，更是让本地AI真正“接地气”的关键一步。下面我就把自己踩过的坑、验证过的配置，以及实际效果对比，毫无保留地分享给你。 1. 为什么需要SearXN