Flutter 路由管理
概述
- 路由在移动开发中通常指页面，在Android中通常指代一个Activity。Flutter中的路由管理与原生开发较类似，路由管理指页面跳转关系。
- 路由入栈(push)操作对应打开一个新页面，出栈(pop)操作对应关闭页面。
简单路由
- 入栈，即新开一个页面，需要调用
Future<T?> push<T extends Object?>(BuildContext context, Route<T> route) - 出栈，即关闭页面，需要调用
pop<T extends Object?>(BuildContext context, [ T? result ])
入栈操作
入栈操作，传递参数，并接收返回值。
方式一和方式二使用构造函数传参，方式三使用RouteSettings传参。
方式一
onPressed: () async {
var result = await Navigator.push(
context,
MaterialPageRoute(builder: (context) {
return NewPage("hello world");
}),
);
print("$result");
},
方式二
Navigator.push(context, MaterialPageRoute(builder: (context) {
return NewPage("hello world");
})).then((value) {
print("$value");
});
方式三
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return NewPage("hello world");
},
settings: RouteSettings(
name: "params",
arguments: {
"name": "小白",
"age": 18,
"address": "beijing"
},
))).then((value) {
print("$value");
});
出栈操作
Navigator.pop(context, "hello 返回值");
RouteSettings获取传参
var args = ModalRoute.of(context)?.settings.arguments as Map<String, Object>;
命名路由
命名路由指有名字的路由，通过给路由起名字，通过路由名直接打开新的页面，便于路由管理。
注册路由表
使用命名路由，必须先注册一个路由表，在MyApp类中添加routes属性。
方式一
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '标题',
theme: ThemeData(
primarySwatch: Colors.blue,
),
//注册路由表
routes: {
"/NewPage": (context) {
return NewPage();
},
},
home: MyHomePage(title: '首页标题'),
);
}
}
方式二
首页home路由使用命名路由，需要在routes中注册MyHomePage路由，然后在initialRoute声明初始路由。
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '任务栏标题',
theme: ThemeData(
primarySwatch: Colors.blue,
),
routes: {
"/": (context) {
return MyHomePage(title: '首页标题');
},
"NewPage": (context) {
return NewPage();
},
},
initialRoute: "/",
);
}
}
命名路由传参
Navigator.pushNamed(context, "NewPage",
arguments: {"name": "小明", "age": 18, "address": "beijing"});
路由钩子
在使用命名路由跳转时，如果路由注册表没有注册，这时会调用onGenerateRoute回调。
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '任务栏标题',
theme: ThemeData(
primarySwatch: Colors.blue,
),
routes: {
"/": (context) {
return const MyHomePage(title: '首页标题');
},
},
initialRoute: "/",
onGenerateRoute: (RouteSettings settings) {
print("onGenerateRoute ${settings.name}");
if (settings.name == "NewPage") {
return MaterialPageRoute(builder: (context) {
return NewPage();
});
}
},
);
}
}
总结
推荐使用命名路由，理由如下：
- 语义化描述更清晰。
- 方便代码维护。
- 可以使用
onGenerateRoute回调。