在Flutter中添加資源和圖片

Flutter應用程序可以包含代碼和資源。資源是打包到程序安裝包中的，可在運行時訪問。常見類型的asset包括靜態數據（例如JSON文件），配置文件，圖標和圖片（JPEG，WebP，GIF，動畫WebP / GIF，PNG，BMP和WBMP）。

介紹

Flutter應用程序可以包含代碼和 assets（有時稱為資源）。asset是打包到程序安裝包中的，可在運行時訪問。常見類型的asset包括靜態數據（例如JSON文件），配置文件，圖標和圖片（JPEG，WebP，GIF，動畫WebP / GIF，PNG，BMP和WBMP）。

指定 assets

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

這里是一個例子:

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

該assets部分的flutter部分指定應包含在應用程序中的文件。 每個asset都通過相對于pubspec.yaml文件所在位置的顯式路徑進行標識。asset的聲明順序是無關緊要的。asset的實際目錄可以是任意文件夾（在本示例中是assets）。

在構建期間，Flutter將asset放置到稱為 asset bundle 的特殊存檔中，應用程序可以在運行時讀取它們。

Asset 變體（variant）

構建過程支持asset變體的概念：不同版本的asset可能會顯示在不同的上下文中。 在pubspec.yaml的assets部分中指定asset路徑時，構建過程中，會在相鄰子目錄中查找具有相同名稱的任何文件。這些文件隨后會與指定的asset一起被包含在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 將包含在您的asset bundle中。前者被認為是main asset，后者被認為是一種變體（variant）。

在選擇匹配當前設備分辨率的圖片時，Flutter使用asset變體; 見下文。將來，這種機制可能會擴展到本地化、閱讀提示等方面。

加載 assets

您的應用可以通過AssetBundle對象訪問其asset 。

有兩種主要方法允許從Asset bundle中加載字符串/text（loadString）或圖片/二進制（load）。

加載文本assets

每個Flutter應用程序都有一個rootBundle對象， 可以輕松訪問主資源包。可以直接使用package:flutter/services.dart中全局靜態的rootBundle對象來加載asset。

但是，建議使用DefaultAssetBundle來獲取當前BuildContext的AssetBundle。 這種方法不是使用應用程序構建的默認asset bundle，而是使父級widget在運行時替換的不同的AssetBundle，這對于本地化或測試場景很有用。

通常，可以使用DefaultAssetBundle.of()從應用運行時間接加載asset（例如JSON文件）。

在Widget上下文之外，或AssetBundle的句柄不可用時，您可以使用rootBundle直接加載這些asset，例如：

import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;

Future<String> loadAsset() async {
  return await rootBundle.loadString('assets/config.json');
}

加載 images

Flutter可以為當前設備加載適合其分辨率的圖像。

