Flutter基礎（九）資源和圖片

劉望舒發表於2019-07-17
Flutter

本文首發於公眾號「劉望舒」

ReactNative入門系列 React Native元件 Flutter基礎系列

和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。 效果如下圖所示。

ZCFnM9.png
在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資料夾中的圖片，效果如下所示。

ZCFurR.png

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和圖片，載入圖片除了載入目錄和依賴包的圖片，還可以使用平臺的圖片，具體的見官方文件：flutter.dev/docs/develo…

這裡不僅分享大前端、Android、Java等技術，還有程式設計師成長類文章。
Flutter基礎（九）資源和圖片

相關文章