内容简介:Flutter应用程序可以包含代码和资源(assets)。assets是会打包到程序安装包中的,可在运行时访问。常见类型的assets包括静态数据(如json文件)、配置文件以及图标和图片(JPEG、WebP、GIF、动画WebP/GIF、PNG、BMP、WBMP)等。和上一节讲解包管理一样,Flutter也是使用针对上述代码,我们大致可以了解到:
Flutter应用程序可以包含代码和资源(assets)。assets是会打包到程序安装包中的,可在运行时访问。常见类型的assets包括静态数据(如json文件)、配置文件以及图标和图片(JPEG、WebP、GIF、动画WebP/GIF、PNG、BMP、WBMP)等。
一、指定assets
和上一节讲解包管理一样,Flutter也是使用 pubspec.yaml
文件来管理应用程序所需的资源,例如:
flutter: assets: - images/my_icon.png - images/background.png 复制代码
针对上述代码,我们大致可以了解到:
pubspec.yaml
二、asset变体(variant)
应用程序构建过程支持asset变体的概念:不同版本的asset可能会显示在不同的上下文中。也就是说:假如在 pubspec.yaml
文件中我们只指定所用到的asset的路径,但是在应用程序构建过程中,会在相邻子目录中查找具有相同名称的任何文件,这些文件随后会与指定的asset一起被包含在asset bundle中。
例如,应用程序目录中有以下文件:
- .../pubspec.yaml
- .../graphics/my_icon.png
- .../graphics/background.png
- .../graphics/dark/background.png
- ...etc.
上述我们可以发现,有两个 graphics/background.png
和 graphics/dark/background.png
名称相同但路径不同的图片文件,接下来我们在 pubspec.yaml
文件中只指定:
flutter: assets: - graphics/background.png 复制代码
那么这两个 graphics/background.png
和 graphics/dark/background.png
图片文件,都会在应用程序构建中包含到asset bundle中。前者被认为main asset(主资源),后者被认为是一种变体(variant)。
在选择匹配当前设备分辨率的图片时,Flutter会使用到asset变体,将来Flutter可能会将这种机制扩展到本地化、阅读提示等方面。
三、加载assets
应用程序可以通过 AssetBundle
对象访问其asset,有两种主要方法允许从asset bundle中加载字符串或图片(二进制)文件。
1、加载文本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'); } 复制代码
2、加载图片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中找。
值得一提的是,如果未在 Image
Widget上指定渲染图像的宽度和高度,那么 Image
Widget将占用与主资源相同的屏幕空间大小。也就是说,如果 .../my_icon.png
是72px乘72px,那么 .../3.0x/my_icon.png
应该是216px乘216px;但如果未给 Image
Widget指定高度和宽度,它们都将渲染为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进行自定义。
以上所述就是小编给大家介绍的《初略讲解Flutter的资源管理》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Kubernetes 资源管理概述
- 集群资源管理之 DRF
- 虚拟化云计算中的资源管理策略
- 解析容器化技术中的资源管理
- Flink 1.10 细粒度资源管理解析
- Hadoop 系列(二)—— 集群资源管理器 YARN
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Effective Ruby:改善Ruby程序的48条建议
Peter J. Jones / 杨政权、秦五一、孟樊超 / 机械工业出版社 / 2016-1 / 49
如果你是经验丰富的Rub程序员,本书能帮助你发挥Ruby的全部力量来编写更稳健、高效、可维护和易执行的代码。Peter J.Jones凭借其近十年的Ruby开发经验,总结出48条Ruby的最佳实践、专家建议和捷径,并辅以可执行的代码实例。 Jones在Ruby开发的每个主要领域都给出了实用的建议,从模块、内存到元编程。他对鲜为人知的Ruby方言、怪癖、误区和强力影响代码行为与性能的复杂性的揭......一起来看看 《Effective Ruby:改善Ruby程序的48条建议》 这本书的介绍吧!