Flutter Getx GetRouterOutlet 的使用

32 min read
class HomeView extends GetView<HomeController> {
  const HomeView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetRouterOutlet.builder(
      builder: (context, delegate, currentRoute) {
        //This router outlet handles the appbar and the bottom navigation bar
        final currentLocation = currentRoute?.location;
        var currentIndex = 0;
        if (currentLocation?.startsWith(Routes.setting) == true) {
          currentIndex = 1;
        }
        return Scaffold(
          extendBody: true, //to make floating action button notch transparent
          body: GetRouterOutlet(
            initialRoute: Routes.task,
          ),

          bottomNavigationBar: StylishBottomBar(
            items: [
              AnimatedBarItems(
                  icon: const Icon(Icons.list),
                  selectedColor: Get.theme.primaryColor,
                  title: const Text('任务')),
              AnimatedBarItems(
                  icon: const Icon(Icons.settings),
                  selectedColor: Get.theme.primaryColor,
                  title: const Text('设置')),
            ],
            iconSize: 32,
            barAnimation: BarAnimation.fade,
            iconStyle: IconStyle.Default,
            hasNotch: true,
            opacity: 0.3,
            currentIndex: currentIndex,
            onTap: (index) {
              switch (index) {
                case 0:
                  delegate.toNamed(Routes.task);
                  break;
                case 1:
                  delegate.toNamed(Routes.setting);
                  break;
              }
            },
          ),
          floatingActionButton: FloatingActionButton(
              onPressed: () {
                /* Get.isDarkMode
                    ? {
                        Get.changeTheme(GopeedTheme.light),
                        Get.changeThemeMode(ThemeMode.light)
                      }
                    : {
                        Get.changeTheme(GopeedTheme.dark),
                        Get.changeThemeMode(ThemeMode.dark)
                      }; */
                Get.rootDelegate.toNamed(Routes.create);
              },
              child: const Icon(
                Icons.add,
              )),
          floatingActionButtonLocation:
              FloatingActionButtonLocation.centerDocked,
        );
      },
    );
  }
}

Build 参数

currentRoute: 当前路由信息

class GetNavConfig extends RouteInformation {
  final List<GetPage> currentTreeBranch;
  GetPage? get currentPage => currentTreeBranch.last;

  GetNavConfig({
    required this.currentTreeBranch,
    required String? location,
    required Object? state,
  }) : super(
          location: location,
          state: state,
        );

  GetNavConfig copyWith({
    List<GetPage>? currentTreeBranch,
    required String? location,
    required Object? state,
  }) {
    return GetNavConfig(
      currentTreeBranch: currentTreeBranch ?? this.currentTreeBranch,
      location: location ?? this.location,
      state: state ?? this.state,
    );
  }

delegate : Get代理对象,负责操作路由