Flutter 路由管理与实战应用

对于Flutter路由基本概念及用法不了解的请学习Flutter Navigator路由传参_WEB前端李志杰的博客-CSDN博客_navigator传参。

Flutter中的默认导航分成两种，一种是命名的路由，一种是构建路由。在实际开发项目中我们大多数情况下都是使用命名的路由，关于路由的管理我们可以分为两部分，一部分是路由表的管理，另一部分是路由守卫管理。

一、路由表管理

我们可以在lib下新建一个routers/index.dart文件管理我们的路由表。

定义一个routeList集合，其类型应该为Map<String, WidgetBuilder>来存放我们的路由表。

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<String, WidgetBuilder> 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博客