Flutter 路由管理
Flutter 中，通常我们使用 Navigator 来管理全局的页面路由，在整个应用中维护一个路由堆栈。但是，有些情况下你可能需要一个局部路由，也就是在应用的某个部分内部维护一个独立的路由堆栈，而不影响全局路由。为了实现这一点，你可以在你的应用中创建一个新的 Navigator
定义了局部路由之后，不能随便使用 Navigator.of(context)，你需要确保使用的 context 是正确的。当你调用 Navigator.of(context) 时，Flutter 会从当前的 context 开始向上遍历 widget 树，直到找到最近的 Navigator。如果你没有特别指定，它可能会默认找到全局的 Navigator。
如何确保使用的是局部路由的 Navigator：
- 确保你传递给 Navigator 的 context 是局部 Navigator 下面的 widget 的 context。
- 如果局部 Navigator 有一个 key，你可以使用这个 key 来获取 NavigatorState，然后进行操作，如 GlobalKey
().currentState.push(...)。
局部路由简单使用
- 代码
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(home: AppHome()));
}
class AppHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('局部 Navigator 示例')),
body: Container(
// 给局部路由设置一个唯一的 key
child: Navigator(
key: GlobalKey<NavigatorState>(),
// 定义局部路由的页面
onGenerateRoute: (RouteSettings settings) {
WidgetBuilder builder;
switch (settings.name) {
case '/':
builder = (BuildContext context) => FirstScreen();
break;
case '/second':
builder = (BuildContext context) => SecondScreen();
break;
default:
throw Exception('Invalid route: ${settings.name}');
}
return MaterialPageRoute(builder: builder, settings: settings);
},
),
),
);
}
}
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
child: Text('打开第二页'),
onPressed: () {
// 使用局部 Navigator 进行页面跳转
Navigator.of(context).pushNamed('/second');
},
),
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
// 这里的第二个界面使用 Scaffold 才能在左上角显示返回的角标，其实就是显示在appBar的这里
appBar: AppBar(title: Text('第二页')),
body: Center(
child: ElevatedButton(
child: Text('返回第一页'),
onPressed: () {
// 使用局部 Navigator 返回到上一页
Navigator.of(context).pop();
},
),
),
);
}
}
- 效果
- 第一页效果
- 点击第二页效果
