快捷導(dǎo)航

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

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

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

現(xiàn)況

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

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

那么問(wèn)題就來(lái)了，這樣使用可能會(huì)出現(xiàn)一些問(wèn)題。

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

需求

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

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

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

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

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

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

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

思路

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

通過(guò)這些思路，我們可以寫一個(gè)腳本，來(lái)實(shí)現(xiàn)這個(gè)效果。你可以選擇你擅長(zhǎng)的腳本語(yǔ)言，shell或者py都是可以的。如果自己不擅長(zhǎng)寫腳本可以通過(guò)chatgpt來(lái)實(shí)現(xiàn)，很簡(jiǎn)單的，只要把自己的需求告訴他就可以了。這里我選擇shell來(lái)實(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
# 自動(dòng)格式化 Dart 代碼文件
dart format --fix r.dart

注意：這里是拿我的flutter_xy項(xiàng)目來(lái)測(cè)試實(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后會(huì)生成一個(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';
}