Flutter图片资源管理插件image_res的使用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter图片资源管理插件image_res的使用

插件介绍

image_res 是一个命令行工具，它根据文件名中的分辨率指示符自动将图像文件分组到适当的文件夹中。换句话说，当你在Flutter项目中复制粘贴你的图像资源并运行此插件时，它会查看所有图像的文件名，并自动将它们移动到适当的分辨率文件夹中。

现在支持空安全（null-safety）。

例如，如果你将图像放在资产文件夹中如下所示：

assets/
+-- images/
|   +-- icons/
|   |   +-- search.png
|   |   +-- search@2x.png
|   |   +-- search@3x.png
|   +-- logo.png
|   +-- logo@2x.png
|   +-- logo@3x.png

运行此插件后（带有项目根目录中的配置文件），包含分辨率指示符的图像文件将被移动如下：

assets/
+-- images/
|   +-- 2.0x/
|   |   +-- logo.png
|   +-- 3.0x/
|   |   +-- logo.png
|   +-- icons/
|   |   +-- 2.0x/
|   |   |   +-- search.png
|   |   +-- 3.0x/
|   |   |   +-- search.png
|   |   +-- search.png
|   +-- logo.png

开始使用

步骤一：安装 image_res 插件

在 pubspec.yaml 文件的 dev_dependencies 部分添加 image_res 插件并运行 flutter packages get：

dev_dependencies: 
    image_res: ^0.3.0

步骤二：创建配置文件

在项目的根目录中创建一个新的配置文件 image_res.yaml：

# 组织者递归地查找 `asset_folder_path` 中的所有文件。（相对于项目的根目录）
asset_folder_path: assets/images/

# 组织者只安排扩展名在 `file_extensions` 列表中的文件。
file_extensions:
    - .jpg
    - .png

# 组织者使用 `resolution_indicator` 从文件名中提取分辨率部分。
# `resolution_indicator` 必须符合以下模式：
#   '[start_token]{N}[end_token]' 其中
#       - [start_token]: 表示分辨率部分起点的标记。
#       - [end_token]: 表示分辨率部分终点的标记。
#
# 有效的 `resolution_indicator` 及其可以检测的示例文件名如下。
#   '@{N}x': logo@2x.png, logo@2.0x.png, @2.0xlogo.png
#   '--{N}#': logo--2#.png, logo--2.0#.png, --2.0#logo.png
resolution_indicator: '@{N}x'

# 如果 `allow_overwrite` 为 true 并且目标文件夹中已存在相同的文件名，则组织者将替换它。
allow_overwrite: false

步骤三：运行插件

在项目的根目录中运行插件。参见可用CLI命令：

flutter packages pub run image_res:main <command>

注意：这个插件可以通过 flutter packages pub global activate image_res 全局安装。你可以通过输入 imgres 来运行它，而不是输入上面的长命令。

如果你遇到 dart: command not found 的问题，请先单独安装 Dart 然后再尝试运行。

可用CLI命令

命令 描述
[blank] 运行插件一次
run 运行插件一次
watch 运行插件并监视变化

使用方法

  • 如果插件是全局安装的，通过以下命令运行它：
imgres <command>
  • 如果插件是在Flutter项目中本地安装的，通过以下命令运行它：
flutter packages pub run image_res:main <command>

完整示例Demo

假设我们有一个Flutter项目结构如下：

my_flutter_project/
+-- lib/
+-- assets/
|   +-- images/
|   |   +-- icons/
|   |   |   +-- search.png
|   |   |   +-- search@2x.png
|   |   |   +-- search@3x.png
|   |   +-- logo.png
|   |   +-- logo@2x.png
|   |   +-- logo@3x.png
+-- pubspec.yaml
+-- image_res.yaml

Step 1: 在 pubspec.yaml 中添加 image_res 插件

dev_dependencies: 
    image_res: ^0.3.0

Step 2: 创建 image_res.yaml 配置文件

asset_folder_path: assets/images/
file_extensions:
    - .jpg
    - .png
resolution_indicator: '@{N}x'
allow_overwrite: false

Step 3: 运行插件

在项目的根目录下运行以下命令：

flutter packages pub run image_res:main

或者如果插件是全局安装的：

imgres

结果

运行插件后，图像文件将会被重新组织到合适的分辨率文件夹中，结果如下：

assets/
+-- images/
|   +-- 2.0x/
|   |   +-- logo.png
|   +-- 3.0x/
|   |   +-- logo.png
|   +-- icons/
|   |   +-- 2.0x/
|   |   |   +-- search.png
|   |   +-- 3.0x/
|   |   |   +-- search.png
|   |   +-- search.png
|   +-- logo.png

更多关于Flutter图片资源管理插件image_res的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter图片资源管理插件image_res的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 image_res 插件来管理 Flutter 应用中的图片资源的示例。image_res 插件可以帮助你更方便地在 Flutter 应用中引用和管理本地图片资源。

首先，确保你已经在 pubspec.yaml 文件中添加了 image_res 依赖：

dependencies:
  flutter:
    sdk: flutter
  image_res: ^x.y.z  # 替换为最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，我们需要配置 image_res 插件。假设你有一个 assets 文件夹来存放你的图片资源。你可以在 pubspec.yaml 中这样配置：

flutter:
  assets:
    - assets/images/

然后，在你的项目根目录下创建一个 image_res.json 文件，用于定义图片资源的映射关系。例如：

{
  "images": {
    "logo": "assets/images/logo.png",
    "background": "assets/images/background.jpg"
  }
}

现在，让我们在 Flutter 应用中使用这些图片资源。首先，确保你已经导入了 image_res 插件：

import 'package:flutter/material.dart';
import 'package:image_res/image_res.dart';

然后，你可以在你的应用中加载这些图片。以下是一个简单的示例：

void main() {
  // 初始化ImageRes
  ImageRes.initialize('path/to/your/image_res.json');

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image Res Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 使用ImageRes获取图片资源
              Image.asset(ImageRes.get('images.logo')),
              SizedBox(height: 20),
              Image.asset(ImageRes.get('images.background')),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们首先调用了 ImageRes.initialize 方法来初始化插件，并传入 image_res.json 文件的路径。然后，在 MyApp 组件中，我们使用 Image.asset 和 ImageRes.get 方法来加载图片资源。

注意：

  • ImageRes.get('images.logo') 和 ImageRes.get('images.background') 分别返回 logo.png 和 background.jpg 图片的路径。
  • 确保 image_res.json 文件的路径是正确的，相对于项目根目录。

通过这种方式，你可以更方便地管理和引用 Flutter 应用中的图片资源。

回到顶部