現(xiàn)況

在使用Flutter中Image控件加載本地圖片時(shí)，我們一般使用如下：

// 圖片資源放在"assets/images"目錄下.
Image.asset("assets/images/muma.png"),

那么問題就來了，這樣使用可能會出現(xiàn)一些問題。

• 問題1：如果目錄沒寫對，或者后面路徑修改了這里忘記修改了，就會導(dǎo)致圖片顯示錯(cuò)誤。
• 問題2：如果開發(fā)人員誤刪除圖片資源，編譯不會報(bào)錯(cuò)，會導(dǎo)致問題出現(xiàn)。
• 問題3：如果后面路徑需要更改，那么使用的地方都需要修改，修改起來特別的麻煩。

需求

• 方便使用圖片資源，可以參考Android。
• 圖片資源刪除后，編譯報(bào)錯(cuò)提示。防止圖片資源刪除導(dǎo)致程序問題。
• 設(shè)計(jì)一個(gè)腳本，方便一鍵生成，方便易用。

方案1 : 定義類，提供返回圖片資源路徑

在剛使用Flutter開發(fā)的時(shí)候就發(fā)現(xiàn)了這個(gè)問題，起初解決方案是這樣的。定義個(gè)類，提供返回圖片資源路徑。具體如下

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

其實(shí)使用此方式可以解決問題1和問題3，修改路徑的話也只需要在此類中修改路徑即可。但是沒有解決問題2，如果開發(fā)人員勿刪還在使用的圖片資源時(shí)，編譯是不會報(bào)錯(cuò)的，運(yùn)行也是沒有問題的，只有到使用此圖片資源的界面才會發(fā)現(xiàn)錯(cuò)誤，導(dǎo)致bug出現(xiàn)。

方案2 : 參考android資源的使用方式

我們可以參考android資源的使用方式，在Android中使用資源文件都是 R.id.xxxx來引用的，那么我們是否也可以讓Flutter也類似這么使用呢？思路是可行的。

思路

• 切換到圖片資源路徑，讀取目錄圖片資源。
• 創(chuàng)建一個(gè)R文件（r.dart），寫入一個(gè)R類，然后遍歷圖片資源，在R文件中的R類里，定義靜態(tài)常量（可以使用圖片資源名+后綴名定義常量名，方便用戶使用）賦值為圖片資源路徑。
• 使用是通過R.xxx即可。

通過這些思路，我們可以寫一個(gè)腳本，來實(shí)現(xiàn)這個(gè)效果。你可以選擇你擅長的腳本語言，shell或者py都是可以的。如果自己不擅長寫腳本可以通過chatgpt來實(shí)現(xiàn)，很簡單的，只要把自己的需求告訴他就可以了。這里我選擇shell來實(shí)現(xiàn)。

具體實(shí)現(xiàn)

• 步驟1：首先創(chuàng)建一個(gè)文件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àng)目來測試實(shí)現(xiàn)的。所以大家可以按照自己的項(xiàng)目情況修改。

步驟2：添加或刪除圖片后，都需要執(zhí)行res_build.sh腳本文件
注：如果提示bash: ./res_build.sh: Permission denied，可以執(zhí)行 chmod +x res_build.sh 授權(quán)。

步驟3：執(zhí)行步驟2后會生成一個(gè)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即可。

注意：每次更新圖片時(shí)，不管是新增還是刪除圖片，都需要執(zhí)行腳本更新R文件即可。如果刪除了圖片，更新腳本后，原來使用的地方會編譯報(bào)錯(cuò)，這樣開發(fā)人員就知道了，避免了bug產(chǎn)生。

以上就是Flutter正確使用圖片資源方法詳解的詳細(xì)內(nèi)容，更多關(guān)于Flutter圖片資源的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論