阅读量:0
路由配置文件
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"); 