当前位置：首页 > news >正文

Flutter 导航深度解析：从入门到精通

news 2026/7/14 9:06:27

Flutter 导航深度解析：从入门到精通

掌握 Flutter 导航的每一种模式，构建流畅的用户体验。

一、导航的核心概念

作为一名追求像素级还原的 UI 匠人，我深知导航是应用的骨架。Flutter 提供了多种导航方式，从简单的Navigator.push到复杂的声明式路由，每一种都有其适用场景。

二、命令式导航

1. 基础导航

// 跳转到新页面 Navigator.push( context, MaterialPageRoute(builder: (context) => DetailPage()), ); // 返回上一页 Navigator.pop(context); // 替换当前页面 Navigator.pushReplacement( context, MaterialPageRoute(builder: (context) => NewPage()), ); // 清除栈并跳转到新页面 Navigator.pushAndRemoveUntil( context, MaterialPageRoute(builder: (context) => HomePage()), (route) => false, // 清除所有历史 );

2. 传递参数

// 跳转时传递参数 Navigator.push( context, MaterialPageRoute( builder: (context) => DetailPage(itemId: '123'), ), ); // 接收参数 class DetailPage extends StatelessWidget { final String itemId; DetailPage({required this.itemId}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('详情')), body: Center(child: Text('Item ID: $itemId')), ); } } // 返回时传递数据 Navigator.pop(context, 'result_data'); // 接收返回数据 final result = await Navigator.push( context, MaterialPageRoute(builder: (context) => DetailPage()), );

3. 自定义路由动画

class FadeRoute extends PageRouteBuilder { final Widget page; FadeRoute({required this.page}) : super( pageBuilder: (context, animation, secondaryAnimation) => page, transitionsBuilder: (context, animation, secondaryAnimation, child) { return FadeTransition( opacity: animation, child: child, ); }, ); } // 使用 Navigator.push(context, FadeRoute(page: DetailPage()));

三、声明式导航（Navigator 2.0）

1. 基础结构

class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { String _selectedItem = ''; bool _showDetail = false; @override Widget build(BuildContext context) { return MaterialApp( home: Navigator( pages: [ MaterialPage( key: ValueKey('HomePage'), child: HomePage( onItemSelected: (item) { setState(() { _selectedItem = item; _showDetail = true; }); }, ), ), if (_showDetail) MaterialPage( key: ValueKey('DetailPage_$_selectedItem'), child: DetailPage( itemId: _selectedItem, onBack: () { setState(() => _showDetail = false); }, ), ), ], onPopPage: (route, result) { if (!route.didPop(result)) return false; setState(() => _showDetail = false); return true; }, ), ); } }

2. 使用 Router

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp.router( routerDelegate: MyRouterDelegate(), routeInformationParser: MyRouteInformationParser(), ); } } // 路由信息 class RouteInformation { final String? itemId; RouteInformation({this.itemId}); } // 路由解析器 class MyRouteInformationParser extends RouteInformationParser<RouteInformation> { @override Future<RouteInformation> parseRouteInformation( RouteInformation routeInformation, ) async { final uri = Uri.parse(routeInformation.location ?? '/'); if (uri.pathSegments.length == 2 && uri.pathSegments[0] == 'item') { return RouteInformation(itemId: uri.pathSegments[1]); } return RouteInformation(); } @override RouteInformation restoreRouteInformation(RouteInformation configuration) { if (configuration.itemId != null) { return RouteInformation(location: '/item/${configuration.itemId}'); } return RouteInformation(location: '/'); } } // 路由委托 class MyRouterDelegate extends RouterDelegate<RouteInformation> with ChangeNotifier, PopNavigatorRouterDelegateMixin<RouteInformation> { final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>(); String? _selectedItem; set selectedItem(String? value) { _selectedItem = value; notifyListeners(); } @override RouteInformation get currentConfiguration { return RouteInformation(itemId: _selectedItem); } @override Widget build(BuildContext context) { return Navigator( key: navigatorKey, pages: [ MaterialPage( key: ValueKey('HomePage'), child: HomePage( onItemSelected: (item) { selectedItem = item; }, ), ), if (_selectedItem != null) MaterialPage( key: ValueKey('DetailPage_$_selectedItem'), child: DetailPage( itemId: _selectedItem!, onBack: () { selectedItem = null; }, ), ), ], onPopPage: (route, result) { if (!route.didPop(result)) return false; selectedItem = null; return true; }, ); } @override Future<void> setNewRoutePath(RouteInformation configuration) async { _selectedItem = configuration.itemId; } }

四、GoRouter：简化导航

import 'package:go_router/go_router.dart'; final router = GoRouter( initialLocation: '/', routes: [ GoRoute( path: '/', builder: (context, state) => HomePage(), routes: [ GoRoute( path: 'item/:id', builder: (context, state) { final id = state.pathParameters['id']!; return DetailPage(itemId: id); }, ), ], ), GoRoute( path: '/settings', builder: (context, state) => SettingsPage(), ), ], ); // 使用 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp.router( routerConfig: router, ); } } // 导航 context.go('/'); context.go('/item/123'); context.push('/settings');

五、底部导航与嵌套导航

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