我们可以通过创建一个新的Route，使用Navigator来导航到一个新的页面，但是如果在应用中很多地方都需要导航到同一个页面（比如在开发中，首页、推荐、分类页都可能会跳到详情页），那么就会存在很多重复的代码。在这种情况下，我们就可以使用 命名路由。
优点：
- 名称路由是将名字和路由的映射关系，在一个地方进行统一管理
- 有了命名路由，我们可以通过
Navigator.pushNamed()方法来跳转到新的页面
命名路由怎么使用？
1、可以放在MaterialApp的 initialRoute 和 routes 中initialRoute : 设置应用程序从哪一个路由开始启动，设置了该属性，就不需要再设置home 属性了
2、routes：定义名称和路由之间的映射关系，类型为 Map<String, WidgetBuilder>
基本代码如下：
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue, splashColor: Colors.transparent
),
initialRoute: "/",
routes: {
"/home": (ctx) => HYHomePage(),
"/detail": (ctx) => HYDetailPage()
},
);
在使用跳转的时候则：
_onPushTap(BuildContext context) {
Navigator.of(context).pushNamed("/detail");
}
为了更加规范使用路由，则在开发中让每个界面都对 routeName 统一，这样每个界面都定义一个路由常量来使用
class HYHomePage extends StatefulWidget {
static const String routeName = "/home";
}
class HYDetailPage extends StatelessWidget {
static const String routeName = "/detail";
}
为了更好的管理路由映射，则单独创建一个文件进行管理
管理路由文件代码如下：
import 'package:flutter/material.dart';
import 'package:list/douban/Data/my_provider_demo.dart';
import '../Page/detail.dart';
import '../Page/about.dart';
import '../Page/un_known.dart';
import 'package:list/douban/main.dart';
class HYRouter {
static final Map<String, WidgetBuilder> routes = {
MyHomePage1.routeName:(context) => MyHomePage1(),// 默认界面
Deatail.routeName:(context) => Deatail(),
AboutPage.routeName:(context) => AboutPage(),
};
// 默认界面
static final String initialRoute = MyHomePage1.routeName;
// 钩子函数
static final RouteFactory generateRoute = (settings) {
if (settings.name == Deatail.routeName){
return MaterialPageRoute(builder: (context){
// settings.arguments
return Deatail();
}
);
}
return null;
};
// 错误界面
static final RouteFactory unKnownRoute = (settings) {
return MaterialPageRoute(builder: (context) {
return UnknownPage();
});
};
}
则，MaterialApp 代码也需要优化
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
routes: HYRouter.routes,
onGenerateRoute:HYRouter.unKnownRoute,
onUnknownRoute: HYRouter.unKnownRoute,
initialRoute: HYRouter.initialRoute,
);
跳转
TextButton(child: Text("打开详情"),
onPressed: () {
print("点击打开详情");
final result = Navigator.of(context).pushNamed(Deatail.routeName,arguments: "去详情界面的数据");
result.then((value) {
print("${value}");
});
},
)
在跳转的界面接受参数文章来源：https://www.toymoban.com/news/detail-625139.html
Widget build(BuildContext context) {
final message = ModalRoute.of(context)?.settings.arguments as String;
}
上述就完成最基本的命名路由的注册，映射关系，以及跳转。文章来源地址https://www.toymoban.com/news/detail-625139.html
-
路由钩子 onGenerateRoute的钩子函数
加入我们有一个界面已经创建好，并且传入对应的参数message，并且已经有一个 对应的构造方法，此时如果将其放到路由映射表中则不合适。因为该界面必需要求传入一个参数，这时候我们就可以使用onGenerateRoute的钩子函数 - 当我们通过pushNamed进行跳转，但是对应的name没有在routes中有映射关系，那么就会执行onGenerateRoute钩子函数；
- 我们可以在该函数中，手动创建对应的Route进行返回；
- 该函数有一个参数RouteSettings，该类有两个常用的属性：
- name: 跳转的路径名称
- arguments：跳转时携带的参数
onGenerateRoute: (settings) {
if (settings.name == "/about") {
return MaterialPageRoute(
builder: (ctx) {
return HYAboutPage(settings.arguments);
}
);
}
returnnull;
},
-
onUnknownRoute
如果我们打开的一个路由名称是根本不存在，这个时候我们希望跳转到一个统一的错误页面。
onUnknownRoute: (settings) {
return MaterialPageRoute(
builder: (ctx) {
return UnknownPage();
}
);
},
到了这里，关于Flutter 命名路由的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
