flutter路由配置

路由配置文件

import 'package:flutter/material.dart';
import 'package:ichat/routers/pages/form_page.dart';
import 'package:ichat/routers/pages/person_page.dart';
import 'package:ichat/routers/pages/search_page.dart';
import 'package:ichat/routers/router_page.dart';
class RouteConfig {static String initRoute="/";static Map<String, WidgetBuilder> routes = {initRoute: (context) => const StaticRouterPage(),'/person': (context) => const PersonPage(),'/search': (context) => const SearchPage(),"/form": (context,{arguments}) => FormPage(arguments:arguments),};static var onGenerateRoute = (RouteSettings settings) {// print("$settings  ,name: ${settings.name} ,arguments: ${settings.arguments}");
//生成路由String? name = settings.name;var arguments = settings.arguments;Function? func = routes[name];if (func != null) {if (arguments == null) {return MaterialPageRoute(builder: (context) => func!(context));} else {return MaterialPageRoute(builder: (context) => func!(context, arguments));}}return null;};
}

程序启动主函数文件

import 'package:flutter/material.dart';
import 'package:ichat/routers/route_config.dart';main(){runApp(MaterialApp(title: "dynamic router",debugShowCheckedModeBanner: false,theme: ThemeData(primarySwatch: Colors.blue),// home: const StaticRouterPage(), //home和 initialRoute不能同时存在，否则会报错initialRoute: RouteConfig.initRoute,routes: RouteConfig.routes,onGenerateRoute: RouteConfig.onGenerateRoute,));}

路由使用

import 'package:flutter/material.dart';
import 'package:ichat/routers/pages/news_page.dart';
import 'package:ichat/routers/pages/person_page.dart';
import 'package:ichat/routers/pages/search_page.dart';class StaticRouterPage extends StatefulWidget {const StaticRouterPage({super.key});@overrideState<StaticRouterPage> createState() => _StaticRouterPageState();
}class _StaticRouterPageState extends State<StaticRouterPage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("路由"),),body: Container(child: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Row(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [ElevatedButton(onPressed: () {Navigator.of(context).push(MaterialPageRoute(builder: (context) => const SearchPage(),));},child: Text("搜索")),SizedBox(width: 20,),ElevatedButton(onPressed: () {Navigator.of(context).push(MaterialPageRoute(builder: (context) => const PersonPage(),));},child: Text("我的")),SizedBox(width: 20,),ElevatedButton(onPressed: () {Navigator.of(context).push(MaterialPageRoute(builder: (context) => const NewsPage(title: "国际小新闻",newsId: 20),));},child: Text("新闻")),]),SizedBox(height: 20,),Row(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [ElevatedButton(onPressed: () {Navigator.of(context).pushNamed("/search");},child: Text("搜索")),SizedBox(width: 20,),ElevatedButton(onPressed: () {Navigator.of(context).pushNamed("/form",arguments: {"key1":"value1","key2":"value2",});},child: Text("form")),SizedBox(width: 20,),ElevatedButton(onPressed: () {Navigator.pushNamed(context,"/person");},child: Text("我的")),// SizedBox(width: 20,),// ElevatedButton(//     onPressed: () {//       Navigator.of(context).push(MaterialPageRoute(//         builder: (context) => const NewsPage(title: "国际小新闻",newsId: 20),//       ));//     },//     child: Text("新闻")),]),]))));}
}

路由使用的几种方式

1、push不带参数

Navigator.of(context).push(MaterialPageRoute(builder: (context) => const PersonPage(),));

2、push带参数

Navigator.of(context).push(MaterialPageRoute(builder: (context) => const NewsPage(title: "国际小新闻",newsId: 20),));

3、通过命名路由配置pushNamed

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

4、 通过命名路由配置带参数pushNamed

Navigator.of(context).pushNamed("/form",arguments: {"key1":"value1","key2":"value2",
});

5、路由返回

Navigator.of(context).pop()

6、pushReplacementNamed

Navigator.of(context).pushReplacementNamed("/search");