介紹
Flutter應用(yòng)程序可以包含代碼和(hé) assets(有時(shí)稱爲資源)。asset是打包到(dào)程序安裝包中的,可在運行時(shí)訪問。常見類型的asset包括靜态數據(例如JSON文(wén)件),配置文(wén)件,圖标和(hé)圖片(JPEG,WebP,GIF,動畫(huà)WebP / GIF,PNG,BMP和(hé)WBMP)。
指定 assets
Flutter使用(yòng)pubspec.yaml文(wén)件(位于項目根目錄),來(lái)識别應用(yòng)程序所需的asset。
這(zhè)裏是一個例子:
flutter:
assets:
- assets/my_icon.png
- assets/background.png
該assets部分的flutter部分指定應包含在應用(yòng)程序中的文(wén)件。 每個asset都通過相對(duì)于pubspec.yaml文(wén)件所在位置的顯式路徑進行标識。asset的聲明(míng)順序是無關緊要的。asset的實際目錄可以是任意文(wén)件夾(在本示例中是assets)。
在構建期間,Flutter将asset放(fàng)置到(dào)稱爲 asset bundle 的特殊存檔中,應用(yòng)程序可以在運行時(shí)讀取它們。
Asset 變體(variant)
構建過程支持asset變體的概念:不同版本的asset可能(néng)會(huì)顯示在不同的上(shàng)下(xià)文(wén)中。 在pubspec.yaml的assets部分中指定asset路徑時(shí),構建過程中,會(huì)在相鄰子目錄中查找具有相同名稱的任何文(wén)件。這(zhè)些(xiē)文(wén)件随後會(huì)與指定的asset一起被包含在asset bundle中。
例如,如果您的應用(yòng)程序目錄中有以下(xià)文(wén)件:
…/pubspec.yaml
…/graphics/my_icon.png
…/graphics/background.png
…/graphics/dark/background.png
…etc.
…然後您的pubspec.yaml文(wén)件包含:
flutter:
assets:
- graphics/background.png
……那麽這(zhè)兩個graphics/background.png和(hé)graphics/dark/background.png 将包含在您的asset bundle中。前者被認爲是_main asset_,後者被認爲是一種變體(variant)。
在選擇匹配當前設備分辨率的圖片時(shí),Flutter使用(yòng)asset變體; 見下(xià)文(wén)。将來(lái),這(zhè)種機制可能(néng)會(huì)擴展到(dào)本地化、閱讀提示等方面。
加載 assets
您的應用(yòng)可以通過AssetBundle對(duì)象訪問其asset 。
有兩種主要方法允許從(cóng)Asset bundle中加載字符串/text(loadString)或圖片/二進制(load)。
加載文(wén)本assets
每個Flutter應用(yòng)程序都有一個rootBundle對(duì)象, 可以輕松訪問主資源包。可以直接使用(yòng)package:flutter/services.dart中全局靜态的rootBundle對(duì)象來(lái)加載asset。
但(dàn)是,建議(yì)使用(yòng)DefaultAssetBundle來(lái)獲取當前BuildContext的AssetBundle。 這(zhè)種方法不是使用(yòng)應用(yòng)程序構建的默認asset bundle,而是使父級widget在運行時(shí)替換的不同的AssetBundle,這(zhè)對(duì)于本地化或測試場景很(hěn)有用(yòng)。
通常,可以使用(yòng)DefaultAssetBundle.of()從(cóng)應用(yòng)運行時(shí)間接加載asset(例如JSON文(wén)件)。
在Widget上(shàng)下(xià)文(wén)之外(wài),或AssetBundle的句柄不可用(yòng)時(shí),您可以使用(yòng)rootBundle直接加載這(zhè)些(xiē)asset,例如:
import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;
Future
return await rootBundle.loadString('assets/config.json');
}
加載 images
Flutter可以爲當前設備加載适合其分辨率的圖像。
聲明(míng)分辨率相關的圖片 assets
AssetImage 了(le)解如何将邏輯請(qǐng)求asset映射到(dào)最接近當前設備像素比例的asset。爲了(le)使這(zhè)種映射起作(zuò)用(yòng),應該根據特定的目錄結構來(lái)保存asset
…/image.png
…/Mx/image.png
…/Nx/image.png
…etc.
其中M和(hé)N是數字标識符,對(duì)應于其中包含的圖像的分辨率,也(yě)就是說,它們指定不同素設備像比例的圖片
主資源默認對(duì)應于1.0倍的分辨率圖片。看(kàn)一個例子:
…/my_icon.png
…/2.0x/my_icon.png
…/3.0x/my_icon.png
在設備像素比率爲1.8的設備上(shàng),.../2.0x/my_icon.png 将被選擇。對(duì)于2.7的設備像素比率,.../3.0x/my_icon.png将被選擇。
如果未在Image控件上(shàng)指定渲染圖像的寬度和(hé)高(gāo)度,以便它将占用(yòng)與主資源相同的屏幕空(kōng)間量(并不是相同的物理(lǐ)像素),隻是分辨率更高(gāo)。 也(yě)就是說,如果.../my_icon.png是72px乘72px,那麽.../3.0x/my_icon.png應該是216px乘216px; 但(dàn)如果未指定寬度和(hé)高(gāo)度,它們都将渲染爲72像素×72像素(以邏輯像素爲單位)。
pubspec.yaml中asset部分中的每一項都應與實際文(wén)件相對(duì)應,但(dàn)主資源項除外(wài)。當主資源缺少某個資源時(shí),會(huì)按分辨率從(cóng)低(dī)到(dào)高(gāo)的順序去選擇 (譯者語:也(yě)就是說1x中沒有的話(huà)會(huì)在2x中找,2x中還沒有的話(huà)就在3x中找)。
加載圖片
要加載圖片,請(qǐng)在widget的build方法中使用(yòng) AssetImage類。
例如,您的應用(yòng)可以從(cóng)上(shàng)面的asset聲明(míng)中加載背景圖片:
Widget build(BuildContext context) {
// ...
return new DecoratedBox(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('graphics/background.png'),
// ...
),
// ...
),
);
// ...
}
使用(yòng)默認的 asset bundle 加載資源時(shí),内部會(huì)自(zì)動處理(lǐ)分辨率等,這(zhè)些(xiē)處理(lǐ)對(duì)開(kāi)發者來(lái)說是無感知(zhī)的。 (如果您使用(yòng)一些(xiē)更低(dī)級别的類,如 ImageStream或 ImageCache, 您會(huì)注意到(dào)有與縮放(fàng)相關的參數)
依賴包中的資源圖片
要加載依賴包中的圖像,必須給AssetImage提供package參數。
例如,假設您的應用(yòng)程序依賴于一個名爲“my_icons”的包,它具有如下(xià)目錄結構:
…/pubspec.yaml
…/icons/heart.png
…/icons/1.5x/heart.png
…/icons/2.0x/heart.png
…etc.
然後加載圖像,使用(yòng):
new AssetImage('icons/heart.png', package: 'my_icons')
包使用(yòng)的本身的資源也(yě)應該加上(shàng)package參數來(lái)獲取。
打包 package assets
如果在pubspec.yaml文(wén)件中聲明(míng)了(le)了(le)期望的資源,它将會(huì)打包到(dào)響應的package中。特别是,包本身使用(yòng)的資源必須在pubspec.yaml中指定。
包也(yě)可以選擇在其lib/文(wén)件夾中包含未在其pubspec.yaml文(wén)件中聲明(míng)的資源。在這(zhè)種情況下(xià),對(duì)于要打包的圖片,應用(yòng)程序必須在pubspec.yaml中指定包含哪些(xiē)圖像。 例如,一個名爲“fancy_backgrounds”的包,可能(néng)包含以下(xià)文(wén)件:
…/lib/backgrounds/background1.png
…/lib/backgrounds/background2.png
…/lib/backgrounds/background3.png
要包含第一張圖像,必須在pubspec.yaml的assets部分中聲明(míng)它:
flutter:
assets:
- packages/fancy_backgrounds/backgrounds/background1.png
The lib/ is implied, so it should not be included in the asset path.
lib/是隐含的,所以它不應該包含在資産路徑中。
平台 assets
也(yě)有時(shí)候可以直接在平台項目中使用(yòng)asset。以下(xià)是在Flutter框架加載并運行之前使用(yòng)資源的兩種常見情況。
更新app 圖标
更新您的Flutter應用(yòng)程序的啓動圖标的方式與在本機Android或iOS應用(yòng)程序中更新啓動圖标的方式相同 Launch icon
Android
在Flutter項目的根目錄中,導航到(dào).../android/app/src/main/res。各種位圖資源文(wén)件夾(如mipmap-hdpi已包含占位符圖像”ic_launcher.png”)。 隻需按照Android開(kāi)發人員指南中的說明(míng), 将其替換爲所需的資源,并遵守每種屏幕密度的建議(yì)圖标大(dà)小(xiǎo)标準。
Android icon location
注意: 如果您重命名.png文(wén)件,則還必須在您AndroidManifest.xml的
iOS
在你(nǐ)的Flutter項目的根目錄中,導航到(dào).../ios/Runner。該目錄中Assets.xcassets/AppIcon.appiconset已經包含占位符圖片。 隻需将它們替換爲适當大(dà)小(xiǎo)的圖片。保留原始文(wén)件名稱。 iOS icon location
更新啓動頁
Launch screen
在Flutter框架加載時(shí),Flutter會(huì)使用(yòng)本地平台機制繪制啓動頁。此啓動頁将持續到(dào)Flutter渲染應用(yòng)程序的第一幀時(shí)。
注意: 這(zhè)意味着如果您不在應用(yòng)程序的main()方法中調用(yòng)runApp 函數 (或者更具體地說,如果您不調用(yòng)window.render去響應window.onDrawFrame)的話(huà), 啓動屏幕将永遠持續顯示。
Android
要将啓動屏幕(splash screen)添加到(dào)您的Flutter應用(yòng)程序, 請(qǐng)導航至.../android/app/src/main。在res/drawable/launch_background.xml,通過自(zì)定義drawable來(lái)實現(xiàn)自(zì)定義啓動界面。
iOS
要将圖片添加到(dào)啓動屏幕(splash screen)的中心,請(qǐng)導航至.../ios/Runner。在Assets.xcassets/LaunchImage.imageset, 拖入圖片,并命名爲images LaunchImage.png、LaunchImage@2x.png、LaunchImage@3x.png。 如果您使用(yòng)不同的文(wén)件名,那您還必須更新同一目錄中的Contents.json文(wén)件。
您也(yě)可以通過打開(kāi)Xcode完全自(zì)定義storyboard。在Project Navigator中導航到(dào)Runner/Runner然後通過打開(kāi)Assets.xcassets拖入圖片,或者通過在LaunchScreen.storyboard中使用(yòng)Interface Builder進行自(zì)定義。
網站(zhàn)建設開(kāi)發|APP設計(jì)開(kāi)發|小(xiǎo)程序建設開(kāi)發