初略讲解Flutter的资源管理

时间 2019-11-29

标签讲解 flutter 资源管理繁體版

原文原文链接

Flutter APP安装包中会包含代码和资源（assets）两部分。assets是会打包到程序安装包中的，可在运行时访问。常见类型的assets包括静态数据（如json文件）、配置文件以及图标和图片（JPEG、WebP、GIF、动画WebP/GIF、PNG、BMP、WBMP）等。html

1、指定assets

和上一节讲解包管理同样，Flutter也是使用pubspec.yaml文件来管理应用程序所需的资源，例如：android

flutter:
    assets:
        - images/my_icon.png
        - images/background.png
复制代码

针对上述代码，咱们大体能够了解到：ios

assets指定应包含应用程序中的文件；
每一个asset都经过相对于pubspec.yaml文件所在位置的显式路径进行标识；
asset的声明顺序是可有可无的；
asset的实际目录能够是任意文件夹（在本例中是images）

在构建期间，Flutter将asset放置到称为asset bundle的特殊存档中，应用程序能够在运行时读取它们（但不能修改）。json

2、asset变体（variant）

应用程序构建过程支持“asset变体”的概念：不一样版本的asset可能会显示在不一样的上下文中。也就是说：在pubspec.yaml的assets部分中指定所需的asset的路径，但在应用程序构建过程当中，会在相邻子目录中查找具备相同名称的任何文件，这些文件随后会与指定的asset一块儿被包含在asset bundle中。api

例如，应用程序目录中有如下文件：bash

.../pubspec.yaml
.../graphics/my_icon.png
.../graphics/background.png
.../graphics/dark/background.png
...etc.

上述咱们能够发现，有两个graphics/background.png和graphics/dark/background.png名称相同但路径不一样的图片文件，接下来咱们在pubspec.yaml文件中只指定：app

flutter:
    assets:
        - graphics/background.png
复制代码

那么这两个graphics/background.png和graphics/dark/background.png图片文件，都会在应用程序构建中包含到asset bundle中。前者被认为main asset（主资源），后者被认为是一种变体（variant）。框架

在选择匹配当前设备分辨率的图片时，Flutter会使用到asset变体，未来Flutter可能会将这种机制扩展到本地化、阅读提示等方面。async

3、加载assets

应用程序能够经过AssetBundle对象访问其asset，有两种主要方法容许从asset bundle中加载字符串或图片（二进制）文件。ide

一、加载文本assets

经过rootBundle对象加载：每一个Flutter应用程序都有一个rootBundle对象，经过它能够轻松访问主资源包，直接使用package:flutter/services.dart中全局静态的rootBundle对象来加载asset便可。
经过DefaultAssetBundle加载：建议使用DefaultAssetBundle来获取当前BuildContext的AssetBundle。这种方法不是使用应用程序构建的默认asset bundle，而是使用父级Widget在运行时动态替换的不一样的AssetBundle，这对于本地化或测试场景颇有用。

一般，可使用DefaultAssetBundle.of()在应用程序运行时来间接加载asset（例如json文件），而在Widget上下文以外或其它AssetBundle句柄不可用时，可使用rootBundle直接加载这些asset，例如：

import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;

Future<String> loadAsset() async {
  return await rootBundle.loadString('assets/config.json');
}
复制代码

二、加载图片assets

相似于原生开发，Flutter也能够为当前设备加载适合其分辨率的图像。

①、声明分辨率相关的图片assets

AssetImage能够将asset的请求逻辑映射到最接近当前设备像素比例（dpi）的asset，为了使这种映射起做用，必须根据特定的目录结构来保存asset：

.../image.png
.../Mx/image.png
.../Nx/image.png
...etc.

其中M和N是数字标识符，对应于其中包含的图像的分辨率，也就是说，M和N分别指定不一样设备像素比例的图片，例如：

.../my_icon.png
.../2.0x/my_icon.png
.../3.0x/my_icon.png

在设备像素比例为1.8的设备上，.../2.0x/my_icon.png将被选择；对于2.7的设备像素比例，.../3.0x/my_icon.png将被选择；而咱们在上面提到的main asset（主资源），它默认对应于1.0倍的分辨率图片，也就是.../my_icon.png将被选择。

所以在pubspec.yaml指定asset区域中的每一项都应与实际文件相对应，但main asset（主资源）项除外，由于当主资源缺乏某个资源时，会按分辨率从低到高的顺序去选择，也就说1x中没有的话会在2x中找，2x中没有的话就到3x中找。

