Flutter自定义布局插件mod_layout_one的使用

ModLayoutOne 是一个全面的 Flutter 包，用于构建响应式布局，并内置了主题、国际化和可重用组件。

特性

• 响应式侧边栏导航
• 支持自定义的亮/暗主题
• 多语言支持（i18n）
• 网格系统以实现响应式布局
• 可定制的卡片
• 用户配置文件管理
• 模块化的页眉和页脚组件
• 响应式网格系统与断点

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  mod_layout_one: ^1.0.0

基本使用

首先初始化 ModLayout 并设置配置参数：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final prefs = await SharedPreferences.getInstance();

  await ModLayout.init(
    config: ModLayoutConfig(
      appTitle: 'My App',
      lightTheme: MyAppTheme.light,  // 自定义亮主题
      darkTheme: MyAppTheme.dark,    // 自定义暗主题
      menuItems: [
        MenuItem(
          title: 'home'.tr,
          icon: Icons.home,
          route: '/home',
        ),
        MenuItem(
          title: 'settings'.tr,
          icon: Icons.settings,
          route: '/settings',
        ),
      ],
      customTranslations: AppTranslations().keys,
    ),
    prefs: prefs,
  );

  runApp(const MyApp());
}

高级功能

自定义主题集成

创建自定义主题类：

class MyAppTheme {
  static final light = ThemeData(
    brightness: Brightness.light,
    // 自定义亮主题配置
  );

  static final dark = ThemeData(
    brightness: Brightness.dark,
    // 自定义暗主题配置
  );
}

用户配置文件集成

使用 ModBaseLayout 组件来展示用户配置文件：

ModBaseLayout(
  title: 'My App',
  appBarActions: [
    ProfileWidget(
      showFullProfile: true,
    )
  ],
  body: YourContent(),
);

响应式网格系统

使用 ModContainer 和 ModRow 来创建响应式网格：

ModContainer(
  child: ModRow(
    columns: [
      ModColumn(
        columnSizes: {
          ScreenSize.xs: ColumnSize.col12,
          ScreenSize.md: ColumnSize.col4,
        },
        child: YourColumnContent(),
      ),
      // 添加更多列
    ],
  ),
);

自定义翻译

创建自定义翻译类：

class AppTranslations extends BaseTranslations {
  @override
  Map<String, Map<String, String>> get keys {
    final baseKeys = super.keys;

    final customKeys = {
      'en_US': {
        'custom_key': 'Custom Value',
      },
      'pt_BR': {
        'custom_key': 'Valor Personalizado',
      },
      // 添加更多语言
    };

    // 合并翻译
    for (final locale in baseKeys.keys) {
      baseKeys[locale]!.addAll(customKeys[locale] ?? {});
    }

    return baseKeys;
  }
}

组件

ModCard

创建带有标题、内容和页脚的卡片组件：

ModCard(
  header: Text('Card Title'),
  content: YourContent(),
  footer: YourFooter(),
  isAccordion: true,
);

ModBaseLayout

创建包含页眉、页脚、菜单项等的页面布局：

ModBaseLayout(
  title: 'Page Title',
  logo: YourLogo(),               // 可选
  menuItems: yourMenuItems,
  body: YourPageContent(),
  footer: YourFooterWidget(),     // 可选
  sidebarBackgroundColor: color,  // 可选
);