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進行自定義。