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等技术，还有程序员成长类文章。