Flutter 命名路由、命名路由页面跳转传值

命名路由是区别于基本路由的一种存在，方便于大型项目中路由的统一管理，现在，在前面基本路由的项目基础上实现命名路由。

一、Flutter中的命名路由

使用步骤

路由配置

命名路由在使用前，需要在根组件main.dart中进行简单的配置（前面是页面路径，后面是页面中的组件名称）

第一步：首先通过MaterialApp中的routes参数配置

第二步：通过Navigator.pushNamed(context,"配置名字");


//初始化路由
initialRoute: "/",
	//路由配置
	routes: {
	"/": (contxt) => const HomePage(),
	"/search": (contxt) => const SearchPage(),
	"/message": (contxt) => const MessagePage(),
	"/user": (contxt) {
	  return const UserPage();
	},
},


Navigator.pushNamed(context, "/search");

二、Flutter 中的命名路由跳转传值

命名路由跳转传值有3个步骤。

第一步、配置路由，定义 Map 类型的 routes,Key 为 String 类型，Value 为 Function 类型


final Map routes ={
	"/": (contxt) => const HomePage(),
	"/search": (contxt) => const SearchPage(),
	"/message": (contxt) => const MessagePage(),
	"/user": (contxt,{arguments}) => UserPage(arguments:arguments),
};

第二步、配置传值，跳转传值固定写法


onGenerateRoute: (RouteSettings settings){    
	final String? name = settings.name;  
	final Function? pageContentBuilder = routes[name];  
	if (pageContentBuilder != null) {
	  if (settings.arguments != null) {
		//命名路由跳转传值 settings.arguments
		final Route route = MaterialPageRoute(
			builder: (context) =>
				pageContentBuilder(context, arguments: settings.arguments));
		return route;
	  } else {
		//基本路由跳转
		final Route route = MaterialPageRoute(  
			builder: (context) => pageContentBuilder(context));
		return route;
	  }
	}
	return null;
  }


//命名路由跳转传值
Navigator.pushNamed(context, "/user",
   arguments: {"title": "用户名查询", "name": "小明", "id": 8});

第三步、接收参数接收命名路由跳转传值


final Map arguments;
  const CategoryPage({super.key, required this.arguments})