Flutter响应式导航栏插件responsive_nav_barx的使用

本插件为Flutter提供了适应不同设备类型的响应式导航栏。在移动设备上，导航栏位于底部；在平板设备上，导航栏位于侧面；在Web应用上，导航栏位于顶部。该插件还集成了GoRouter来管理导航。

特性

• 针对不同设备类型的自适应导航栏
• 集成GoRouter进行导航管理
• 响应式设计

开始使用

要开始使用此项目，请克隆仓库并运行以下命令：

flutter pub get
flutter run

依赖项

• Flutter
• GoRouter

许可证

该项目采用MIT许可证。

完整示例代码

以下是完整的示例代码，展示了如何在Flutter应用中使用responsive_nav_barx插件和GoRouter进行导航管理。

// `go_router`路由配置
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用MaterialApp.router初始化应用
    return MaterialApp.router(
      title: 'MyApp',
      theme: baseTheme(brightness: Brightness.light),
      darkTheme: baseTheme(brightness: Brightness.dark),
      themeMode: ThemeMode.system,
      routerConfig: router(context),
    );
  }

  // 定义路由配置
  GoRouter router(BuildContext context) {
    // 定义路由列表
    List<RouteBase> routes = [
      // 登录页面路由
      GoRoute(
        path: '/${LoginView.path}',
        builder: (_, __) => const LoginView(),
      ),
      // 状态分支路由，用于处理多个导航壳
      StatefulShellRoute.indexedStack(
        branches: [
          // 导航壳分支
          StatefulShellBranch(
            routes: [
              // 主页路由
              GoRoute(
                path: '/${Home.path}',
                builder: (_, __) => const Home(),
              ),
            ],
          ),
          StatefulShellBranch(
            routes: [
              // 个人资料页面路由
              GoRoute(
                path: '/${Profile.path}',
                builder: (_, __) => const Profile(),
              ),
            ],
          ),
          StatefulShellBranch(
            routes: [
              // 设置页面路由
              GoRoute(
                path: '/${Settings.path}',
                builder: (_, __) => const Settings(),
              ),
            ],
          ),
        ],
        // 构建响应式导航栏
        builder: (_, __, navigationShell) => ResponsiveNavigationBar(
          navigationShell: navigationShell,
          barButtons: [
            // 导航栏按钮配置
            BarItem(icon: const Icon(Icons.home), label: 'Home'),
            BarItem(icon: const Icon(Icons.person), label: 'Profile'),
            BarItem(icon: const Icon(Icons.settings), label: 'Settings')
          ],
        ),
      ),
    ];

    // 获取登录视图模型
    final viewModel = context.watch<LoginViewModel>();

    // 返回GoRouter实例
    return GoRouter(
      initialLocation: '/${LoginView.path}',
      routes: routes,
      refreshListenable: viewModel,
      // 重定向逻辑
      redirect: (context, state) {
        if (state.uri.toString() == '/${LoginView.path}' && viewModel.loggedIn) {
          return '/${Home.path}';
        } else if (viewModel.loggedIn == false) {
          return '/${LoginView.path}';
        }
        return null;
      },
    );
  }
}