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

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

---

這裏不只分享大前端、Android、Java等技術，還有程序員成長類文章。