flutter中的资源和图片加载示例详解

目录
  • 封面图
  • 指定相应的资源
  • 资源绑定 Asset bundling
  • 资源变体
  • 加载资源
  • 加载文本资源
  • 加载图片
  • 加载依赖包中的图片
  • 最后

封面图

下个季度的目标是把前端监控相关的内容梳理出来，梳理出来之后可能会在公司内部做个分享～

Flutter应用程序既括代码也包括一些其他的资产，我们通常这些资产为资源。

有时候我会思考assets这个单词，在程序中到底应该翻译为资产呢？还是翻译为资源？按照习惯，我们这里还是称为资源好了～

这些资源是一些与应用程序捆绑在一起和并且部署应用时会用到的的文件，在运行时也可以进行访问。常见类型的资源包括静态数据（例如，JSON文件）、配置文件、图标和图像（JPEG、WebP、GIF、动画WebP/GIF、PNG、BMP和WBMP）等等。

指定相应的资源

Flutter使用位于项目根目录的pubspec.yaml文件来识别应用程序所需的资源。

yaml文件是一种类似于json的可读性高，用来表示数据序列化的文件格式。

比如：

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

如果我们想要包含目录下的所有资产，我们需要指定目录名，并在末尾使用/字符：

flutter:
  assets:
    - directory/
    - directory/subdirectory/

需要注意的是：

/**
除非子目录中有同名文件，否则仅包含直接位于目录中的文件。
要添加位于子目录中的文件，请为每个目录创建一个条目。
**/

资源绑定 Asset bundling

flutter应用中的资源必须包含在应用中，同时，每个资源都需要在pubspec.yaml文件中指定相应的路径。资源之间的顺序无关紧要。

在Flutter应用的构建过程中，Flutter会将资源放入一个特殊的归档文件，称为asset bundle，应用程序在运行时从中读取相应的资源。

资源变体

应用的构建过程支持资源变体的概念：即，不同版本的资源有可能显示在不同的上下文之中。当我们在pubspec.yaml的assets部分中指定资源的路径时，构建过程会在相邻子目录中查找任何同名文件。然后，这些文件与指定的资源一起包含在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.png和/graphics/dark/background.png这两个文件都会出现在我们的asset bundle(资源包)之中。

前者被认为是一个主要的资源，后者则被认为是一个变体的资源。

如果我们只指定目录：

flutter:
  assets:
    - graphics/

那么，graphics/my_icon.png, graphics/background.png 以及 graphics/dark/background.png 都会包含在我们的asset bundle(资源包)之中。

加载资源

Flutter应用可以通过AssetBundle对象访问资源。

AssetBundle对象有两个主要的方法：

  • loadString()可以让我们加载字符串相关的资源
  • load()可以让我们加载图像以及二进制相关的资源

加载文本资源

每个Flutter应用程序都有一个rootBundle对象，方便访问主资源包。

我们可以从package:flutter/services.dart中直接导入这个方法，直接使用。

但是通常的建议是：通过使用DefaultAssetBundle组件来获取当前buildContext的AssetBundle。

这种方法允许父组件在运行时替换不同的AssetBundle，对于本地化或测试场景非常有用。

通常情况下，我们可以使用DefaultAssetBundle.of（）方法从应用程序的运行时rootBundle间接加载资产，例如JSON文件。

在组件的上下文之外，或者当AssetBundle的句柄不可用时，我们可以使用rootBundle直接加载此类资源。例如：

import 'package:flutter/services.dart' show rootBundle;
Future<String> loadAsset() async {
  return await rootBundle.loadString('assets/config.json');
}

加载图片

Flutter可以根据当前设备像素比加载分辨率适当的图像。

AssetImage知道如何将逻辑请求的资源映射到与当前设备像素比率最匹配的资源上。为了使此映射正常工作，应根据特定的目录结构排列资产，例如：

.../image.png
.../Mx/image.png
.../Nx/image.png
...etc.

其中M和N是数字标识符，对应于其中包含的图像的标称分辨率。换句话说，它们指定了图像的设备像素比。

主要资源默认对应1.0的分辨率。例如，名为my_icon.png的图像：

.../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这个图像将会被加载。

如果未在“图像”组件件上指定渲染图像的宽度和高度，则使用标称分辨率缩放资源，使其占用与主资源相同的屏幕空间，只是分辨率更高。也就是说，如果/my_icon.png是72px乘72px，然后/3.0x/my_icon.png应为216px x 216px；但如果没有指定宽度和高度，它们都会呈现为72px乘72px（以逻辑像素为单位）。

想要真正的加载一张图片，我们只需要在组件的build方法中使用AssetsImage对象，例如：

return const Image(image: AssetImage('graphics/background.png'));

加载依赖包中的图片

想要加载依赖包中的图片，我们需要将包的名称传递给AssetImage对象。

假设我们有一个图片的依赖包名字为my_icons,它内部结构如下：

