根组件配置
应用入口配置:
使用 GetMaterialApp 作为应用的根组件,它是 MaterialApp 的增强版本,提供了路由管理等额外功能。
初始路由设置:
通过 initialRoute 参数指定了应用启动时加载的初始页面为 Routes.homePage,这通常是一个字符串常量,定义在 routes.dart 文件中。
路由表配置:
getPages 参数接收一个包含所有页面路由映射的列表 Routes.routePages,用于支持命名路由和按需加载页面。
完整代码
void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget 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;
}