写在前面
- 基本路由 基本路由通过 Navigator 类实现。你可以使用 Navigator.push 方法来导航到新页面，使用 Navigator.pop 返回。
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Home Page')), body: Center( child: ElevatedButton( onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) => SecondPage()), ); }, child: Text('Go to Second Page'), ), ), ); } }
class SecondPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Second Page')), body: Center( child: ElevatedButton( onPressed: () { Navigator.pop(context); }, child: Text('Back to Home Page'), ), ), ); } }
- 命名路由 命名路由允许你以字符串形式定义路由，便于管理和维护。在 MaterialApp 中定义路由：
import 'package:flutter/material.dart';
void main() { runApp(MyApp()); }
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Named Routes Example', initialRoute: '/', routes: { '/': (context) => HomePage(), '/second': (context) => SecondPage(), }, ); } }
导航到命名路由：
Navigator.pushNamed(context, '/second'); 3. 传递参数 3.1 简单参数传递 你可以通过构造函数传递参数。例如：
class SecondPage extends StatelessWidget { final String message;
SecondPage({required this.message});
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Second Page')), body: Center(child: Text(message)), ); } }
// 使用命名路由传递参数 Navigator.push( context, MaterialPageRoute( builder: (context) => SecondPage(message: 'Hello from Home!'), ), );
3.2 复杂参数传递 在复杂场景中，参数可以是对象。创建一个数据模型并在页面间传递：
class User { final String name; final int age;
User(this.name, this.age); }
// 在 SecondPage 中接收 User 对象 class SecondPage extends StatelessWidget { final User user;
SecondPage({required this.user});
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('User Details')), body: Center(child: Text('Name: {user.age}')), ); } }
// 使用 Navigator 传递 User 对象 Navigator.push( context, MaterialPageRoute( builder: (context) => SecondPage(user: User('Alice', 30)), ), );
- 返回参数 从一个页面返回参数可以使用 Navigator.pop，同时传递返回值：
final result = await Navigator.push( context, MaterialPageRoute(builder: (context) => SecondPage()), );
// 在 HomePage 中处理返回的结果 print('Received: $result'); 5. 动态路由 如果路由参数较多或复杂，使用动态路由可以更加灵活。可以在 onGenerateRoute 中定义路由：
MaterialApp( onGenerateRoute: (settings) { if (settings.name == '/user') { final User user = settings.arguments as User; return MaterialPageRoute( builder: (context) => UserPage(user: user), ); } return null; // 其他路由 }, );
// 使用动态路由 Navigator.pushNamed( context, '/user', arguments: User('Bob', 25), );
写在最后 Flutter 的路由系统强大且灵活，能够满足从简单到复杂的多种需求。通过命名路由、参数传递和动态路由的结合，你可以构建出清晰、易于维护的导航结构。通过上述示例，你可以根据自己的项目需求灵活运用这些路由技巧。 ————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
