Flutter--資源管理

Flutter的資源類型

Flutter可以添加代碼以及assets到APP中。而每個(gè)Asset都是被打包在發(fā)布的APP中的抛蚁,并且在APP運(yùn)行時(shí)可以訪問(wèn)這些資源舅踪。

通用的Asset類型包括:

  • JSON文件
  • 配置文件
  • 圖標(biāo)
  • 位圖(JPEG、Webp绕沈、Gif、Animated Gif/Webp帮寻、PNG)

指定Asset

Flutter使用項(xiàng)目根目錄下的pubspec.yaml文件來(lái)指定APP所需要的資源乍狐。

  • 單個(gè)文件指定:
flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png
  • 文件夾指定:
    通過(guò)指定目錄名+/字符即可,只有在該目錄下的所有文件可以被包括固逗,如果該目錄還有子目錄的話浅蚪,則需要添加一個(gè)新的Entry。
flutter:
  assets:
    - assets/
    - assets/image/

Asset Variants

構(gòu)建系統(tǒng)支持Asset Variants的概念:
在不同的環(huán)境下烫罩,需要顯示不同版本的資源惜傲。

例如,日夜間模式的資源贝攒,資源名相同盗誊,但是環(huán)境不同。

當(dāng)一個(gè)資源的路徑在pubspec.yaml文件的assets Section中指定的時(shí)候隘弊,構(gòu)建系統(tǒng)就會(huì)在相鄰的子目錄中查找相同的名稱的資源文件哈踱。而查找到的這些文件也會(huì)被打到Asset Bundle中。

例如:有一個(gè)background.png文件梨熙,在日夜間都需要使用开镣,graphics中存放日間資源,而dark中存放夜間資源咽扇。

  .../pubspec.yaml
  .../graphics/my_icon.png
  .../graphics/background.png
  .../graphics/dark/background.png
  ...etc.

而在pubspec.yaml文件中邪财,將background.png添加到assets的Section中。

flutter:
  assets:
    -  graphics/background.png

最終质欲,在打包的時(shí)候會(huì)把.../graphics/background.png.../graphics/dark/background.png都打到Bundle中树埠。而前一個(gè)被認(rèn)為是Main Bundle,而后一個(gè)則認(rèn)為是Variant Bundle把敞。

而如果使用:

flutter:
  assets:
    - graphics/

myicon.png弥奸,background.png/dark/background.png也都會(huì)打到Bundle中奋早。

Flutter目前使用Asset Variant來(lái)解決圖片適配的問(wèn)題盛霎,而未來(lái)這種機(jī)制也會(huì)應(yīng)用在不同的語(yǔ)言等其他地方。

加載Assets

APP可以通過(guò)AssetBundle對(duì)象來(lái)訪問(wèn)資源耽装。

  • 加載String/Text:通過(guò)loadString方法
  • 加載圖片/二進(jìn)制文件:通過(guò)load方法

而在Build的階段愤炸,邏輯Key會(huì)根據(jù)pubspec.yaml文件中的路徑來(lái)進(jìn)行映射。

每個(gè)Flutter App都有一個(gè)rootBundle對(duì)象來(lái)方便的訪問(wèn)主資源Bundle掉奄」娓觯可以通過(guò)package:flutter/services.dard中的全局靜態(tài)變量rootBundle來(lái)直接訪問(wèn)資源凤薛。不過(guò)還是推薦使用當(dāng)前的BuildContext來(lái)獲取DefaultAssetBundle,通過(guò)調(diào)用DefaultAssetBundle.of(context)來(lái)獲取诞仓。

而當(dāng)沒(méi)有Context的Widget缤苫,則需要通過(guò)rootBundle來(lái)獲取。

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

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

圖片加載的適配

Flutter會(huì)根據(jù)當(dāng)前設(shè)備的設(shè)備像素比(device Pixel Ratio)來(lái)選擇圖片墅拭。

AssetImage知道如何映射到最相近的設(shè)備像素比的圖片活玲,為了讓Mapping能夠更好的工作,Assets應(yīng)該有這種結(jié)構(gòu):

  .../my_icon.png
  .../2.0x/my_icon.png
  .../3.0x/my_icon.png

默認(rèn)主資源Bundle中是1.0x的圖片谍婉。

例如舒憾,當(dāng)前設(shè)備的設(shè)備像素比是1.8,則會(huì)選擇/2.0x/my_icon.png穗熬。如果是2.7時(shí)镀迂,則會(huì)選擇/3.0x/my_icon.png

