Flutter | 一起学资源管理

简介: Flutter安装包中会包含代码和assets (资源)两部分,其中 assets 是会打包到程序安装包中,可以运行时访问,常见的 assets 类型包括静态数据(json文件),配置文件,图标和图片等。

如何指定assets

Flutter使用 pusbspec.yaml 来管理程序所需资源,对于每一个资源文件,都需要在 pushspec 中声明,否则调用时就会出现找不到资源文件的报错。

assets 指定应包含在应用程序中的文件,每个asset 都通过相对于 pushspec.yaml 文件所在的文件系统路径来标识自身路径,不过 assets 的声明顺序无关紧要,你可以放到任意文件夹下,如下图所示


网络异常,图片无法展示
|


网络异常,图片无法展示
|

Asset变体(variant)

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

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

../images/icon.png
../images/dark/icon.png

在你的 pubspec.yml 文件中只需包含

flutter:
   assets:
     - images/icon.png

在实际构建过程中, 上面两个文件都将打入你的 asset bundle 中,前者被认为是 main asset(主资源),后者被认为是一种变体(variant)。

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

加载 assets

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

加载图片

在不同的分辨率设备上,AssetImage 可以选择不同分辨率的图片进行显示,但为了让 Flutter 能知道如何去寻找,对于图片的位置,必须按照特定的目录结构,如下:

../icon.png
../2.0x/icon.png
../3.0x/icon.png

注意:在pubspec 声明时只需 声明 xx/icon.png 即可,其中xx是你具体的包位置。如果没懂,请上滑查看 Asset变体

当这样放置图片之后,比如在分辨率为2.7的设备上,3.0x的图片将被选择。

注意:如果未在 Image widget上指定渲染图像的宽高和宽度,那么 Image widget将占用与主资源相同的屏幕空间大小,比如主资源也就是默认的 icon.png大小是 100 x 100px,2.0x的是 300 x 300px,那么实际在渲染时,这张图将被渲染为 100 x 100px。

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


示例代码如下:

flutter:
  uses-material-design: true
  assets:
      - images/icon.jpeg
Image(width: 200, height: 200, image: AssetImage("images/icon.jpeg"))

注意

这里我们使用的是 AssetImage,其并非是一个 widget,实际上是一个 ImageProvider ,如果你可能期望直接得到一个现实图片的 widget,那么可以使用 Image.asset(),如下:

Image.asset("images/icon.jpeg");

使用默认的 asset bundle 加载资源时,内部会自动处理分辨率等,这些处理对于开发者来说无感知。当然如果使用一些更低级别的类,如 ImageStreamImageCache 时就会有其他相关参数,如缩放。

加载文本

flutter:
  uses-material-design: true
  assets:
      - data/test.json
rootBundle.loadString("data/test.json");

示例动画

网络异常,图片无法展示
|

加载依赖包中的资源图片

如果要加载某个依赖包中的图像,必须给 AssetImage 提供 package参数。

比如我们依赖了一个名为 test_icons 的包,它的结构如下:

.../images/icon.png
.../images/2.0x/icon.png
.../images/3.0x/icon.png

在我们加载图像时,就要使用如下两种方式(显示声明package):

AssetImage("images/icon.png",package:"test_icons")
Image.asset("images/icon.png",package:"test_icons")

在加载时,我们也可以选择实际在依赖包中存在,但未在其 pubspec.yaml 中声明的图片,对于这种情况,必须在 pubspec.yaml 中指定包含哪些图像。例如,名为 test_icons包中,包含以下图片:

.../images/test.png
.../images/background_gray.png

如果我们要使用其中的 test.png ,就必须在 pubspec.yaml 的 assets 部分中显示声明:

flutter:
  uses-material-design: true
  assets:
      - packages/test_icons/images/icon.jpeg
目录
相关文章
|
小程序 前端开发 Android开发
解决小程序中textarea ios端样式不兼容的两种方法
解决小程序中textarea ios端样式不兼容的两种方法
542 0
|
Dart 开发工具 Android开发
快速集成 Flutter Shorebird 热更新
Flutter Shorebird 是一种云端代码推送服务,可以让开发者在几分钟内集成,无需修改代码即可将更新推送到任何 Dart 代码,支持所有 Android 和 iOS 设备,并符合 App Store 和 Play Store 的规定。Shorebird 最大的优点是无代码侵入,快速集成,设计优秀。
538 2
快速集成 Flutter Shorebird 热更新
|
机器学习/深度学习 人工智能 安全
通义千问开源的QwQ模型,一个会思考的AI,阿里云百炼邀您第一时间体验
Qwen团队推出新成员QwQ-32B-Preview,专注于增强AI推理能力。通过深入探索和试验,该模型在数学和编程领域展现了卓越的理解力,但仍在学习和完善中。目前,QwQ-32B-Preview已上线阿里云百炼平台,提供免费体验。
3921 0
|
Ubuntu Linux 文件存储
如何使用 Linux 构建自己的 NAS 系统?
【7月更文挑战第28天】
7461 7
如何使用 Linux 构建自己的 NAS 系统?
|
存储 监控 数据可视化
如何优化Java应用的日志管理?
如何优化Java应用的日志管理?
|
移动开发 前端开发 小程序
[保姆级教程]uniapp实现底部导航栏
【6月更文挑战第6天】
1004 0
|
安全 前端开发 Java
【JVM】双亲委派机制详细解读(通俗易懂)
【JVM】双亲委派机制详细解读(通俗易懂)
1392 0
|
存储 机器学习/深度学习 数据挖掘
向量化操作简介和Pandas、Numpy示例
Pandas是一种流行的用于数据操作的Python库,它提供了一种称为“向量化”的强大技术可以有效地将操作应用于整个列或数据系列,从而消除了显式循环的需要。在本文中,我们将探讨什么是向量化,以及它如何简化数据分析任务。
643 0
|
存储 开发工具 git
Git 分支教程:详解分支创建、合并、删除等操作
Git是一种强大的分布式版本控制系统,它的分支功能使得团队协作和代码管理变得更加灵活和高效。分支可以让开发人员在不影响主线开发的情况下进行并行开发和实验性工作。本篇博客将详解Git分支的创建、合并、删除等操作,帮助你更好地理解和使用Git的分支功能。
2623 0