現(xiàn)況
在使用Flutter中Image控件加載本地圖片時蛤虐，我們一般使用如下：
// 圖片資源放在"assets/images"目錄下.
Image.asset("assets/images/muma.png"),
那么問題就來了党饮，這樣使用可能會出現(xiàn)一些問題。
- 問題1：如果目錄沒寫對驳庭，或者后面路徑修改了這里忘記修改了刑顺，就會導(dǎo)致圖片顯示錯誤。
- 問題2：如果開發(fā)人員誤刪除圖片資源饲常，編譯不會報錯蹲堂，會導(dǎo)致問題出現(xiàn)。
- 問題3：如果后面路徑需要更改贝淤，那么使用的地方都需要修改柒竞，修改起來特別的麻煩。
需求
- 方便使用圖片資源播聪，可以參考Android朽基。
- 圖片資源刪除后布隔，編譯報錯提示。防止圖片資源刪除導(dǎo)致程序問題踩晶。
- 設(shè)計一個腳本执泰，方便一鍵生成，方便易用渡蜻。
實現(xiàn)
解決方案1
在剛使用Flutter開發(fā)的時候就發(fā)現(xiàn)了這個問題，起初解決方案是這樣的计济。定義個類茸苇，提供返回圖片資源路徑。具體如下
class ImageUtils {
static String getImgPath(String name, {String format: 'png'}) {
return 'assets/images/$name.$format';
}
}
其實使用此方式可以解決問題1和問題3沦寂，修改路徑的話也只需要在此類中修改路徑即可学密。但是沒有解決問題2，如果開發(fā)人員勿刪還在使用的圖片資源時传藏，編譯是不會報錯的腻暮，運行也是沒有問題的，只有到使用此圖片資源的界面才會發(fā)現(xiàn)錯誤毯侦，導(dǎo)致bug出現(xiàn)哭靖。
解決方案2
我們可以參考android資源的使用方式，在Android中使用資源文件都是 R.id.xxxx來引用的侈离，那么我們是否也可以讓Flutter也類似這么使用呢试幽？思路是可行的。
思路
- 切換到圖片資源路徑卦碾，讀取目錄圖片資源铺坞。
- 創(chuàng)建一個R文件（r.dart），寫入一個R類洲胖，然后遍歷圖片資源济榨，在R文件中的R類里，定義靜態(tài)常量（可以使用圖片資源名+后綴名定義常量名绿映，方便用戶使用）賦值為圖片資源路徑擒滑。
- 使用是通過R.xxx即可。
通過這些思路绘梦，我們可以寫一個腳本橘忱，來實現(xiàn)這個效果。你可以選擇你擅長的腳本語言卸奉，shell或者py都是可以的钝诚。如果自己不擅長寫腳本可以通過chatgpt來實現(xiàn)，很簡單的榄棵，只要把自己的需求告訴他就可以了凝颇。這里我選擇shell來實現(xiàn)潘拱。
具體實現(xiàn)
- 步驟1：首先創(chuàng)建一個文件res_build.sh，內(nèi)容如下
#!/usr/bin/env bash
# 定義資源目錄和輸出目錄
resourcesDir="assets/images"
outputDir="lib"
# 切換到資源目錄拧略，獲取資源數(shù)量和數(shù)據(jù)
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
# 創(chuàng)建資源r文件
progress=1
# 刪除r文件
rm -f r.dart
# 類名寫入r文件
echo 'class R {' >>r.dart
# 循環(huán)申明常量寫入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
注意：這里是拿我的flutter_xy項目來測試實現(xiàn)的芦岂。所以大家可以按照自己的項目情況修改。
步驟2：添加或刪除圖片后垫蛆，都需要執(zhí)行res_build.sh腳本文件
注：如果提示bash: ./res_build.sh: Permission denied禽最，可以執(zhí)行 chmod +x res_build.sh 授權(quán)。步驟3：執(zhí)行步驟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';
}
- 步驟4：在需要使用圖片資源的地方袱饭，直接使用R.xxx即可川无。
注意：每次更新圖片時，不管是新增還是刪除圖片虑乖，都需要執(zhí)行腳本更新R文件即可懦趋。如果刪除了圖片，更新腳本后疹味，原來使用的地方會編譯報錯仅叫，這樣開發(fā)人員就知道了，避免了bug產(chǎn)生糙捺。
