flutter路由配置
创始人
2024-11-14 13:35:05

路由配置文件

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 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 createState() => _StaticRouterPageState(); }  class _StaticRouterPageState extends State {   @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");

相关内容

热门资讯

裸辞做“一人公司”,我后悔了 去年这个时候,一位以色列程序员正在东南亚旅行。他顺手把一个在脑子里转了很久的想法做成了产品,一个让任...
南京建成国内首个Pre-6G试... 4月21日,2026全球6G技术与产业生态大会在南京开幕。全息互动技术展台前,一名远在北京的工作人员...
超梵求职受邀参加“2025抖音... 超梵求职受邀参加“2025抖音巨量引擎成人教育行业生态大会”,探讨分享优质内容传播,服务万千学员。 ...
摩托罗拉Razr 2026(R... IT之家 4 月 22 日消息,摩托罗拉宣布新一代 Razr 折叠手机将于 4 月 29 日在美国发...
库克卸任,特纳斯领航:苹果新纪... 苹果首席执行官蒂姆·库克将卸任,硬件工程主管约翰·特纳斯将接任,苹果公司今天宣布此事。 库克将在夏季...