做(zuò)自(zì)由與創造的先行(xíng)者

Flutter 資源和(hé)圖片

Flutter開(kāi)發手冊

介紹

Flutter應用程序可(kě)以包含代碼和(hé) assets(有時(shí)稱為(wèi)資源)。asset是打包到程序安裝包中的,可(kě)在運行(xíng)時(shí)訪問(wèn)。常見(jiàn)類型的asset包括靜态數(shù)據(例如(rú)JSON文件),配置文件,圖标和(hé)圖片(JPEG,WebP,GIF,動畫(huà)WebP / GIF,PNG,BMP和(hé)WBMP)。

指定 assets

Flutter使用pubspec.yaml文件(位于項目根目錄),來識别應用程序所需的asset。

這(zhè)裏是一(yī)個例子:

flutter:

assets:

- assets/my_icon.png

- assets/background.png

該assets部分的flutter部分指定應包含在應用程序中的文件。 每個asset都(dōu)通(tōng)過相對于pubspec.yaml文件所在位置的顯式路徑進行(xíng)标識。asset的聲明(míng)順序是無關緊要(yào)的。asset的實際目錄可(kě)以是任意文件夾(在本示例中是assets)。

在構建期間(jiān),Flutter将asset放置到稱為(wèi) asset bundle 的特殊存檔中,應用程序可(kě)以在運行(xíng)時(shí)讀取它們。

Asset 變體(variant)

構建過程支持asset變體的概念:不同版本的asset可(kě)能(néng)會顯示在不同的上(shàng)下(xià)文中。 在pubspec.yaml的assets部分中指定asset路徑時(shí),構建過程中,會在相鄰子目錄中查找具有相同名稱的任何文件。這(zhè)些文件随後會與指定的asset一(yī)起被包含在asset bundle中。

例如(rú),如(rú)果您的應用程序目錄中有以下(xià)文件:

…/pubspec.yaml

…/graphics/my_icon.png

…/graphics/background.png

…/graphics/dark/background.png

…etc.

…然後您的pubspec.yaml文件包含:

flutter:

assets:

- graphics/background.png

……那(nà)麽這(zhè)兩個graphics/background.png和(hé)graphics/dark/background.png 将包含在您的asset bundle中。前者被認為(wèi)是_main asset_,後者被認為(wèi)是一(yī)種變體(variant)。

在選擇匹配當前設備分辨率的圖片時(shí),Flutter使用asset變體; 見(jiàn)下(xià)文。将來,這(zhè)種機制可(kě)能(néng)會擴展到本地(dì)化、閱讀提示等方面。

加載 assets

您的應用可(kě)以通(tōng)過AssetBundle對象訪問(wèn)其asset 。

有兩種主要(yào)方法允許從(cóng)Asset bundle中加載字符串/text(loadString)或圖片/二進制(load)。

加載文本assets

每個Flutter應用程序都(dōu)有一(yī)個rootBundle對象, 可(kě)以輕松訪問(wèn)主資源包。可(kě)以直接使用package:flutter/services.dart中全局靜态的rootBundle對象來加載asset。

但(dàn)是,建議(yì)使用DefaultAssetBundle來獲取當前BuildContext的AssetBundle。 這(zhè)種方法不是使用應用程序構建的默認asset bundle,而是使父級widget在運行(xíng)時(shí)替換的不同的AssetBundle,這(zhè)對于本地(dì)化或測試場景很(hěn)有用。

通(tōng)常,可(kě)以使用DefaultAssetBundle.of()從(cóng)應用運行(xíng)時(shí)間(jiān)接加載asset(例如(rú)JSON文件)。

在Widget上(shàng)下(xià)文之外(wài),或AssetBundle的句柄不可(kě)用時(shí),您可(kě)以使用rootBundle直接加載這(zhè)些asset,例如(rú):

import 'dart:async' show Future;

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

Future loadAsset() async {

return await rootBundle.loadString('assets/config.json');

}

加載 images

Flutter可(kě)以為(wèi)當前設備加載适合其分辨率的圖像。

聲明(míng)分辨率相關的圖片 assets

AssetImage 了(le)解如(rú)何将邏輯請(qǐng)求asset映射到最接近當前設備像素比例的asset。為(wèi)了(le)使這(zhè)種映射起作(zuò)用,應該根據特定的目錄結構來保存asset

…/image.png

…/Mx/image.png

…/Nx/image.png

…etc.

其中M和(hé)N是數(shù)字标識符,對應于其中包含的圖像的分辨率,也就是說,它們指定不同素設備像比例的圖片

主資源默認對應于1.0倍的分辨率圖片。看(kàn)一(yī)個例子:

…/my_icon.png

…/2.0x/my_icon.png

…/3.0x/my_icon.png

在設備像素比率為(wèi)1.8的設備上(shàng),.../2.0x/my_icon.png 将被選擇。對于2.7的設備像素比率,.../3.0x/my_icon.png将被選擇。

如(rú)果未在Image控件上(shàng)指定渲染圖像的寬度和(hé)高度,以便它将占用與主資源相同的屏幕空間(jiān)量(并不是相同的物(wù)理像素),隻是分辨率更高。 也就是說,如(rú)果.../my_icon.png是72px乘72px,那(nà)麽.../3.0x/my_icon.png應該是216px乘216px; 但(dàn)如(rú)果未指定寬度和(hé)高度,它們都(dōu)将渲染為(wèi)72像素×72像素(以邏輯像素為(wèi)單位)。