聲明分辨率相關的圖片 assets {#resolution-aware}

AssetImage 了解如何將邏輯請求asset映射到最接近當前設備像素比例的asset。為了使這種映射起作用，應該根據特定的目錄結構來保存asset

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

其中M和N是數字標識符，對應于其中包含的圖像的分辨率，也就是說，它們指定不同素設備像比例的圖片

主資源默認對應于1.0倍的分辨率圖片。看一個例子：

• .../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將被選擇。

如果未在Image控件上指定渲染圖像的寬度和高度，以便它將占用與主資源相同的屏幕空間量（并不是相同的物理像素），只是分辨率更高。 也就是說，如果.../my_icon.png是72px乘72px，那么.../3.0x/my_icon.png應該是216px乘216px; 但如果未指定寬度和高度，它們都將渲染為72像素×72像素（以邏輯像素為單位）。

pubspec.yaml中asset部分中的每一項都應與實際文件相對應，但主資源項除外。當主資源缺少某個資源時，會按分辨率從低到的順序去選擇 （譯者語：也就是說1x中沒有的話會在2x中找，2x中還沒有的話就在3x中找）。

加載圖片

要加載圖片，請在widget的build方法中使用 AssetImage類。

例如，您的應用可以從上面的asset聲明中加載背景圖片：

Widget build(BuildContext context) {
  // ...
  return new DecoratedBox(
    decoration: new BoxDecoration(
      image: new DecorationImage(
        image: new AssetImage('graphics/background.png'),
        // ...
      ),
      // ...
    ),
  );
  // ...
}

使用默認的 asset bundle 加載資源時，內部會自動處理分辨率等，這些處理對開發者來說是無感知的。 (如果您使用一些更低級別的類，如 ImageStream或 ImageCache, 您會注意到有與縮放相關的參數)

依賴包中的資源圖片 {#from-packages}

要加載依賴包中的圖像，必須給AssetImage提供package參數。

例如，假設您的應用程序依賴于一個名為“my_icons”的包，它具有如下目錄結構：

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

然后加載圖像，使用:

 new AssetImage('icons/heart.png', package: 'my_icons')

包使用的本身的資源也應該加上package參數來獲取。

打包 package assets

如果在pubspec.yaml文件中聲明了了期望的資源，它將會打包到響應的package中。特別是，包本身使用的資源必須在pubspec.yaml中指定。

包也可以選擇在其lib/文件夾中包含未在其pubspec.yaml文件中聲明的資源。在這種情況下，對于要打包的圖片，應用程序必須在pubspec.yaml中指定包含哪些圖像。 例如，一個名為“fancy_backgrounds”的包，可能包含以下文件：

• .../lib/backgrounds/background1.png
• .../lib/backgrounds/background2.png
• .../lib/backgrounds/background3.png

要包含第一張圖像，必須在pubspec.yaml的assets部分中聲明它：

flutter:
  assets:
    - packages/fancy_backgrounds/backgrounds/background1.png

The lib/ is implied, so it should not be included in the asset path.

lib/是隱含的，所以它不應該包含在資產路徑中。

平臺 assets

也有時候可以直接在平臺項目中使用asset。以下是在Flutter框架加載并運行之前使用資源的兩種常見情況。

更新app 圖標

更新您的Flutter應用程序的啟動圖標的方式與在本機Android或iOS應用程序中更新啟動圖標的方式相同

Android

在Flutter項目的根目錄中，導航到.../android/app/src/main/res。各種位圖資源文件夾（如mipmap-hdpi已包含占位符圖像"ic_launcher.png"）。 只需按照Android開發人員指南中的說明， 將其替換為所需的資源，并遵守每種屏幕密度的建議圖標大小標準。

注意: 如果您重命名.png文件，則還必須在您AndroidManifest.xml的<application>標簽的android:icon屬性中更新名稱。

iOS

在你的Flutter項目的根目錄中，導航到.../ios/Runner。該目錄中Assets.xcassets/AppIcon.appiconset已經包含占位符圖片。 只需將它們替換為適當大小的圖片。保留原始文件名稱。

更新啟動頁

在Flutter框架加載時，Flutter會使用本地平臺機制繪制啟動頁。此啟動頁將持續到Flutter渲染應用程序的第一幀時。

注意: 這意味著如果您不在應用程序的main()方法中調用runApp 函數 （或者更具體地說，如果您不調用window.render去響應window.onDrawFrame）的話， 啟動屏幕將永遠持續顯示。

Android

要將啟動屏幕（splash screen）添加到您的Flutter應用程序， 請導航至.../android/app/src/main。在res/drawable/launch_background.xml，通過自定義drawable來實現自定義啟動界面。

iOS

要將圖片添加到啟動屏幕（splash screen）的中心，請導航至.../ios/Runner。在Assets.xcassets/LaunchImage.imageset， 拖入圖片，并命名為images LaunchImage.png、[email protected]、[email protected]。 如果您使用不同的文件名，那您還必須更新同一目錄中的Contents.json文件。

您也可以通過打開Xcode完全自定義storyboard。在Project Navigator中導航到Runner/Runner然后通過打開Assets.xcassets拖入圖片，或者通過在LaunchScreen.storyboard中使用Interface Builder進行自定義。

本文版權歸扣丁書屋所有,轉載請保留此說明。