.../pubspec.yaml
.../icons/heart.png
.../icons/1.5x/heart.png
.../icons/2.0x/heart.png
...etc.

想要加载这些图片，我们需要这样使用：

return const AssetImage('icons/heart.png', package: 'my_icons');

最后

资源和图片的内容这里仅仅描述了一些基本的概念和用法～

当然还包括其他一些内容，比如：

  • 资源的打包
  • 不同平台的资源
  • 等等

这些都是我们需要注意的内容～

以上就是flutter中的资源和图片加载示例详解的详细内容，更多关于flutter资源图片加载的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Flutter 图片开发核心技能快速掌握教程

    目录 正文 使用网络图片 把网络图片缓存到磁盘 使用 assets 图片 适配浅色与深色模式 在不同的设备使用不同分辨率的图片 关于设备 dpr 不完全匹配的处理 忽略 dpr 信息 使用相册图片 使用相机拍摄的图片 使用内存图片 图片用做装饰 图片预加载 centerSlice centerSlice 只能放大,不能缩小. 全局缓存 ImageCache 的设置 图片类之间的关系 ImageProvider obtainKey(ImageConfiguration) 方法 resolve(Im

  • Flutter图片缓存管理ImageCache原理分析

    目录 引言 PaintingBinding 减少图片缓存 增大阀值 思考 引言 设计: 嗯? 这个图片点击跳转进详情再返回图片怎么变白闪一下呢?产品: 是啊是啊! 一定是个bug开发: 囧囧囧 在开发过程中, 也许你也遇到过这样一个场景. 进入一个页面后,前一个页面的图片都会闪白一下. 或者在列表中,加载很多列表项后,之前列表中的图片都需要重新加载.你有没有想过这一切的原因是什么呢? 没错! 它就是我们今天介绍的主人公 --- ImageCache 可能有些人对ImageCache还有些陌生,

  • Android Flutter图片处理之高斯模糊的实现

    Android Flutter图片处理之高斯模糊的实现

    目录 ImageFilter 横向模糊 垂直模糊 xy轴同时模糊 用法 BackdropFilter ImageFiltered 区别 ImageFilter 在Flutter中,使图片模糊有2种方式,这2种方式都需要配合ImageFilter.blur()使用. factory ImageFilter.blur({ double sigmaX = 0.0, double sigmaY = 0.0, TileMode tileMode = TileMode.clamp }) sigmaX:以x轴

  • Flutter加载图片的多样玩法汇总

    目录 加载本地图片 圆角本地图片 效果图 代码 加载网络图片-本地图片占位图 加载网络图片-loading 效果 代码 圆角.边框.渐变 总结 加载本地图片 在项目目录下创建assets文件夹,再在其文件夹下创建images文件夹,后面将需要的图片复制到其中即可 在pubspec.yaml文件中添加引用 flutter: uses-material-design: true assets: - assets/images/ 在Container中加载本地图片 Container( width:

  • 利用Flutter实现背景图片毛玻璃效果实例

    利用Flutter实现背景图片毛玻璃效果实例

    目录 前言 使用 canvas 绘制图片 更改绘制图片的绘制范围 毛玻璃效果实现 总结 前言 继续我们绘图相关篇章,这次我们来看看如何使用 CustomPaint 实现毛玻璃背景图效果.毛玻璃背景图其实就是将图片进行一定程度的模糊,背景图经过模糊后更加虚幻,使得前景和后景就会有层次感.相比直接加蒙层的效果来说,毛玻璃看起来更加好看一些.下面是背景图处理前后的对比,我们的前景图片的透明度并没有改变,但是背景图模糊虚化后,感觉前景更加显眼了一样. 本篇涉及如下内容: 使用 canvas 绘制图片.

  • Flutter图片与文件选择器使用实例

    目录 引言 一.image_picker 1.安装 2.使用 3.属性 4.注意 二.flutter_document_picker 1.安装 2.使用 总结 引言 我已经一个多星期没碰过电脑了,今日上班,打开电脑的第一件事就是想着写点什么.反正大家都还沉浸在节后的喜悦中,还没进入工作状态,与其浪费时间,不如做些更有意义的事情. 今天就跟大家简单分享一下Flutter开发过程中经常会用到的图片和文件选择器. 一.image_picker 一个适用于iOS和Android的Flutter插件,能够

  • flutter中的资源和图片加载示例详解

    目录 封面图 指定相应的资源 资源绑定 Asset bundling 资源变体 加载资源 加载文本资源 加载图片 加载依赖包中的图片 最后 封面图 下个季度的目标是把前端监控相关的内容梳理出来,梳理出来之后可能会在公司内部做个分享- Flutter应用程序既括代码也包括一些其他的资产,我们通常这些资产为资源. 有时候我会思考assets这个单词,在程序中到底应该翻译为资产呢?还是翻译为资源?按照习惯,我们这里还是称为资源好了- 这些资源是一些与应用程序捆绑在一起和并且部署应用时会用到的的文件,在

  • ios开发UITableViewCell图片加载优化详解

    目录 前言 图片自适应比例 XHWebImageAutoSize 仅加载当前屏幕的内容 预加载 前言 我们平时用UITableView用的很多,所以对列表的优化也是很关注的.很多时候,我们设置UIImageView,都是比例固定好宽高的,然后通过 scaleAspectFill 和 clipsToBounds 保持图片不变形,这样子做开发的效率是很高的,毕竟图片宽高我们都是固定好的了. 那如果产品要求图片按真正的比例展示出来呢?如果服务器有返回宽和高,那就好办了,那如果没有呢,我们应该怎么去做呢

  • vue前端性能优化之预加载和懒加载示例详解

    目录 预加载 图片预加载 JS预加载 js的加载方式 preload prefetch Preload & Prefetch 的区别 不同资源加载的优先级规则 懒加载 图片懒加载 路由懒加载 组件懒加载 最后 预加载 预加载简单来说就是将所有所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源:我们使用该技术预先告知浏览器,等下某些资源可能要被使用,先把资源下载下来,不要等使用的时候再下载,可以看出这样的加载技术会增加服务器的压力,但是用户的体验会比较好,因为可以较快的看到后面的

  • Android Volley图片加载功能详解

    Gituhb项目 Volley源码中文注释项目我已经上传到github,欢迎大家fork和start. 为什么写这篇博客 本来文章是维护在github上的,但是我在分析ImageLoader源码过程中与到了一个问题,希望大家能帮助解答. Volley获取网络图片  本来想分析Universal Image Loader的源码,但是发现Volley已经实现了网络图片的加载功能.其实,网络图片的加载也是分几个步骤: 1. 获取网络图片的url. 2. 判断该url对应的图片是否有本地缓存. 3. 有

  • 浅谈Java中父类与子类的加载顺序详解

    复制代码 代码如下: class Parent {    // 静态变量    public static String p_StaticField = "父类--静态变量";    // 变量(其实这用对象更好能体同这一点,如专门写一个类的实例)     //如果这个变量放在初始化块的后面,是会报错的,因为你根本没有被初始化    public String p_Field = "父类--变量";    // 静态初始化块    static {        S

  • Kotlin Coroutines执行异步加载示例详解

    前言 Kotlin Coroutines是Kotlin推出的新的异步API.并不是解决所有问题的最优方案,但是希望在许多情况下它会使事情变得更容易一些.这里只简单的展示一下这个库在安卓中的具体使用方案.下面话不多说了,来一起看看详细的介绍吧. 引入Coroutines //在application的build.gradle文件中的android节点添加如下的代码 kotlin { experimental { coroutines 'enable' } } //添加下面两行到依赖中 implem

  • Android中屏幕密度和图片大小的关系详解

    Android中屏幕密度和图片大小的关系详解

    Android中屏幕密度和图片大小的关系详解 前言 Android中支持许多资源,包括图片(Bitmap),对应于bitmap的文件夹是drawable,除了drawable,还有drawable-ldpi.drawable-mdpi.drawable-hdpi.drawable-xhdpi.drawable-xxhdpi等,同一张图片放到上面不同的文件夹中是有区别的,比如一张100 * 100像素大小的图片,分别放在上述各个文件夹中,然后将其设置为ImageView(假设宽高都是wrap_co

  • React 悬浮框内容懒加载实例详解

    目录 界面隐藏 懒加载 React实现 原始代码 放入新的DIV 状态设置 样式设置 事件设置 事件优化 延迟显示悬浮框 悬浮框内容懒加载 完整代码 界面隐藏 一个容器放置视频,默认情况下 display: none; z-index: 0; transform: transform3d(10000px, true_y, true_z); y轴和z轴左边都是真实的(腾讯视频使用绝对定位,因此是计算得到的),只是将其移到右边很远的距离. 懒加载 React监听鼠标移入(获取坐标) 添加事件监听 o

  • 基于js文件加载优化(详解)

    在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行. 所以,在这里,我们可以对其进行很多优化工作. 放置在BODY底部 为了让渲染引擎能够及早的将DOM树给渲染出来,我们需要将script放在body的底部,让页面尽早脱离白屏的现象,即会提早触发DOMContentLoaded事件. 但是由于在IOS Safari, Android browser以及IOS webview里面即使你把js脚本放到

  • 小程序页面onload(),onready()加载顺序详解

    目录 小程序 原生JS Jquery 小程序 onLoad(Object query) 页面加载时触发.一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数. onShow() 页面显示/切入前台时触发. onReady() 页面初次渲染完成时触发.一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互. 所以加载顺序是先加载onLoad,再是onShow,最后onReady 原生JS document.ready 表示文档结构加载完成(不包含图片等非文字媒

随机推荐