封面圖

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

Flutter應用程序既括代碼也包括一些其他的資產，我們通常這些資產為資源。

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

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

指定相應的資源

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

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

比如：

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

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

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

需要?注意的是：

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

資源綁定 Asset bundling

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

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

資源變體

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

例如，假設我們有如下資源：

.../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(資源包)之中。

前者被認為是一個主要的資源，后者則被認為是一個變體的資源。

如果我們只指定目錄：

flutter:
  assets:
    - graphics/

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

加載資源

Flutter應用可以通過AssetBundle對象訪問資源。

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

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

加載文本資源

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

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

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

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

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

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

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

加載圖片

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

AssetImage知道如何將邏輯請求的資源映射到與當前設備像素比率最匹配的資源上。為了使此映射正常工作，應根據(jù)特定的目錄結構排列資產，例如：

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

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

主要資源默認對應1.0的分辨率。例如，名為my_icon.png的圖像：

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

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

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

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

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

加載依賴包中的圖片

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

假設我們有一個圖片的依賴包名字為my_icons,它內部結構如下：

.../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');

最后

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

當然還包括其他一些內容，比如：

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

這些都是我們需要注意的內容～

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

最新評論