Flutter资源生成插件sresources_generator的使用

Flutter资源生成插件sresources_generator的使用

sresources_generator 是一个用于生成颜色、图片、语言文本等资源的插件。它能够与 GetX 库集成。

1、图片文件：

将图片文件放入项目根目录下的 assets/image/(dark|light) 文件夹中，其中 dark 和 light 分别代表两种主题。你可以添加更多的主题文件夹，并且文件名可以自定义。

注意，需要在 pubspec.yaml 中添加子文件夹路径，否则这些子文件夹不会被编译到包中。

每个主题中的图片文件名应该相同。

如果特定主题文件夹中不存在某个图片文件，则会自动使用默认主题文件夹中的版本（配置在 pubspec.yaml 中）。

如果没有在 pubspec.yaml 中配置默认图片文件夹，生成器将使用第一个文件夹的名字作为默认值。

示例：

假设你有两个主题文件夹 dark 和 light，并且它们都有一个名为 example.png 的图片文件。

flutter:
  assets:
    - assets/images/
    - assets/images/dark/
    - assets/images/light/

2、颜色资源：

在 assets 目录下创建一个名为 color 的子文件夹（也可以选择其他名字，但需要在 pubspec.yaml 中进行配置），然后创建 .xml 文件，文件名最好根据你的主题值命名（如图像文件夹下的 dark 或 light 文件夹）。

然后，可以在 .xml 文件中添加颜色，格式类似于 Android 颜色 XML 格式。

如果特定颜色 XML 文件中不存在某个颜色，则会自动使用默认主题 XML 文件中的版本（配置在 pubspec.yaml 中）。

可以使用 @colorName 来引用另一个存在的颜色，如果目标颜色未找到，则该颜色不会添加到生成的文件中。

如果没有在 pubspec.yaml 中配置默认颜色文件，生成器将使用第一个文件的名字作为默认值。

示例：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="white">#FFFFFF</color>
    <color name="black">#000000</color>
    <color name="gray_70">@black</color>
    <color name="gray_70">#EEEEEE</color>
    <color name="gray_410">#979797</color>
    <color name="crimson_red" type="material">#CF2A2A</color>
    <color name="yellow_ocher" type="material material-accent">#DF9527</color>
</resources>

3、文本资源

1). 对于 GetX：

语言文本内容如下：

@AppTextsSource()
Map<String, String> localeZH_CN = {
    "hello_blank_fragment": "简中Hello blank fragment",
    "hello_blank_fragment2": r'"简中Hello blank fragment"',
    "hello_blank_fragment3": "简中Hello blank\n, fragment",
    "hello_blank_fragment4": '简中Hello blank\n, fragment',
    "hello_blank_fragment1": "简中Hello@{test1} blank @{test2} fragment",
    "hello_blank_fragment5": '''简中Hello blank fragment5''',
    "hello_blank_fragment6": r'''简中Hello blank 'fragment6''',
    "hello_blank_fragment7": r'''简中Hello
    blank ' "
    test @{name}
    f'ragment''',
    "hello_blank_fragment9": '简中Hello blank, @name fragment9',
    "hello_blank_fragment10": r'简中Hello blank, @{test}fragment10',
    "hello_blank_fragment11": """简中Hello
    blank ; ' "
    fragment""",
};

@AppTextsSource() 用于标记此映射以供生成使用，也可以通过将此文件的路径添加到 pubspec.yaml 中来指定。

@{test1} 及其他类似格式的字符串（@{...}）是可以替换为实际值的模式，在生成后，test1 将成为文本获取函数的参数。

4、路由资源

1). 对于 GetX：

在页面类上添加注解，例如：

@AppRouteGet(path: '/sresdemo/routeTestPage', name: 'routeTest', transition: GetTransition.rightToLeft)

name 将用作此路由字段的名称，而 transition 是根据 GetX 显示页面时的动画效果。

生成后，你会得到一个类，类似于：

class TestRoutes {
  TestRoutes._();

  static const TextTest = "/sresdemo/textTestPage";
  static const routeTest = "/sresdemo/routeTestPage";
  static const themeTestPage = "/sresdemo/themeTest";

  static final pages = [
    GetPage(name: TextTest, page: () => const TextTestPage()),
    GetPage(
      name: routeTest,
      page: () => const RouteTestPage(),
      transition: Transition.rightToLeft,
    ),
    GetPage(name: themeTestPage, page: () => ThemeTestPage()),
  ];
}

TestRoutes 是在 pubspec.yaml 中配置的名称。

在项目 pubspec.yaml 中的配置

dependencies:
  sresources_generator: x.x.x

// 可选配置
sresources:
  output: lib/resources/ // 输出文件夹

  colors:
    enabled: true // 启用生成器
    path: assets/color/ // 颜色 XML 文件夹路径
    default: 0 // 默认主题的颜色 XML 文件，注意每个颜色 XML 文件应命名为主题值
    name: AppColors // 类名

  images:
    enabled: true // 启用生成器
    path: assets/images/ // 图片文件夹（父）路径
    default: 0 // 默认主题的图片文件夹，注意每个文件夹应命名为主题值
    name: AppImagess // 类名

  // 没有实现
  languages:
    enabled: true // 启用生成器
    name: AppTexts // 类名

  languages_get: // GetX 库风格
    enabled: true // 启用生成器（与 languages 配置相反）
    name: AppTexts // 类名
    transition: Transition.rightToLeft // 默认显示动画

  // 正在编写中...
  routes_get: // GetX 库风格页面路由
    enabled: true // 启用生成器
    name: AppRoutes // 类名

flutter:
  assets:
    - assets/images/
    - assets/images/0/  # 主题 0 图片文件夹
    - assets/images/1/  # 主题 1 图片文件夹

exclude:
  - assets/color/  # 排除颜色资源 XML 文件（不添加到构建包中）