做自(zì)由與創造的先行者

Flutter 資源和(hé)圖片

Flutter開(kāi)發手冊

介紹

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 loadAsset() async {

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的标簽的android:icon屬性中更新名稱。

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)發
下(xià)一篇:Flutter 文(wén)本輸入
上(shàng)一篇:Flutter 盒約束