路由配置文件
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});
@override
State<StaticRouterPage> createState() => _StaticRouterPageState();
}
class _StaticRouterPageState extends State<StaticRouterPage> {
@override
Widget 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");