Flutter 系列之路由学习
Flutter 系列之路由学习
1. 基本路由概念
1.1 Navigator
Navigator 是 Flutter 中用于管理路由的组件，它维护着一个路由堆栈。页面可以被推入堆栈（push），也可以被弹出堆栈（pop）。
- push: 将新的页面推入到当前堆栈顶端，显示这个页面。
- pop: 弹出当前堆栈顶端的页面，返回到上一个页面。
1.2 Route
Route 代表应用程序中可导航的“页面”或“屏幕”。Flutter 默认提供了两种常用的路由：
- MaterialPageRoute: Android 样式的页面切换动画。
- CupertinoPageRoute: iOS 样式的页面切换动画。
2. 基本导航用法
2.1 push 和 pop 方法
Navigator.push 和 Navigator.pop 是最常用的导航方法。
示例：
// 跳转到新页面
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondPage()),
);
// 返回上一页面
Navigator.pop(context);在 SecondPage 中可以通过 Navigator.pop() 返回到上一个页面。
2.2 传递数据到新页面
可以在导航时传递参数到目标页面：
// 跳转并传递数据
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondPage(data: 'Hello from FirstPage'),
),
);目标页面 SecondPage 可以通过构造函数接收这些参数。
class SecondPage extends StatelessWidget {
final String data;
SecondPage({required this.data});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Second Page')),
body: Center(
child: Text(data), // 显示传递过来的数据
),
);
}
}2.3 返回数据给上一个页面
可以通过 Navigator.pop 返回数据给上一个页面。
// 从 SecondPage 返回数据
Navigator.pop(context, '返回的数据');在调用页面，可以使用 then 来处理返回的数据：
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondPage()),
).then((result) {
// result 是从 SecondPage 返回的数据
print(result);
});3. 命名路由
命名路由是一种更具结构化的路由管理方式，它允许为每个页面定义一个字符串名称，并通过这个名称来导航。这样可以使代码更加整洁，尤其是当应用有多个页面时。
3.1 定义命名路由
在 MaterialApp 中定义路由：
MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => HomePage(),
'/second': (context) => SecondPage(),
},
);initialRoute: 应用启动时的初始路由。routes: 定义路由名称和页面的映射关系。
3.2 使用命名路由
使用 Navigator.pushNamed 来进行导航：
// 跳转到第二个页面
Navigator.pushNamed(context, '/second');通过命名路由可以避免在每次导航时都要显式地创建 MaterialPageRoute，从而简化代码。
3.3 传递参数给命名路由
如果要在使用命名路由时传递参数，可以使用 Navigator.pushNamed 的 arguments 参数。
传递参数：
Navigator.pushNamed(
context,
'/second',
arguments: 'Hello from HomePage',
);接收参数：
在目标页面中通过 ModalRoute.of(context)?.settings.arguments 获取传递的参数：
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final String data = ModalRoute.of(context)?.settings.arguments as String;
return Scaffold(
appBar: AppBar(title: Text('Second Page')),
body: Center(
child: Text(data),
),
);
}
}4. 自定义路由动画
如果需要自定义页面切换的动画效果，可以使用 PageRouteBuilder 来创建路由并定义过渡动画。
示例：
Navigator.push(
context,
PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => SecondPage(),
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,
);
},
),
);pageBuilder: 定义页面构建器。transitionsBuilder: 定义页面过渡的动画。
5. 路由守卫与 onGenerateRoute
在某些情况下，路由可能需要进行授权验证或者自定义匹配。在这种情况下，可以使用 onGenerateRoute 和 onUnknownRoute。
5.1 onGenerateRoute
onGenerateRoute 用于处理路由生成的逻辑，你可以通过这个方法来动态生成路由，比如根据传递的参数返回不同的页面。
MaterialApp(
onGenerateRoute: (RouteSettings settings) {
if (settings.name == '/second') {
final args = settings.arguments as String;
return MaterialPageRoute(
builder: (context) {
return SecondPage(data: args);
},
);
}
// 未匹配的路由处理
return null;
},
);5.2 onUnknownRoute
当没有匹配到路由时，Flutter 会调用 onUnknownRoute，你可以通过它来显示一个 404 页面或者返回默认页面。
MaterialApp(
onUnknownRoute: (settings) {
return MaterialPageRoute(builder: (context) => NotFoundPage());
},
);6. 总结
Flutter 提供了灵活且强大的路由管理方式。开发者可以根据应用的需求选择简单的 Navigator.push 和 pop，或者使用更具结构化的命名路由和自定义路由动画。通过 onGenerateRoute 和 onUnknownRoute，还可以实现更复杂的路由管理逻辑，比如权限验证和 404 错误处理。
腾讯云开发者
