Flutter如何正确使用图片资源

现况

在使用Flutter中Image控件加载本地图片时，我们一般使用如下：

// 图片资源放在"assets/images"目录下.
Image.asset("assets/images/muma.png"),
1
2

那么问题就来了，这样使用可能会出现一些问题。

• 问题1：如果目录没写对，或者后面路径修改了这里忘记修改了，就会导致图片显示错误。
• 问题2：如果开发人员误删除图片资源，编译不会报错，会导致问题出现。
• 问题3：如果后面路径需要更改，那么使用的地方都需要修改，修改起来特别的麻烦。

需求

• 方便使用图片资源，可以参考Android。
• 图片资源删除后，编译报错提示。防止图片资源删除导致程序问题。
• 设计一个脚本，方便一键生成，方便易用。

实现

解决方案1

在刚使用Flutter开发的时候就发现了这个问题，起初解决方案是这样的。定义个类，提供返回图片资源路径。具体如下

class ImageUtils {
  static String getImgPath(String name, {String format: 'png'}) {
    return 'assets/images/$name.$format';
  }
}
1
2
3
4
5

其实使用此方式可以解决问题1和问题3，修改路径的话也只需要在此类中修改路径即可。但是没有解决问题2，如果开发人员勿删还在使用的图片资源时，编译是不会报错的，运行也是没有问题的，只有到使用此图片资源的界面才会发现错误，导致bug出现。

解决方案2

我们可以参考android资源的使用方式，在Android中使用资源文件都是 R.id.xxxx来引用的，那么我们是否也可以让Flutter也类似这么使用呢？思路是可行的。

思路

• 切换到图片资源路径，读取目录图片资源。
• 创建一个R文件（r.dart），写入一个R类，然后遍历图片资源，在R文件中的R类里，定义静态常量（可以使用图片资源名+后缀名定义常量名，方便用户使用）赋值为图片资源路径。
• 使用是通过R.xxx即可。

通过这些思路，我们可以写一个脚本，来实现这个效果。你可以选择你擅长的脚本语言，shell或者py都是可以的。如果自己不擅长写脚本可以通过chatgpt来实现，很简单的，只要把自己的需求告诉他就可以了。这里我选择shell来实现。

具体实现

• 步骤1：首先创建一个文件res_build.sh，内容如下

#!/usr/bin/env bash

# 定义资源目录和输出目录
resourcesDir="assets/images"
outputDir="lib"

# 切换到资源目录，获取资源数量和数据
cd "$resourcesDir" || exit
resCount=$(find ./* | wc -l | sed -e 's/^[[:space:]]*//')
resources=$(ls)

# 切换到输出目录
cd ../..
cd "$outputDir" || exit

# 遍历资源文件并汇总资源名集合
declare -a resNames
for resource in $resources; do
  resNames+=("$resource")
done

# 创建资源r文件
progress=1
# 删除r文件
rm -f r.dart
# 类名写入r文件
echo 'class R {' >>r.dart
# 循环申明常量写入r文件
for resName in "${resNames[@]}"; do
  nameSlices=($(echo "$resName" | tr '_' ' ' | tr '.' ' '))
  str=""
  for slice in "${nameSlices[@]}"; do
    str+="${slice}_"
  done
  resConstant="${str%?}"
  echo -ne "${progress}/${resCount}:${resName} \r"
  printf "  static const String %s = '%s/%s';\n" "$resConstant" "$resourcesDir" "$resName" >>r.dart
  progress=$((progress + 1))
done
echo '}' >>r.dart

# 自动格式化 Dart 代码文件
dart format --fix r.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

注意：这里是拿我的flutter_xy项目来测试实现的。所以大家可以按照自己的项目情况修改。

• 步骤2：添加或删除图片后，都需要执行res_build.sh脚本文件
  注：如果提示bash: ./res_build.sh: Permission denied，可以执行 chmod +x res_build.sh 授权。

• 步骤3：执行步骤2后会生成一个R文件

class R {
  static const String fudai_png = 'assets/images/fudai.png';
  static const String fuli1_png = 'assets/images/fuli1.png';
  static const String fuli2_png = 'assets/images/fuli2.png';
  static const String fuli3_png = 'assets/images/fuli3.png';
  static const String img1_jpg = 'assets/images/img1.jpg';
  static const String img2_jpg = 'assets/images/img2.jpg';
  static const String img3_jpg = 'assets/images/img3.jpg';
  static const String img4_jpg = 'assets/images/img4.jpg';
  static const String muma_png = 'assets/images/muma.png';
}
1
2
3
4
5
6
7
8
9
10
11

• 步骤4：在需要使用图片资源的地方，直接使用R.xxx即可。

注意：每次更新图片时，不管是新增还是删除图片，都需要执行脚本更新R文件即可。如果删除了图片，更新脚本后，原来使用的地方会编译报错，这样开发人员就知道了，避免了bug产生。