如果Image控件的寬高都沒(méi)有指定的話唤蔗,通常的解決方案是進(jìn)行資源壓縮探遵,然后和主資源Bundle中的圖占據(jù)相同的像素空間。

例如措译,1.0x的my_icon.png是72px * 72px别凤,而3.0x的my_icon.png是216px * 216px,但是它需要繪制到72px * 72px的Image控件上领虹,如果這個(gè)控件的寬高沒(méi)有指定的話规哪。

加載圖片

在Widget的build函數(shù)中使用AssetImage類來(lái)加載圖片。

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

與平臺(tái)共享資源

Flutter的Asset資源也可以與Android/Ios共享塌衰。例如诉稍,flutter中有heart.png這張圖

flutter:
  assets:
    - icons/heart.png

Android:

Android上通過(guò)AssetManager來(lái)獲取。

  • 通過(guò)PluginRegistry.RegistrarlookupKeyForAsset來(lái)獲取文件路徑
  • 通過(guò)FlutterViewgetLookupKeyForAsset來(lái)獲取文件路徑
  • 通過(guò)AssetManageropenFd來(lái)得到文件描述符
AssetManager assetManager = registrar.context().getAssets();
String key = registrar.lookupKeyForAsset("icons/heart.png");
AssetFileDescriptor fd = assetManager.openFd(key);

IOS:

IOS上通過(guò)NSBundle來(lái)獲取最疆。

  • 通過(guò)FlutterPluginRegistrarlookupKeyForAsset來(lái)獲取文件路徑
  • 通過(guò)FlutterViewController.FlutterPluginRegistrar同樣也可以獲取文件路徑
  • 通過(guò)NSBundlepathForResource來(lái)獲取文件路徑
NSString* key = [registrar lookupKeyForAsset:@"icons/heart.png"];
NSString* path = [[NSBundle mainBundle] pathForResource:key ofType:nil];

資料

Adding assets and images

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末杯巨,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子努酸,更是在濱河造成了極大的恐慌服爷,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,104評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件获诈,死亡現(xiàn)場(chǎng)離奇詭異仍源,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)舔涎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,816評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門笼踩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人亡嫌,你說(shuō)我怎么就攤上這事嚎于【蚨” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 168,697評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵于购,是天一觀的道長(zhǎng)袍睡。 經(jīng)常有香客問(wèn)我,道長(zhǎng)价涝,這世上最難降的妖魔是什么女蜈? 我笑而不...
    開(kāi)封第一講書人閱讀 59,836評(píng)論 1 298
  • 正文 為了忘掉前任,我火速辦了婚禮色瘩,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘逸寓。我一直安慰自己居兆,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,851評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布竹伸。 她就那樣靜靜地躺著泥栖,像睡著了一般。 火紅的嫁衣襯著肌膚如雪勋篓。 梳的紋絲不亂的頭發(fā)上吧享,一...
    開(kāi)封第一講書人閱讀 52,441評(píng)論 1 310
  • 那天,我揣著相機(jī)與錄音譬嚣,去河邊找鬼钢颂。 笑死,一個(gè)胖子當(dāng)著我的面吹牛拜银,可吹牛的內(nèi)容都是我干的殊鞭。 我是一名探鬼主播,決...
    沈念sama閱讀 40,992評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼尼桶,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼操灿!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起泵督,我...
    開(kāi)封第一講書人閱讀 39,899評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤趾盐,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后小腊,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體救鲤,經(jīng)...
    沈念sama閱讀 46,457評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,529評(píng)論 3 341
  • 正文 我和宋清朗相戀三年溢豆,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了蜒简。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,664評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡漩仙,死狀恐怖搓茬,靈堂內(nèi)的尸體忽然破棺而出犹赖,到底是詐尸還是另有隱情,我是刑警寧澤卷仑,帶...
    沈念sama閱讀 36,346評(píng)論 5 350
  • 正文 年R本政府宣布峻村,位于F島的核電站,受9級(jí)特大地震影響锡凝,放射性物質(zhì)發(fā)生泄漏粘昨。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,025評(píng)論 3 334
  • 文/蒙蒙 一窜锯、第九天 我趴在偏房一處隱蔽的房頂上張望张肾。 院中可真熱鬧,春花似錦锚扎、人聲如沸吞瞪。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,511評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)芍秆。三九已至,卻和暖如春翠勉,著一層夾襖步出監(jiān)牢的瞬間妖啥,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,611評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工对碌, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留荆虱,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,081評(píng)論 3 377
  • 正文 我出身青樓俭缓,卻偏偏與公主長(zhǎng)得像克伊,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子华坦,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,675評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容