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
目录
相关文章
|
25天前
|
Dart IDE API
Flutter Riverpod 状态管理上手技巧分享
时代在进步 Riverpod 作为一个优秀的状态管理,猫哥也开始做些技术调研。今天会写两个例子,计数器、拉取数据。
Flutter Riverpod 状态管理上手技巧分享
|
3月前
|
编解码 缓存 调度
Flutter笔记:Flutter的应用生命周期状态(lifecycleState)管理
Flutter笔记:Flutter的应用生命周期状态(lifecycleState)管理
76 0
|
4月前
|
缓存 Dart 开发者
Flutter 最佳实践
Flutter 最佳实践 Flutter 是一个快速开发高质量、高性能移动应用程序的工具。如果你想要保证项目的质量和效率,那么在使用 Flutter 进行项目开发时,遵循一些最佳实践是非常必要的。
|
9月前
|
缓存 Dart 前端开发
Flutter 中使用 Widgetbook 管理你的组件 | 猫哥
Flutter 界面开发中我们有几个痛点 : - 与设计师协作复用一套设计规范(figma) - 可视化的管理你的组件代码(基础组件、业务组件) - 不同设备尺寸测试你的组件 - 实时修改你的测试组件参数
4212 1
Flutter 中使用 Widgetbook 管理你的组件 | 猫哥
|
10月前
|
Dart Linux 开发工具
使用Flutter构建桌面应用:一次开发,多平台支持
随着移动和桌面应用程序的需求不断增长,开发人员需要寻找一种高效的方法来构建多平台的应用程序。Flutter作为一个跨平台的UI框架,提供了一次编写、多平台运行的解决方案。在本文中,我们将探讨如何使用Flutter来构建桌面应用程序,并展示其多平台支持的优势。
1595 0
|
编解码 JSON Android开发
Flutter | 资源管理
Flutter | 资源管理
|
JavaScript 前端开发 中间件
《彻底掌握redux》之开发一个任务管理平台(上)
redux是上手react开发的必经之路,也是目前react项目中使用的最流行状态管理库。虽然我们不使用redux也可以通过react的state和父子props进行基本的数据通信和项目开发,但是对于一个大型项目而言,往往考虑的更多的是代码结构和组件之间的通信,我们需要一种很优雅且有利于扩展的方式去开发我们的复杂系统,所以这种情况下使用redux是最佳的选择。
123 0
|
前端开发 vr&ar Android开发
2022年为什么要使用Flutter构建应用程序?
今天每个人都想构建一个应用程序,但是谁又能责怪他们呢?事实上,如今每个人都拥有智能手机,它已迅速成为我们白天最常使用的工具。当我们没有它们时,我们会感到缺少一些东西,我们甚至把它们带到洗手间,我们甚至想不出没有它们,如何出门。无论我们喜欢与否,它对我们生活都在进行最快,最积极的影响,而这要归功于应用程序。
140 0
|
Web App开发 Dart 安全
flutter项目迁移空安全
迁移 你的代码里大部分需要更改的代码,都是可以轻易推导的。例如,如果一个变量可以为空,它的类型需要 ? 后缀。一个不可以为空的命名参数,需要使用 required 标记。
268 0
flutter项目迁移空安全
|
存储 前端开发 API
Flutter 状态管理概述【Flutter 专题 7】
Flutter 状态管理:概述 状态管理是 UI 框架必须实现的关键特性之一并且实现得很好。正是出于这个原因,许多开发人员已经开始构建专用的状态管理库;内置的解决方案对他们来说还不够,或者他们想根据自己的口味进行调整。
140 0
Flutter 状态管理概述【Flutter 专题 7】