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
目录
相关文章
在 Flutter 中如何使用 ChangeNotifierProvider 实现数据共享?
在 Flutter 中如何使用 ChangeNotifierProvider 实现数据共享?
|
1月前
|
缓存 JavaScript API
Flutter&鸿蒙next 状态管理框架对比分析
在 Flutter 开发中,状态管理至关重要,直接影响应用的性能和可维护性。本文对比分析了常见的状态管理框架,包括 setState()、InheritedWidget、Provider、Riverpod、Bloc 和 GetX,详细介绍了它们的优缺点及适用场景,并提供了 Provider 的示例代码。选择合适的状态管理框架需考虑应用复杂度、团队熟悉程度和性能要求。
109 0
|
7月前
|
Dart
Flutter状态管理:RxDart,详细介绍
Flutter状态管理:RxDart,详细介绍 RxDart是一个基于Dart语言的响应式编程库,它提供了一套用于处理异步事件序列的工具。在Flutter应用中,RxDart可以很好地用于管理应用状态。
306 0
|
7月前
|
Dart IDE API
Flutter Riverpod 状态管理上手技巧分享
时代在进步 Riverpod 作为一个优秀的状态管理,猫哥也开始做些技术调研。今天会写两个例子,计数器、拉取数据。
165 1
Flutter Riverpod 状态管理上手技巧分享
|
缓存 Dart 前端开发
Flutter 中使用 Widgetbook 管理你的组件 | 猫哥
Flutter 界面开发中我们有几个痛点 : - 与设计师协作复用一套设计规范(figma) - 可视化的管理你的组件代码(基础组件、业务组件) - 不同设备尺寸测试你的组件 - 实时修改你的测试组件参数
4265 1
Flutter 中使用 Widgetbook 管理你的组件 | 猫哥
|
7月前
|
缓存 Dart 开发者
Flutter 最佳实践
Flutter 最佳实践 Flutter 是一个快速开发高质量、高性能移动应用程序的工具。如果你想要保证项目的质量和效率,那么在使用 Flutter 进行项目开发时,遵循一些最佳实践是非常必要的。
139 0
Flutter常用的状态管理介绍
Flutter中常用的状态管理方案主要有以下几种。
Flutter常用的状态管理介绍
|
Java Android开发
Flutter(八)——状态管理(二)
Flutter(八)——状态管理(二)
278 0
Flutter(八)——状态管理(二)
|
JavaScript 前端开发 Java
Flutter(八)——状态管理(一)
Flutter(八)——状态管理(一)
515 0
Flutter(八)——状态管理(一)
|
前端开发 JavaScript Android开发
Flutter | 关于状态管理,别再被吓着了
本篇是带大家了解并明白 Flutter 中状态管理相关,着眼与实际应用与通俗(说人话)解释,杜绝概念连篇 ❎ 。
160 0