0
点赞
收藏
分享

微信扫一扫

Flutter # 资源管理

蓝哆啦呀 2022-02-18 阅读 136
flutter

Flutter APP 安装包中包含代码和资源文件(assets)。Flutter 使用 pubspec.yaml 来管理应用程序所需的资源。

1 指定 Asset

eg.

flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png
# 注意:上面的路径是 pubspec.yaml 所在路径的相对路径。

在构建期间,Flutter 将 asset 放置到 asset bundle 的特殊存档中,应用程序可以在运行时读取它们(但不能修改)。

2 Asset 变体(variant)

Asset 变体:不同版本的 asset 显示在不同的上下文中。
在 pubspec.yaml 的 assets 部分中指定 asset 路径,在构建过程中,会在相邻子目录中查找同名文件。同名文件会与指定的 asset 一起被包含在 asset bundle 中。

eg.

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

flutter:
  assets:
    - graphics/background.png

graphics/background.png 和 graphics/dark/background.png 都将包含在 asset bundle 中。前者被认为是_main asset_ (主资源),后者被认为是一种变体(variant)

用途:选择匹配当前设备分辨率的图片等场景。

3 加载 assets

通过 AssetBundle 对象访问其 asset。

3.1 加载文本assets

  • 通过 rootBundle 对象加载:每个Flutter应用程序都有一个 rootBundle 对象,通过它访问主资源包。 package:flutter/services.dart 中全局静态的rootBundle。
  • 通过 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');
}

3.2 加载图片

声明分辨率相关的图片 assets

AssetImage 可以将 asset 的请求逻辑映射到最接近当前设备像素比例(dpi)的 asset。为了使这种映射起作用,必须根据特定的目录结构来保存asset:
…/my_icon.png
…/2.0x/my_icon.png
…/3.0x/my_icon.png
其中数字标识符对应于其中包含的图像的分辨率。
如果未在Image widget上指定渲染图像的宽度和高度,那么Image widget将占用与主资源相同的屏幕空间大小。 也就是说,如果…/my_icon.png是72px乘72px,那么…/3.0x/my_icon.png应该是216px乘216px; 但如果未指定宽度和高度,它们都将渲染为72像素×72像素(以逻辑像素为单位)。

主资源默认对应于1.0倍的分辨率图片。当主资源缺少某个资源时,会按分辨率从低到高的顺序去选择 ,也就是说1x中没有的话会在2x中找,2x中还没有的话就在3x中找。

加载图片

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

注意,AssetImage 并非是一个widget, 它实际上是一个 ImageProvider,有些时候你可能期望直接得到一个显示图片的widget,那么你可以使用Image.asset()方法,如:

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.

AssetImage('icons/heart.png', package: 'my_icons')
Image.asset('icons/heart.png', package: 'my_icons')

注意:包在使用本身的资源时也应该加上package参数来获取。

打包包中的 assets

如果在 pubspec.yaml 中声明了资源,它将会被打包。包本身使用的资源必须在 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/是隐含的,所以它不应该包含在资产路径中。

3.3 特定平台 assets

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

设置APP图标

  • Android
    .../android/app/src/main/res目录中按照Android开发指南相同的要求, 将其替换为所需的资源,并遵守每种屏幕密度(dpi)的建议图标大小标准。
    注意: 如果重命名.png文件,则还必须在AndroidManifest.xml的<application>标签的android:icon属性中更新名称。

  • iOS
    .../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
    也可以通过打开Xcode完全自定义storyboard。在Project Navigator中导航到Runner/Runner然后通过打开Assets.xcassets拖入图片,或者通过在LaunchScreen.storyboard中使用Interface Builder进行自定义
举报

相关推荐

0 条评论