让 Flutter 资源管理更智能

相关阅读

• Flutter Assets 生成工具

前言

在 Flutter 开发中，资源文件的管理一直是影响开发效率和代码质量的重要环节。手动维护资源路径不仅容易出错，还会在团队协作时产生不一致的代码风格。Assets Generator 正是为解决这些痛点而生的自动化工具。

格式化宽度控制

功能简介

支持从 analysis_options.yaml 文件中读取 page_width 配置，用于控制代码格式化器的页面宽度。

使用场景

在团队协作中，不同项目可能对代码行宽有不同的要求。此功能允许您在项目的分析配置文件中统一定义格式化宽度，确保生成的代码符合项目的编码规范。

配置示例

在您的 analysis_options.yaml 中添加：

formatter:
  page_width: 120

生成的资源文件将遵循指定的页面宽度进行格式化。

---

workspace 根包指定功能

功能简介

新增 root-package 参数，允许通过包名指定哪个包应被视为工作空间的根项目。

使用场景

在包含多个 Flutter 包的工作空间 workspace 中，您可能需要明确指定主项目包。 由于

PackageNode.isRoot 不再工作，我们需要指定一下 root 。

使用方法

dart run assets_generator --root-package=your_package_name

或在配置文件 assets_generator_arguments 中添加：

--root-package=your_package_name

---

键名样式路径

功能简介

新增 use-key-name 参数，可选择是否使用 keyName 风格的资源路径格式（如 packages/{package}/...）。官方的 AssetImage 最终是通过 keyName 进行加载资源的。

  const ExactAssetImage(
    this.assetName, {
    this.scale = 1.0,
    this.bundle,
    this.package,
  });

  /// The name of the asset.
  final String assetName;

  /// The key to use to obtain the resource from the [bundle]. This is the
  /// argument passed to [AssetBundle.load].
  String get keyName => package == null ? assetName : 'packages/$package/$assetName';
 }
  
  const AssetImage(
    this.assetName, {
    this.bundle,
    this.package,
  });

  /// The name of the main asset from the set of images to choose from. See the
  /// documentation for the [AssetImage] class itself for details.
  final String assetName;

  /// The name used to generate the key to obtain the asset. For local assets
  /// this is [assetName], and for assets from packages the [assetName] is
  /// prefixed `packages/<package_name>/`.
  String get keyName => package == null ? assetName : 'packages/$package/$assetName';
}

使用场景

不同的项目可能对资源路径的命名风格有不同的偏好：

• 传统方式 : 对于有新手的项目，这个方式其实更佳，keyName 容易让新手忘记 package 的存在。
• keyName 风格: 希望能简单设置参数的情况。

使用方法

启用 keyName 风格：

dart run assets_generator --use-key-name

或在配置文件中添加：

--use-key-name

效果对比

默认方式:

static const String package = 'my_package';
static const String image = 'assets/images/logo.png';

keyName 风格:

static const String image = 'packages/my_package/assets/images/logo.png';

---

支持命令

全部的命令如下:

-h, --[no-]help            帮助信息
-p, --path                 Flutter 项目根路径
                           (默认值为 ".")
-f, --folder               资源文件的根目录
                           (默认值为 "assets")
-w, --[no-]watch           是否持续监听资源文件的变化
                           (默认开启)
-t, --type                 pubsepec.yaml 中的类型
                           "d" 表示目录 "- assets/images/"
                           "f" 表示文件 "- assets/images/xxx.jpg"
                           (默认值为 "d")
-s, --[no-]save            是否将参数保存到本地
                           如果不带任何参数运行 "agen"，将执行本地保存的参数
-o, --out                  常量类的输出路径
                           (默认值为 "lib")
-r, --rule                 资源常量的命名规则
                           "lwu"(lowercase_with_underscores) : "assets_images_xxx_jpg"
                           "uwu"(uppercase_with_underscores) : "ASSETS_IMAGES_XXX_JPG"
                           "lcc"(lowerCamelCase)             : "assetsImagesXxxJpg"
                           (默认值为 "lwu")
-c, --class                常量类的名称
                           (默认值为 "Assets")
    --const-ignore         用于忽略某些常量的正则表达式
    --[no-]const-array     是否生成包含所有常量的数组
    --folder-ignore        用于忽略某些文件夹的正则表达式
    --[no-]package         是否为 package，如果为 true，将在 Assets 类中生成包名
    --[no-]class-prefix    是否使用包名作为常量类名称的前缀
    --[no-]g-suffix        生成的文件是否以 .g 结尾
    --package-ignore       用于忽略某些包的正则表达式
    --[no-]use-key-name    是否使用 keyName 风格 (packages/{package}/...) 的资源路径
    --root-package         指定哪个包应被视为根项目（通过包名）

结语

实际上，keyName 风格，很早就有人提过了，但是我觉得作为一个工具，还是尽量不要魔法化，以官方的方式呈现才是最佳。因为一旦官方修改了 keyName 的格式，我们又没有感知到的话，将造成重大的影响。

当然，工具是给人使用的，使用选择权在用户，我可以不用，但是你必须要有，这才是往往用户想要的。

欢迎加入Flutter Candies，一起生产可爱的Flutter小糖果

最最后放上Flutter Candies全家桶，真香。