和Android開發一樣,Flutter也有asset這一概念,asset是打包到程式安裝包中的,可在執行時訪問。常見的asset型別包括靜態資料(例如JSON檔案)、配置檔案、圖示和圖片(JPEG,WebP,GIF,動畫WebP / GIF,PNG,BMP和WBMP)。本文會通過例子,來簡單介紹在Flutter中如何新增資源和圖片。
1.指定assets
要想使用asset,需要先讓asset被識別,在專案根目錄中的pubspec.yaml中定義圖片就可以了。
flutter:
assets:
- assets/1.png
- assets/2.png
在構建期間,Flutter會將asset放置到稱為asset bundle的特殊存檔中,應用程式可以在執行時讀取它們。 如果想要包含某一個目錄中的所有的資源,直接指定目錄的名稱:
flutter:
assets:
- assets/
這種指定只包含直接位於目錄中的檔案,如果想要新增位於子目錄中的檔案,那麼就需要在pubspec.yaml中為每個目錄新增一個條目。
在示例中我們使用的是asset目錄,這個目錄可以是任意資料夾,比如我們可以在根目錄建立一個images目錄來儲存圖片,就可以這麼寫:
flutter:
assets:
- images/1.png
- images/2.png
2 載入文字
每個Flutter應用程式都有一個rootBundle物件, 可以輕鬆訪問主資源包,也就是使用package:flutter/services.dart中全域性靜態的rootBundle物件來載入asset。
不過官網建議使用DefaultAssetBundle.of來獲取當前BuildContext的AssetBundle。 這種方法不是使用應用程式構建的預設asset,而是允許父視窗Widget在執行時替換不同的AssetBundle,這對於本地化或測試場景非常有用。
接下來寫一個例子來載入文字。在根目錄新建一個assets檔案,並新建一個swordsmen.json檔案,內容如下所示。
assets/swordsmen.json
[
{
"name": "張無忌",
"gongfu":"乾坤大挪移",
},
{
"name": "令狐沖",
"gongfu": "獨孤九劍",
}
]
然後在pubspec.yaml配置該 asset:
flutter:
assets:
- assets/swordsmen.json
最後載入這個json檔案,並把它們顯示到介面上。
import 'package:flutter/material.dart';
import 'dart:convert' show json;
void main() => runApp(AssetsWidget());
class AssetsWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Flutter",
home: Scaffold(
appBar: AppBar(
title: Text("載入文字示例"),
),
body:JsonWidget(),
),
);
}
}
class JsonWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _JsonWidgetState();
}
}
class _JsonWidgetState extends State<JsonWidget> {
@override
Widget build(BuildContext context) {
return FutureBuilder(//1
future: DefaultAssetBundle.of(context).loadString("assets/swordsmen.json"),//2
builder: (context, snapshot) {
if (!snapshot.hasData) {//3
return Center(
child: CircularProgressIndicator(),
);
}else{
List<dynamic> data = json.decode(snapshot.data.toString());//4
return ListView.builder(
itemCount: data.length,
itemBuilder: (BuildContext context, int index) {
return Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text("名字: ${data[index]["name"]}"),
Text("絕學: ${data[index]["gongfu"]}"),
],
),
);
},
);
}
},
);
}
}
關鍵程式碼都在_JsonWidgetState中,註釋1處的FutureBuilder是非同步模型,使用它可以很容易的得到當前Widget的狀態,並在載入資料時顯示不同的內容,比如網路請求資料,如果資料沒有返回就顯示載入介面,資料返回就顯示列表,資料載入失敗就顯示失敗介面。註釋2處獲取當前BuildContext的AssetBundle,然後載入\
assets/swordsmen.json中的資料,將資料和狀態等資訊存在快照snapshot中。註釋3處如果snapshot沒有資料,就顯示CircularProgressIndicator,它是一個圓形進度條。如果有資料就在註釋4處將snapshot中的資料解析並存到List中,用ListView來顯示。其中用到了dart:convert庫,它用於在不同資料之間轉換的編碼器和解碼器,這裡用於將Josn資料轉換為List。
效果如下圖所示。
在Widget上下文之外,或者當AssetBundle的控制程式碼不可用時,也可以使用rootBundle直接載入此類資源,例如:
import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;
Future<String> loadAsset() async {
return await rootBundle.loadString('assets/swordsmen.json');
}
對應於上面的例子,修改註釋2處的程式碼,並引入’package:flutter/services.dart’ 包就可以了。
import 'package:flutter/services.dart' show rootBundle;
...
future: rootBundle.loadString("assets/swordsmen.json"),
...
3.載入圖片
在專案根目錄中建立images資料夾,然後放入兩張圖片,並在在pubspec.yaml中配置:
flutter:
assets:
- images/light.png
- images/decode.png
接下來我們在程式碼中載入圖片檔案:
import 'package:flutter/material.dart';
void main() => runApp(AssetsWidget());
class AssetsWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Flutter",
home: Scaffold(
appBar: AppBar(
title: Text("載入圖片示例"),
),
body: ImageWidget(),
),
);
}
}
class ImageWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: <Widget>[
Image.asset(
'images/decode.png',
height: 200.0,
),
Image.asset(
'images/light.png',
height: 200.0,
),
],
),
);
}
}
通過Image.asset就可以載入images資料夾中的圖片,效果如下所示。
3.1 載入不同解析度的圖片
假設主要資源對應的解析度為1.0,比如是72px72px,如果還有144px144px和216px216px的圖片,那麼可以在images資料夾下建立兩個資料夾:2.0x和3.0x,將對應解析度的圖片拷貝進去,2.0x對應的是144px144px,3.0x對應的是216px*216px。
…images/decode.png
…images/2.0x/decode.png
…images/3.0x/decode.png
在pubspec.yaml配置對應圖片資源:
flutter:
assets:
- images/decode.png
Flutter可以為當前裝置載入適合其解析度的影象,如果在裝置畫素比率為1.8會選擇…images/2.0x/decode.png ,如果裝置畫素比率為2.8,會選擇…images/3.0x/decode.png,裝置選擇的是相近的圖片資源。
3.2 載入依賴包中的圖片
假設我們的應用程式依賴於一個名為best_icons的包,它具有以下目錄結構:
…/pubspec.yaml
…/icons/add.png
…/icons/1.5x/phone.png
…/icons/2.0x/phone.png
可以使用AssetImage來載入圖片:
AssetImage('icons/phone.png', package: 'best_icons')
總結
這一篇介紹了載入asset和圖片,載入圖片除了載入目錄和依賴包的圖片,還可以使用平臺的圖片,具體的見官方文件:https://flutter.dev/docs/development/ui/as...
By: Laravel-China 寧澤林
MyBlog: nizer.in