【Flutter】 Getx动态路由管理方案

根组件配置

应用入口配置：

使用 GetMaterialApp 作为应用的根组件，它是 MaterialApp 的增强版本，提供了路由管理等额外功能。

初始路由设置：

通过 initialRoute 参数指定了应用启动时加载的初始页面为 Routes.homePage，这通常是一个字符串常量，定义在 routes.dart 文件中。

路由表配置：

getPages 参数接收一个包含所有页面路由映射的列表 Routes.routePages，用于支持命名路由和按需加载页面。

完整代码

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp( // 使用GetMaterialApp作为根组件
      initialRoute: Routes.homePage, // 初始路由设置
      getPages: Routes.routePages,  // 路由表设置
      title: 'Flutter Demo',
      theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: true),
      home: HomePage(),
    );
  }
}

路由树结构

这次展示的路由树结构，主页和文章列表主页同级，文章详情则作为文章列表主页的子路由

路由配置

单路由名：

单页面路由自身的路由名，其中不能有父路由或子路由，采用私有变量设置，防止暴露给外部使用。外部跳转时将使用父路由或子路由复合组成的路由名。

  static const String _homePage = "/home_page";
  static const String _articlesPage = "/articles_page";
  static const String _detailPage = "/detail_page";

路由页面配置：

每一个GetPage代表一个单页面，需要参数name和page，如果非初始路由，需要加上binding参数，page和binding参数在你创建完一个Getx页面后就会有，可以使用“Getx”插件自动生成。

注意：路由页面配置GetPage里面都是单路由名。

      GetPage(
        name: _detailPage,
        page: () => DetailPage(),
        binding: DetailBinding(),
      )

嵌套路由的子路由则写在**children **里面

    // 文章主页
    GetPage(name: _articlesPage, page: () => ArticlesPage(), binding: ArticlesBinding(), children: [
      // 文章详情页
      GetPage(
        name: _detailPage,
        page: () => DetailPage(),
        binding: DetailBinding(),
      )
    ]),

组合路由名：

当我们使用Get.to或Get.toName诸如此类跳转路由方法时必须要填一个路由名，如果是同级路由之间跳转，我们就直接填目的路由页的路由名就行。如从home页面去articiles页面，在home页面用下面的方法就能直接跳。

    Get.toNamed('/articles_page');

但如果是嵌套路由跳转，跳转到子路由时，则需要加上父路由的路由名。如从articles页面跳到detail页面

 Get.toNamed('/articles_page/detail_page');

所以我们把单路由名隐藏起来，另外再使用get方法把真正的组合路由名暴露出去。

  /// 路由名
  // 主页
  static String get homePage => _homePage;

  // 文章主页
  static String get articlesPage => _articlesPage;

  // 文章主页/详情页
  static String get detailPage => _articlesPage + _detailPage;

后面我们在业务里使用就可以直接这样用

Get.toNamed(Routes.detailPage);

完整代码

abstract class Routes {
  /// 单路由名
  static const String _homePage = "/home_page";
  static const String _articlesPage = "/articles_page";
  static const String _detailPage = "/detail_page";

  /// 配置
  static final routePages = [
    // 主页
    GetPage(name: _homePage, page: () => HomePage()),
    // 文章主页
    GetPage(name: _articlesPage, page: () => ArticlesPage(), binding: ArticlesBinding(), children: [
      // 文章详情页
      GetPage(
        name: _detailPage,
        page: () => DetailPage(),
        binding: DetailBinding(),
      )
    ]),
  ];

  /// 路由名
  // 主页
  static String get homePage => _homePage;

  // 文章主页
  static String get articlesPage => _articlesPage;

  // 文章主页/详情页
  static String get detailPage => _articlesPage + _detailPage;
}