Flutter04-核心基础-资源管理

资源管理

Flutter APP 安装包中会包含代码和 assets（资源）两部分。Assets 是会打包到程序安装包中的，可在运行时访问。常见类型的 assets 包括静态数据（例如JSON文件）、配置文件、图标和图片等。

指定 assets

和包管理一样，Flutter 也使用pubspec.yaml 文件来管理应用程序所需的资源

flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png

Asset 变体（variant）

例如，如果应用程序目录中有以下文件:

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

然后pubspec.yaml文件中只需包含：

flutter:
  assets:
    - graphics/background.png

那么这两个graphics/background.png和graphics/dark/background.png 都将包含在您的 asset bundle中。前者被认为是_main asset_ （主资源），后者被认为是一种变体（variant）。

在选择匹配当前设备分辨率的图片时，Flutter会使用到 asset 变体（见下文）。

加载 assets

您的应用可以通过AssetBundle (opens new window)对象访问其 asset 。有两种主要方法允许从 Asset bundle 中加载字符串或图片（二进制）文件。

加载文本assets

通过 rootBundle (opens new window) 对象加载：每个 Flutter 应用程序都有一个 rootBundle (opens new window) 对象， 通过它可以轻松访问主资源包，直接使用 package:flutter/services.dart 中全局静态的 rootBundle 对象来加载 asset 即可。

加载图片

1）要加载图片，可以使用 AssetImage

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

void main(List<String> args) {
  // 加载文本assets
  WidgetsFlutterBinding.ensureInitialized(); // 解决加载json错误
  Future<String> future = rootBundle.loadString('assets/json/config.json');
  future.then((value) => print(value));

  // 加载图片
  runApp(const MaterialApp(
    title: 'My app',
    home: DecoratedBox(
        decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('assets/images/like-icon.png'),    
      ),
    )),
  ));
}

2）直接得到一个显示图片的widget，那么你可以使用Image.asset()方法：

void main(List<String> args) {
  runApp(Image.asset('assets/images/like-icon.png'));
}

3）声明分辨率相关的图片 assets

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

  • …/image.png
  • …/Mx/image.png
  • …/Nx/image.png
  • …etc.

其中 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将被选择。

如果未在Image widget上指定渲染图像的宽度和高度，那么Image widget将占用与主资源相同的屏幕空间大小。 也就是说，如果.../my_icon.png是72px乘72px，那么.../3.0x/my_icon.png应该是216px乘216px; 但如果未指定宽度和高度，它们都将渲染为72像素×72像素（以逻辑像素为单位）。

pubspec.yaml中asset部分中的每一项都应与实际文件相对应，但主资源项除外。当主资源缺少某个资源时，会按分辨率从低到高的顺序去选择 ，也就是说1x中没有的话会在2x中找，2x中还没有的话就在3x中找。

什么是逻辑分辨率、物理分辨率与像素比？https://www.jianshu.com/p/8563b3b86eef