快捷導(dǎo)航

Flutter正確使用圖片資源方法詳解

更新時間：2023年08月03日 10:34:30 作者：龍之音

這篇文章主要為大家介紹了Flutter正確使用圖片資源方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

現(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è)計一個腳本，方便一鍵生成，方便易用。

方案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資源的使用方式，在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';
}