Flutter导航布局插件nav_layouts_component的使用

Flutter导航布局插件nav_layouts_component的使用

布局结构

该插件提供了多种内置导航能力的布局组件。以下是这些布局组件的类图，展示了它们是如何堆叠来创建不同的布局和导航体验。

Splash Layout（启动布局）

classDiagram
  class RootLayout
  class RootState
  class RootSplashLayout
  class RootSplashState
  class Scaffold
  class NotificationScope

  RootLayout --> RootState
  RootState <|-- RootSplashState

  RootSplashLayout --> RootLayout
  RootLayout --> Scaffold
  RootSplashLayout --> RootSplashState
  Scaffold --> NotificationScope

Navigation Layout（导航布局）

classDiagram
  class RootLayout
  class RootState
  class RootNavLayout
  class NavLayout
  class Scaffold
  class NotificationScope

  RootLayout --> RootState

  RootNavLayout --> RootLayout
  RootLayout --> NavLayout
  NavLayout --> NotificationScope
  NotificationScope --> Scaffold

完整示例Demo

以下是一个完整的示例代码，演示如何在Flutter应用中使用nav_layouts_component插件。

import 'dart:io';
import 'dart:convert';
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:window_manager/window_manager.dart';
import 'package:logging/logging.dart';

import 'package:utilities_ab/logging/init_logging.dart';
import 'package:platform_utilities_component/platform_utilities.dart';

import 'package:app_framework_component/app_framework.dart' as app;
import 'package:nav_layouts_component/nav_layouts.dart' as nav;

import 'config/app_config.dart';
import 'features/test_feature.dart';
import 'features/devices_feature.dart';
import 'features/workflow_feature.dart';
import 'screens/home_page.dart';
import 'screens/nav_home_view_1.dart';
import 'screens/nav_home_view_2.dart';
import 'screens/nav_home_view_3.dart';

void main() async {
  initLogging(
    Level.ALL,
    logToConsole: true,
  );

  // 在桌面平台上，窗口的最小尺寸固定为240x400
  if (!AppPlatform.isWeb && !AppPlatform.isMobile) {
    WidgetsFlutterBinding.ensureInitialized();
    await windowManager.ensureInitialized();

    WindowManager.instance.setMinimumSize(AppConfig.minWindowSize);
    WindowManager.instance.setTitle(AppConfig.title);
  }

  // 创建并初始化特征注册表单例
  app.FeatureRegistry.intialize(featureConfigLoader);

  await TestFeature.register();
  await DevicesFeature.register();
  await WorkflowFeature.register();

  AppPlatform.init().then(
    (_) => runApp(
      nav.StatefulWrapper(
        child: MainApp(),
      ),
    ),
  );
}

class MainApp extends StatelessWidget {
  late final GoRouter _router;

  MainApp({super.key}) {
    _router = GoRouter(
      navigatorKey: nav.GlobalNavigator.key,
      initialLocation: '/',
      routes: [
        const HomePage().route(),
        NavHomeView1().route(),
        NavHomeView2().route(),
        const NavHomeView3().route(),
      ],
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    AppPlatform.initOnBuild(context);

    if (AppPlatform.isDesktop && Platform.isMacOS) {
      // 在macOS上，系统菜单是每个应用程序的一部分
      final List<PlatformMenuItem> menus = <PlatformMenuItem>[
        PlatformMenu(
          label: '', // 在macOS上，应用程序名称显示在菜单栏上
          menus: <PlatformMenuItem>[
            PlatformMenuItemGroup(
              members: <PlatformMenuItem>[
                PlatformMenuItem(
                  label: '关于',
                  onSelected: () {
                    showAboutDialog(
                      context: context,
                      applicationName: AppConfig.title,
                      applicationVersion: AppConfig.version,
                    );
                  },
                ),
              ],
            ),
            if (PlatformProvidedMenuItem.hasMenu(
                PlatformProvidedMenuItemType.quit))
              const PlatformProvidedMenuItem(
                  type: PlatformProvidedMenuItemType.quit),
          ],
        ),
      ];
      WidgetsBinding.instance.platformMenuDelegate.setMenus(menus);
    }

    return app.FeatureRegistry.instance().scope(
      context,
      child: MaterialApp.router(
        debugShowCheckedModeBanner: false,
        title: AppConfig.title,
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(
            seedColor: Colors.indigo,
          ),
          useMaterial3: false,
        ),
        darkTheme: ThemeData(
          colorScheme: ColorScheme.fromSeed(
            brightness: Brightness.dark,
            seedColor: Colors.indigo,
          ),
          useMaterial3: false,
        ),
        routerConfig: _router,
      ),
    );
  }
}

Future<Map<String, dynamic>> featureConfigLoader(
  String featureName,
) async {
  /// 从资产加载特征配置json
  return jsonDecode(
    await rootBundle.loadString('assets/${featureName}_feature.json'),
  );
}