值得一提的是，若是未在ImageWidget上指定渲染图像的宽度和高度，那么ImageWidget将占用与主资源相同的屏幕空间大小。也就是说，若是.../my_icon.png是72px乘72px，那么.../3.0x/my_icon.png应该是216px乘216px；但若是未给ImageWidget指定高度和宽度，它们都将渲染为72px乘72px。

②、加载本地资源图片

要加载本地图片，可使用AssetImage类。例如，咱们能够从上面的asset声明中加载背景图片：

Widget build(BuildContext context) {
  return new DecoratedBox(
    decoration: new BoxDecoration(
      image: new DecorationImage(
        image: new AssetImage('graphics/background.png'),
      ),
    ),
  );
}
复制代码

注意，AssetImage并不是是一个Widget，它其实是一个ImageProvider；不过你可使用Image.asset()方法，直接获得一个显示图片的Widget，例如：

Widget build(BuildContext context) {
  return Image.asset('graphics/background.png');
}
复制代码

使用默认的asset bundle加载资源时，内部会自动处理分辨率等，这些处理对开发者来讲是无感知的（若是使用一些更低级别的类，如ImageStream或ImageCache时你会注意到有与缩放相关的参数）。

③、加载依赖包中的资源图片

要加载依赖包中的图片，必须给AssetImage提供package参数。例如，假设你的应用程序依赖于一个名为“my_icons”的包，它具备如下目录结构：

.../pubspec.yaml
.../icons/heart.png
.../icons/1.5x/heart.png
.../icons/2.0x/heart.png
...etc.

而后加载图片，代码以下：

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

或

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

注意：包在使用自己的资源时也应该加上package参数来获取。

1)、打包包中的assets

若是在pubspec.yaml文件中声明了所需的资源，它将会打包到相应的package中。特别是，包自己使用的资源必须在pubspec.yaml中指定。

包也可使用在其lib/文件夹中但未在其pubspec.yaml文件中声明的资源。在这种状况下，对于要打包的图片，应用程序必须在pubspec.yaml中指定包含哪些图片。例如，一个名为“fancy_backgrounds”的包，可能包含如下文件：

.../lib/backgrounds/background1.png
.../lib/backgrounds/background2.png
.../lib/backgrounds/background3.png

假如第一张图片要打包，那么必须在pubspec.yaml文件下的assets区域中声明它：

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

lib/是隐含的，因此它不该该包含在资产路径中。

三、特定平台的assets

上面的资源都是Flutter应用中的，这些资源只有在Flutter框架运行以后才能使用，若是要给咱们的应用设置APP图标或者添加启动图，那咱们必须使用特定平台的assets。

设置APP图标

更新Flutter应用程序启动图标的方式与在本机Android或iOS应用程序中更新启动图标的方式相同。

Android

在Flutter项目的根目录中，导航到.../android/app/src/main/res目录，里面包含了各类资源文件夹（如mipmap-hdpi已包含占位符图片ic_launcher_png）。只需按照Android开发人员指南中的说明，将其替换为所需的资源，并遵照每种屏幕密度（dpi）的建议图标大小标准。

注意：若是您重命名.png文件，则还须要在您AndroidManifest.xml的<application>标签的android:icon属性中更新名称。
iOS

在Flutter项目的根目录中，导航到.../ios/Runner/Assets.xcassets/AppIcon.appiconset目录。该目录中已包含占位符图片，只需将它们替换为适当大小的图片，保留原始文件名称。

添加启动图

在Flutter框架加载时，Flutter会使用本地平台机制绘制启动页，此启动页将持续到Flutter渲染应用程序的第一帧时。

注意：这意味着若是你不在应用程序的main()方法中调用runApp()函数（或者更具体地说，若是你不调用window.render去响应window.onDrawFrame）的话，启动页将永远持续显示。

Android

要将启动屏幕（splash screen）添加到你的Flutter应用程序，请导航到.../android/app/src/main/res/drawable目录下，在launch_background.xml 文件中，经过自定义drawable来实现自定义启动界面（也能够直接换一张图片）。
iOS

要将图片添加到启动屏幕（splash screen）的中心，请导航到.../ios/Runner/Assets.xcassets/LaunchImage.imageset目录下，拖入图片并命名为LaunchImage.png、LaunchImage@2x.png、LaunchImage@3x.png。若是你使用不一样的文件名，那你还须要更新同一目录中的Contents.json文件，图片的具体尺寸能够查看苹果官方的标准。

您也能够经过打开Xcode彻底自定义storyboard。在Project Navigator中导航到Runner/Runner/Assets.xcassets目录中，拖入图片，或者经过在LaunchScreen.storyboard中使用Interface Builder进行自定义。