Flutter 路由管理与实战应用
对于Flutter路由基本概念及用法不了解的请学习Flutter Navigator路由传参_WEB前端李志杰的博客-CSDN博客_navigator传参。
Flutter中的默认导航分成两种,一种是命名的路由,一种是构建路由。在实际开发项目中我们大多数情况下都是使用命名的路由
,关于路由的管理我们可以分为两部分,一部分是路由表的管理,另一部分是路由守卫管理。
一、路由表管理
我们可以在lib
下新建一个routers/index.dart
文件管理我们的路由表。
定义一个routeList集合,其类型应该为Map
来存放我们的路由表。
import 'package:cyber_security/view/login/index.dart';import 'package:cyber_security/view/main/index.dart';import 'package:cyber_security/view/message_details/index.dart';import 'package:cyber_security/view/message_list/index.dart';import 'package:cyber_security/view/not_found/index.dart';import 'package:flutter/material.dart';Map routeList = { "notFound": (content) => const NotFound(), "login": (content) => const LoginPage(), "main": (content) => const MainPage(), "messageList": (content) => const MessageList(), "messageDetails": (content) => const MessageDetails(),};
二、路由守卫管理
class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), /// 默认路由 initialRoute: 'main', /// 路由拦截器 onGenerateRoute: (RouteSettings settings) { final name = settings.name; var builder = routeList[name]; // 如果路由表中未定义,跳转到未定义路由页面 builder ??= (content) => const NotFou(); // 动态构建route return MaterialPageRoute( builder: builder, settings: settings, ); }, ); }}
三、路由跳转实现
可以通过Navigator.pushNamed
或者Navigator.popAndPushNamed
实现路由跳转,这两个方法分别接收三个参数分别为:上下文对象、跳转的目标路由别名、传递的参数(非必传)。
Navigator.pushNamed(context, 'messageList', arguments: { // 传递的参数 'messageInfo': widget._messageInfo});
四、往期内容已全部收录在专栏中:
Flutter专栏_WEB前端李志杰的博客-CSDN博客
Vue专栏_WEB前端李志杰的博客-CSDN博客