Flutter 知识梳理 (资源加载) - Flutter APK 文件、图片的加载

在开发Flutter APK时，咱们能够将一些资源预置在APP中，这些资源能够分为如下几类：

• 文本
• 图片

为了统一管理，咱们将它们统一放在assets/目录下，而后介绍一下如何对它们进行读取。

1、文本

文本通常用于存储默认数据，在第一次进入无网的状况下进行数据的展现。

在pubspec.yaml的flutter标签下，声明要加载的文件名：

flutter:

  assets :
    - assets/files/hello.txt
复制代码

文本的加载有两种方式：

• 使用全局的静态rootBundle对象，须要导入package:flutter/services.dart，好处是不须要提供BuildContext。
• 使用DefaultAssetBundle获取当前BuildContext的AssetBundle来加载。

两种方式的示例代码以下，分别对应于_loadAssetFile()和_loadAssetFile2()：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(AssetDemo());

class AssetDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Assets Demo')),
        body: AssetFilesWidget(),
      ),
    );
  }

}

class AssetFilesWidget extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return _AssetFilesWidgetState();
  }

}

class _AssetFilesWidgetState extends State<AssetFilesWidget> {

  String text;

  @override
  void initState() {
    super.initState();
    _loadAssetFile2();
  }

  @override
  Widget build(BuildContext context) {
    return Text(text ?? 'default');
  }

  _loadAssetFile() async {
    String text = await rootBundle.loadString('assets/files/hello.txt');
    print(text);
    setState(() {
      this.text = text;
    });
  }

  _loadAssetFile2() async {
    String text = await DefaultAssetBundle.of(context).loadString('assets/files/hello.txt');
    setState(() {
      this.text = text;
    });
  }

}
复制代码

2、图片

图片的加载和文本相似，也是须要先进行声明再使用。

在Android中，咱们会将图片放在res/下对应的drawable-?文件夹中，而放在不一样的文件夹中，根据设备dpi(每英寸图片上点的个数)的不一样，最终加载到内存中的图片大小是不同的，在Flutter中也有相似的概念。

关于Android中相关的概念能够查看这篇文章 图片基础知识梳理(2) - Bitmap 占用内存分析。

在Flutter中，也有和drawable-?相同的设计，用N.X来代替：

其加载的逻辑为：

• 根目录默认对应于1.0分辨率的图片。
• 设备在选择图片时，将会选择离它dpiDensity最近的文件夹。假如dpiDensity=1.8，那么会选择2.0x目录下的资源。（dpiDensity用MediaQuery.of(context).devicePixelRatio来获取。）
• 肯定了须要选择哪一个文件夹的图片后，假如没有设置Image Widget控件的大小，那么最终加载显示的宽高还要用原始图片宽高再除以对应文件夹的系数。

示例以下： 在pubspec.yaml中声明：

flutter:

  uses-material-design: true

  assets :
    - assets/files/hello.txt
    - assets/images/
复制代码

使用Image(key : imageKey, image : AssetImage('assets/images/pic.png'))加载图片。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(AssetDemo());

class AssetDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Assets Demo')),
        body: AssetImageWidget(),
      ),
    );
  }

}

class AssetImageWidget extends StatefulWidget {
  
  @override
  State<StatefulWidget> createState() {
    return _AssetImageWidgetState();
  }
  
}

class _AssetImageWidgetState extends State<AssetImageWidget> {
  
  String text;
  GlobalKey imageKey = new GlobalKey();
  
  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[
      RaisedButton(onPressed: () {
        text = 'height=${imageKey.currentContext.size.height}'
            ',width=${imageKey.currentContext.size.height}'
            ',dpi=${MediaQuery.of(context).devicePixelRatio}';
        print(text);
      }, child: Text('refresh')),
      Image(key : imageKey, image : AssetImage('assets/images/pic.png'))
    ]);
  }
}
复制代码

为了验证以前的加载逻辑，试验了如下三种状况：

• 在主资源assets/images目录下添加pic.png，结果为：

height=96.0,width=96.0,dpi=3.0
复制代码

• 在主资源和assets/images/3.0x目录下添加pic.png，结果为：

height=32.0,width=32.0,dpi=3.0
复制代码

• 在主资源和assets/images/2.0x目录下添加pic.png，结果为：

height=48.0,width=48.0,dpi=3.0
复制代码

这里有点须要注意，当咱们改变资源目录的结构时，须要修改pubspec.yaml才能生效。

3、使用第三方包中的图片

3.1 应用程序使用第三方包中的图片

当应用程序依赖于包名为my_icons的包，加载图像的方式为：

AssetImage('icons/heart.png', package: 'my_icons')
复制代码

3.2 打包第三方图片

对于第三方包中的图片，有如下几种状况：

• 第三方包本身使用的资源，那么必需要在它自身的pubspec.yaml中声明，而且使用的时候要带上本身的包名。
• 第三方包提供给其它人使用，但自身不使用，分为两种状况：
  • 不管使用者是否用到都强制打包。这种状况下，第三方包须要在它的pubspec.yaml中声明，使用者则不须要。
  • 由使用者选择是否打包。第三方包将资源放在lib/目录下而且不在pubspec.yaml中声明，由使用者根据使用状况在它本身的pubspec.yaml中声明。

例如第三方包名为fancy_backgrounds，它的资源有：

…/lib/backgrounds/background1.png
…/lib/backgrounds/background2.png
…/lib/backgrounds/background3.png
复制代码

假如使用者但愿使用background1，那么就要在它本身的pubspec.yaml中声明，注意这里省略了隐式的lib目录：

flutter:
  assets:
    - packages/fancy_backgrounds/backgrounds/background1.png
复制代码

参考文章

• 在 Flutter 中添加资源和图片
• 图片基础知识梳理(2) - Bitmap 占用内存分析