pubspec.yaml中asset部分中的每一(yī)項都(dōu)應與實際文件相對應,但(dàn)主資源項除外(wài)。當主資源缺少(shǎo)某個資源時(shí),會按分辨率從(cóng)低(dī)到高的順序去選擇 (譯者語:也就是說1x中沒有的話會在2x中找,2x中還沒有的話就在3x中找)。

加載圖片

要(yào)加載圖片,請(qǐng)在widget的build方法中使用 AssetImage類。

例如(rú),您的應用可(kě)以從(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'),

// ...

),

// ...

),

);

// ...

}

使用默認的 asset bundle 加載資源時(shí),內(nèi)部會自(zì)動處理分辨率等,這(zhè)些處理對開(kāi)發者來說是無感知的。 (如(rú)果您使用一(yī)些更低(dī)級别的類,如(rú) ImageStream或 ImageCache, 您會注意到有與縮放相關的參數(shù))

依賴包中的資源圖片

要(yào)加載依賴包中的圖像,必須給AssetImage提供package參數(shù)。

例如(rú),假設您的應用程序依賴于一(yī)個名為(wèi)“my_icons”的包,它具有如(rú)下(xià)目錄結構:

…/pubspec.yaml

…/icons/heart.png

…/icons/1.5x/heart.png

…/icons/2.0x/heart.png

…etc.

然後加載圖像,使用:

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

包使用的本身的資源也應該加上(shàng)package參數(shù)來獲取。

打包 package assets

如(rú)果在pubspec.yaml文件中聲明(míng)了(le)了(le)期望的資源,它将會打包到響應的package中。特别是,包本身使用的資源必須在pubspec.yaml中指定。

包也可(kě)以選擇在其lib/文件夾中包含未在其pubspec.yaml文件中聲明(míng)的資源。在這(zhè)種情況下(xià),對于要(yào)打包的圖片,應用程序必須在pubspec.yaml中指定包含哪些圖像。 例如(rú),一(yī)個名為(wèi)“fancy_backgrounds”的包,可(kě)能(néng)包含以下(xià)文件:

…/lib/backgrounds/background1.png

…/lib/backgrounds/background2.png

…/lib/backgrounds/background3.png

要(yào)包含第一(yī)張圖像,必須在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

也有時(shí)候可(kě)以直接在平台項目中使用asset。以下(xià)是在Flutter框架加載并運行(xíng)之前使用資源的兩種常見(jiàn)情況。

更新app 圖标

更新您的Flutter應用程序的啓動圖标的方式與在本機Android或iOS應用程序中更新啓動圖标的方式相同 Launch icon

Android

在Flutter項目的根目錄中,導航到.../android/app/src/main/res。各種位圖資源文件夾(如(rú)mipmap-hdpi已包含占位符圖像”ic_launcher.png”)。 隻需按照Android開(kāi)發人(rén)員(yuán)指南中的說明(míng), 将其替換為(wèi)所需的資源,并遵守每種屏幕密度的建議(yì)圖标大小标準。

Android icon location

注意: 如(rú)果您重命名.png文件,則還必須在您AndroidManifest.xml的标簽的android:icon屬性中更新名稱。

iOS

在你的Flutter項目的根目錄中,導航到.../ios/Runner。該目錄中Assets.xcassets/AppIcon.appiconset已經包含占位符圖片。 隻需将它們替換為(wèi)适當大小的圖片。保留原始文件名稱。 iOS icon location

更新啓動頁

Launch screen

在Flutter框架加載時(shí),Flutter會使用本地(dì)平台機制繪制啓動頁。此啓動頁将持續到Flutter渲染應用程序的第一(yī)幀時(shí)。

注意: 這(zhè)意味着如(rú)果您不在應用程序的main()方法中調用runApp 函數(shù) (或者更具體地(dì)說,如(rú)果您不調用window.render去響應window.onDrawFrame)的話, 啓動屏幕将永遠持續顯示。

Android

要(yào)将啓動屏幕(splash screen)添加到您的Flutter應用程序, 請(qǐng)導航至.../android/app/src/main。在res/drawable/launch_background.xml,通(tōng)過自(zì)定義drawable來實現自(zì)定義啓動界面。

iOS

要(yào)将圖片添加到啓動屏幕(splash screen)的中心,請(qǐng)導航至.../ios/Runner。在Assets.xcassets/LaunchImage.imageset, 拖入圖片,并命名為(wèi)images LaunchImage.png、LaunchImage@2x.png、LaunchImage@3x.png。 如(rú)果您使用不同的文件名,那(nà)您還必須更新同一(yī)目錄中的Contents.json文件。

您也可(kě)以通(tōng)過打開(kāi)Xcode完全自(zì)定義storyboard。在Project Navigator中導航到Runner/Runner然後通(tōng)過打開(kāi)Assets.xcassets拖入圖片,或者通(tōng)過在LaunchScreen.storyboard中使用Interface Builder進行(xíng)自(zì)定義。

網站建設開(kāi)發|APP設計開(kāi)發|小程序建設開(kāi)發
下(xià)一(yī)篇:Flutter 文本輸入
上(shàng)一(yī)篇:Flutter 盒約束