封面圖

下個季度的目標(biāo)是把前端監(jiān)控相關(guān)的內(nèi)容梳理出來，梳理出來之后可能會在公司內(nèi)部做個分享～

Flutter應(yīng)用程序既括代碼也包括一些其他的資產(chǎn)，我們通常這些資產(chǎn)為資源。

有時候我會思考assets這個單詞，在程序中到底應(yīng)該翻譯為資產(chǎn)呢？還是翻譯為資源？按照習(xí)慣，我們這里還是稱為資源好了～

這些資源是一些與應(yīng)用程序捆綁在一起和并且部署應(yīng)用時會用到的的文件，在運行時也可以進(jìn)行訪問。常見類型的資源包括靜態(tài)數(shù)據(jù)（例如，JSON文件）、配置文件、圖標(biāo)和圖像（JPEG、WebP、GIF、動畫WebP/GIF、PNG、BMP和WBMP）等等。

指定相應(yīng)的資源

Flutter使用位于項目根目錄的pubspec.yaml文件來識別應(yīng)用程序所需的資源。

yaml文件是一種類似于json的可讀性高，用來表示數(shù)據(jù)序列化的文件格式。

比如：

flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png

如果我們想要包含目錄下的所有資產(chǎn)，我們需要指定目錄名，并在末尾使用/字符：

flutter:
  assets:
    - directory/
    - directory/subdirectory/

需要?注意的是：

/**
除非子目錄中有同名文件，否則僅包含直接位于目錄中的文件。
要添加位于子目錄中的文件，請為每個目錄創(chuàng)建一個條目。
**/

資源綁定 Asset bundling

flutter應(yīng)用中的資源必須包含在應(yīng)用中，同時，每個資源都需要在pubspec.yaml文件中指定相應(yīng)的路徑。資源之間的順序無關(guān)緊要。

在Flutter應(yīng)用的構(gòu)建過程中，F(xiàn)lutter會將資源放入一個特殊的歸檔文件，稱為asset bundle，應(yīng)用程序在運行時從中讀取相應(yīng)的資源。

資源變體

應(yīng)用的構(gòu)建過程支持資源變體的概念：即，不同版本的資源有可能顯示在不同的上下文之中。當(dāng)我們在pubspec.yaml的assets部分中指定資源的路徑時，構(gòu)建過程會在相鄰子目錄中查找任何同名文件。然后，這些文件與指定的資源一起包含在asset bundle(資源包)中。

例如，假設(shè)我們有如下資源：

.../pubspec.yaml
.../graphics/my_icon.png
.../graphics/background.png
.../graphics/dark/background.png
...etc.

我們的pubspec.yaml文件配置如下：

flutter:
  assets:
    - graphics/background.png

這時候/graphics/background.png和/graphics/dark/background.png這兩個文件都會出現(xiàn)在我們的asset bundle(資源包)之中。

前者被認(rèn)為是一個主要的資源，后者則被認(rèn)為是一個變體的資源。

如果我們只指定目錄：

flutter:
  assets:
    - graphics/

那么，graphics/my_icon.png, graphics/background.png 以及 graphics/dark/background.png 都會包含在我們的asset bundle(資源包)之中。

加載資源

Flutter應(yīng)用可以通過AssetBundle對象訪問資源。

AssetBundle對象有兩個主要的方法：

• loadString()可以讓我們加載字符串相關(guān)的資源
• load()可以讓我們加載圖像以及二進(jìn)制相關(guān)的資源

加載文本資源

每個Flutter應(yīng)用程序都有一個rootBundle對象，方便訪問主資源包。

我們可以從package:flutter/services.dart中直接導(dǎo)入這個方法，直接使用。

但是通常的建議是：通過使用DefaultAssetBundle組件來獲取當(dāng)前buildContext的AssetBundle。

這種方法允許父組件在運行時替換不同的AssetBundle，對于本地化或測試場景非常有用。

通常情況下，我們可以使用DefaultAssetBundle.of（）方法從應(yīng)用程序的運行時rootBundle間接加載資產(chǎn)，例如JSON文件。

在組件的上下文之外，或者當(dāng)AssetBundle的句柄不可用時，我們可以使用rootBundle直接加載此類資源。例如：

import 'package:flutter/services.dart' show rootBundle;
Future<String> loadAsset() async {
  return await rootBundle.loadString('assets/config.json');
}

加載圖片

Flutter可以根據(jù)當(dāng)前設(shè)備像素比加載分辨率適當(dāng)?shù)膱D像。

AssetImage知道如何將邏輯請求的資源映射到與當(dāng)前設(shè)備像素比率最匹配的資源上。為了使此映射正常工作，應(yīng)根據(jù)特定的目錄結(jié)構(gòu)排列資產(chǎn)，例如：

.../image.png
.../Mx/image.png
.../Nx/image.png
...etc.

其中M和N是數(shù)字標(biāo)識符，對應(yīng)于其中包含的圖像的標(biāo)稱分辨率。換句話說，它們指定了圖像的設(shè)備像素比。

主要資源默認(rèn)對應(yīng)1.0的分辨率。例如，名為my_icon.png的圖像：

.../my_icon.png
.../2.0x/my_icon.png
.../3.0x/my_icon.png

在設(shè)備像素比率為1.8的設(shè)備上，.../2.0x/my_icon.png這個圖像將會被加載。在設(shè)備像素比率為2.7的設(shè)備上，.../3.0x/my_icon.png這個圖像將會被加載。

如果未在“圖像”組件件上指定渲染圖像的寬度和高度，則使用標(biāo)稱分辨率縮放資源，使其占用與主資源相同的屏幕空間，只是分辨率更高。也就是說，如果/my_icon.png是72px乘72px，然后/3.0x/my_icon.png應(yīng)為216px x 216px；但如果沒有指定寬度和高度，它們都會呈現(xiàn)為72px乘72px（以邏輯像素為單位）。

想要真正的加載一張圖片，我們只需要在組件的build方法中使用AssetsImage對象，例如：

return const Image(image: AssetImage('graphics/background.png'));

加載依賴包中的圖片

想要加載依賴包中的圖片，我們需要將包的名稱傳遞給AssetImage對象。

假設(shè)我們有一個圖片的依賴包名字為my_icons,它內(nèi)部結(jié)構(gòu)如下：

.../pubspec.yaml
.../icons/heart.png
.../icons/1.5x/heart.png
.../icons/2.0x/heart.png
...etc.

想要加載這些圖片，我們需要這樣使用：

return const AssetImage('icons/heart.png', package: 'my_icons');

最后

資源和圖片的內(nèi)容這里僅僅描述了一些基本的概念和用法～

當(dāng)然還包括其他一些內(nèi)容，比如：

• 資源的打包
• 不同平臺的資源
• 等等

這些都是我們需要注意的內(nèi)容～

以上就是flutter中的資源和圖片加載示例詳解的詳細(xì)內(nèi)容，更多關(guān)于flutter資源圖片加載的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論