【Flutter实战】资源管理

浩浩 等级 541 0 0
标签: flutter移动端

2.4 资源管理

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

指定 assets

和包管理一样,Flutter也使用pubspec.yaml文件来管理应用程序所需的资源,举个例子:

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

assets指定应包含在应用程序中的文件, 每个asset都通过相对于pubspec.yaml文件所在的文件系统路径来标识自身的路径。asset的声明顺序是无关紧要的,asset的实际目录可以是任意文件夹(在本示例中是assets文件夹)。

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

Asset 变体(variant)

构建过程支持“asset变体”的概念:不同版本的asset可能会显示在不同的上下文中。 在pubspec.yaml的assets部分中指定asset路径时,构建过程中,会在相邻子目录中查找具有相同名称的任何文件。这些文件随后会与指定的asset一起被包含在asset bundle中。

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

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

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

flutter:
  assets:
    - graphics/background.png

那么这两个graphics/background.pnggraphics/dark/background.png 都将包含在您的asset bundle中。前者被认为是main asset (主资源),后者被认为是一种变体(variant)。

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

加载 assets

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

加载文本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');
}

加载图片

类似于原生开发,Flutter也可以为当前设备加载适合其分辨率的图像。

声明分辨率相关的图片 assets

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

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

其中M和N是数字标识符,对应于其中包含的图像的分辨率,也就是说,它们指定不同设备像素比例的图片。

主资源默认对应于1.0倍的分辨率图片。看一个例子:

  • …/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中找。

加载图片

要加载图片,可以使用 AssetImage类。例如,我们可以从上面的asset声明中加载背景图片:

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

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

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

使用默认的 asset bundle 加载资源时,内部会自动处理分辨率等,这些处理对开发者来说是无感知的。 (如果使用一些更低级别的类,如 ImageStreamImageCache 时你会注意到有与缩放相关的参数)

依赖包中的资源图片

要加载依赖包中的图像,必须给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参数来获取

打包包中的 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”,见图2-8)。 只需按照Android开发人员指南中的说明, 将其替换为所需的资源,并遵守每种屏幕密度(dpi)的建议图标大小标准。

    【Flutter实战】资源管理

    注意: 如果您重命名.png文件,则还必须在您AndroidManifest.xml<application>标签的android:icon属性中更新名称。

  • iOS

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

    【Flutter实战】资源管理

更新启动页

【Flutter实战】资源管理

在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.pngLaunchImage@2x.pngLaunchImage@3x.png。 如果你使用不同的文件名,那您还必须更新同一目录中的Contents.json文件,图片的具体尺寸可以查看苹果官方的标准。

您也可以通过打开Xcode完全自定义storyboard。在Project Navigator中导航到Runner/Runner然后通过打开Assets.xcassets拖入图片,或者通过在LaunchScreen.storyboard中使用Interface Builder进行自定义,如图2-11所示。

【Flutter实战】资源管理

收藏
评论区

相关推荐

带你全面了解 Flutter,它好在哪里?它的坑在哪里? 应该怎么学?
回顾了这段时间解答关于 Flutter 的各种问题后,我突然发现很多刚刚接触 Flutter 的萌新,对于 Flutter 都有着不同程度的误解,而每次重复的解释又十分浪费时间,最终我还是决定写篇文章来做个总结。 内容有点长,但是相信能帮你更好地去认识 Flutter 。 Flutter 的起源 Flutter 的诞生其实比较有意思,Flutter
可以用Flutter愉快的开发web 了
简单的试了一下,完全用flutter现有的widget进行开发。github上面有说现在是preview版本,有些widget还不能用。但是最终是会支持整个的flutter现有的UI的。 跟用flutter开发原生app一样。flutter_web还有很长的一段路要走。希望年底能出个像样的版本。 不支持第三方库说明 目前pub.da
Flutter 移动应用开发指南
Flutter 移动应用开发指南 Flutter 作为新一代的跨平台 UI 框架,已经在 Android 和 iOS 移动平台被广泛使用,未来还会进一步扩展到 Web、桌面和嵌入式等平台。只要编写一次代码,就可处处运行,真正做到了全屏制霸。本文将通过从零开发一个类似抖音的短视频应用来展示 Flutter 应用的完整开发过程,以及它的强大性和易用性。
Flutter 2.0 下混合开发浅析
多余的前言 Flutter 2.0 发布时,其中最受大家关注之一的内容就是 AddtoApp 相关的更新,因为除了热更新之外,Flutter 最受大家诟病的就是混合开发体验不好。 为什么不好呢?因为 Flutter 的控件渲染直接脱离了原生平台,也就是无论页面堆栈和渲染树都独立于平台运行,这固然给 Flutter 带来了较好的跨平台体验
【Flutter实战】初识Flutter
1.2 初识Flutter 1.2.1 Flutter简介Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App,一套代码同时运行在 iOS 和 Android平台。 Flutter提供了丰富的组件、接口,开发者可以很快地为 Flutter添加 native扩展。同时 Flu
【Flutter 实战】安装Flutter
1.3 搭建Flutter开发环境工欲善其事必先利其器,本节首先会分别介绍一下在Windows和macOS下Flutter SDK的安装,然后再介绍一下配IDE和模拟器的使用。 1.3.1 安装Flutter由于Flutter会同时构建Android和IOS两个平台的发布包,所以Flutter同时依赖Android SDK和iOS SDK,在安装Fl
【Flutter实战】调试Flutter应用
2.5 调试Flutter应用有各种各样的工具和功能来帮助调试Flutter应用程序。 Dart 分析器在运行应用程序前,请运行flutter analyze测试你的代码。这个工具是一个静态代码检查工具,它是dartanalyzer工具的一个包装,主要用于分析代码并帮助开发者发现可能的错误,比如,Dart分析器大量使用了代码中的类型注释来帮
【Flutter实战】调试Flutter应用
2.5 调试Flutter应用有各种各样的工具和功能来帮助调试Flutter应用程序。 Dart 分析器在运行应用程序前,请运行flutter analyze测试你的代码。这个工具是一个静态代码检查工具,它是dartanalyzer工具的一个包装,主要用于分析代码并帮助开发者发现可能的错误,比如,Dart分析器大量使用了代码中的类型注释来帮
解读 Flutter 全平台开发的误解与偏见
Flutter 2.0 发布之后,Web 版本进入了 stable 分支,Desktop 版本也可以在 stable 分支通过 snapshot beta 镜像开始预览使用,导致最近关于 “Flutter 制霸全平台” 之类的话题又被炒作起来,所以本篇主要对这个话题做一次解答。1、Flutter 制霸全平台谷歌官方在 F
Flutter - 深入理解setState更新机制
基于Flutter 1.5的源码剖析, 分析flutter的StatefulWidget的UI更新机制,相关源码:widgets/framework.dartwidgets/binding.dartscheduler/binding.dartlib/ui/window.dartflutter/runtime/runtime_controller.c
Flutter - 深入理解Flutter动画原理
基于Flutter 1.5,从源码视角来深入剖析flutter动画原理,相关源码目录见文末附录一、概述动画效果对于系统的用户体验非常重要,好的动画能让用户感觉界面更加顺畅,提升用户体验。 1.1 动画类型Flutter动画大的分类来说主要分为两大类: 补间动画:给定初值与终值,系统自动补齐中间帧的动画 物理动画:遵循物理学定律
Flutter - 深入理解Flutter应用启动
基于Flutter 1.5,从源码视角来深入剖析flutter应用的启动流程,相关源码目录见文末附录一、概述上一篇文章 已经介绍了FlutterApplication和FlutterActivity的onCreate()方法执行过程, 并触发Flutter引擎的启动,并最终执行到runApp(Widget app)方法,这才刚刚开始执行dart的
Flutter - 深入理解Flutter引擎启动
基于Flutter 1.5,从源码视角来深入剖析flutter引擎的启动流程,相关源码目录见文末附录一、Flutter引擎启动工作 1.1 Flutter启动概览Flutter作为一款跨平台的框架,可以运行在Android、iOS等平台,Android为例讲解如何从Android应用启动流程中衔接到Flutter框架,
Flutter - Flutter渲染机制—GPU线程
基于Flutter 1.5,从源码视角来深入剖析flutter渲染机制,相关源码目录见文末附录一、GPU线程渲染看Flutter的渲染绘制过程的核心过程包括在ui线程和gpu线程,上一篇文章已经详细介绍了UI线程的工作原理, 本文则介绍GPU线程的工作原理,这里需要注意的是,gpu线程是指运行着GPU Task Runner的名叫gpu
字节跳动为什么选用Flutter:并非跨平台终极之选,但它可能是不一样的未来
2018 年 12 月 ,Google 宣布 Flutter 1.0 版本正式发布。截至目前, Flutter 在 Github 上已获得 88000+ 的关注和 11000+ 的 Fork ,其发展速度相当惊人,是今年移动端最火热的开发框架之一。Flutter 大火背后的原因是什么?为什么越来越多的企业和开发者会选择使用 Flutter?Flutter 会