搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 猴子自习室 > Flutter 资源文件 Adding assets and images

Flutter 资源文件 Adding assets and images

猴子自习室 2020-09-15

今天临时插播一条内容,因为在工作中有小伙伴对Flutter的assets and images有些疑问,查了查文档也不太明白,今天我们就一步一步看看Flutter的assets到底怎么使用。

Flutter应用可以同时包含代码和资产(也称为资源)。资产是与您的应用程序捆绑和部署的文件,可在运行时访问。资产的常见类型包括静态数据(如JSON文件),配置文件,图标和图像(JPEG,WebP,GIF,动画WebP / GIF,PNG,BMP和WBMP)。


指定资产
Flutter使用位于项目根目录的pubspec.yaml文件来标识应用程序需要的资产。例如:

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

有的同学可能要有疑问了

  • 文件夹的名字是固定的吗?

  • 如果这个文件夹图片特别多怎么办? 


问题1:文件夹的名字是可以更改的。

问题2:我们可以设置到目录级别,类似这样。

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

子目录的子目录也需要这样配置,注意要以 ‘/’结尾。


Asset bundling

Flutter中的assets部分都应该在pubspec.yaml文件资产部分中配置。在构建期间,Flutter会将资产放入Asset bundling,应用程序可在运行时从中读取。


Asset variants

构建过程支持资产变体的概念:资产的不同版本可能会在不同的上下文中显示。在pubspec.yaml的资产部分中指定了资产路径后,构建过程将在相邻子目录中查找具有相同名称的所有文件。然后,将这些文件与指定的资产一起包括在Asset bundling中。例如:你的项目中是这样的

.../pubspec.yaml.../graphics/my_icon.png.../graphics/background.png.../graphics/dark/background.png...etc.

在pubspec.yaml中配置

flutter: assets: - graphics/background.png

这样,dark就以变体的形式存在了。当然,你也可以配置到目录,效果是一样的。 

flutter: assets: - graphics/

在选择适合分辨率的图像时,Flutter使用资产变体。将来,可能会扩展此机制,以包括针对不同语言环境或区域,阅读方向等的变体。 


Loading assets

我们可以通过AssetBundle对象访问其资产。

Asset bundling允许加载字符串/文本资产loadString()或图像/二进制资产load()。在build阶段,pubspec.yaml中配置的路径,映射到logical key maps中。 


Loading text assets

每个Flutter应用程序都有一个rootBundle对象访问主资产包。可以使用package:flutter / services.dart中的rootBundle全局静态变量直接加载资产。

但是,建议使用DefaultAssetBundle而不是应用程序构建的默认资产捆绑包来获取当前BuildContext的AssetBundle;这种方法使父窗口小部件可以在运行时替换不同的AssetBundle,这对于本地化或测试场景很有用。

通常,您将使用DefaultAssetBundle.of()从应用程序的运行时rootBundle间接加载资产(例如JSON文件)。当然,如果在Widget上下文之外,或者当AssetBundle的句柄不可用时,您可以使用rootBundle直接加载此类资产。例如:

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

Loading images

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。


如果未在image widget上指定渲染图像的宽度和高度,则将使用标称分辨率缩放资产,以便它以更高的分辨率占用与主要资产相同的屏幕空间。如果... / my_icon.png为72px x 72px,则... / 3.0x / my_icon.png应该为216px x 216px;但是如果未指定width和height,它们都将渲染为72px x 72px(单位是逻辑像素),3.0x下的图片将按3.0进行缩放。


注意:设备像素比率取决于MediaQueryData.size,该参数要求使用MaterialApp或CupertinoApp作为AssetImage的祖先。每个逻辑像素的设备像素数。这个数可能不会是二的幂。实际上,它甚至可能不是整数。例如,Nexus 6的装置像素比例为3.5。(实际上,我们也可以使用MediaQuery.of(context).devicePixelRatio来查看当前设备的像素比。


images实践

我准备了4张100x100的图片。


Flutter 资源文件 Adding assets and imagesFlutter 资源文件 Adding assets and imagesFlutter 资源文件 Adding assets and images

 
import 'package:flutter/material.dart';
class AssetsPage extends StatelessWidget { @override Widget build(BuildContext context) { var devicePixelRatio = MediaQuery.of(context).devicePixelRatio; return Scaffold( appBar: AppBar( title: Text('测试assets 设备PixelRatio $devicePixelRatio'), ), body: Container( color: Colors.black, child: Center( child: Image.asset('images/img/test.jpg'), ), ), ); }}

Flutter 资源文件 Adding assets and imagesFlutter 资源文件 Adding assets and images

按着文档配置好,这里没有指定到2.0x下,只是指定到了文件夹,并且文件夹的名字也经过了更改,我们来看看效果。

Flutter 资源文件 Adding assets and images

我们看到设备devicePixelRatio是3.0,图片显示也是正常,如果我们删除img下的x.0文件夹。再来看看效果。

Flutter 资源文件 Adding assets and images

因为我们使用的图片都是100x100的,并且没有设置width和height,那么按照Flutter的要求,如果我们想要在设备上显示同样的效果,3.0x中应该使用300x300的图标,应为3.0x下的图片将会缩放显示。

 
 assets: - images/img/2.0x/ - images/img/3.0x/

这种情况下是无法正常load image的。 接下来我们恢复原来的配置,继续测试。

Flutter 资源文件 Adding assets and images

这是一个3.5的设备,向下选取了3.0x的图片,我们将3.0x删除在试试效果。


可以看到走到了4.0x,我们在把4.0x删除,走到了2.0x的目录中。这个结果说明,Flutter的机制是选取距离目标像素比例最接近的目录。当然笔者还做了好多测试,比如1.9x,2.0x等等,感兴趣的同学可以自己试一试,对于这部分的源码,会在后面的文章中更新,小伙伴不要着急,今天这个部分也只是项目遇到应急写出来的,欢迎大家指正。接下来的文章还是会继续将常用Widget逐一介绍,在最后的系列中,会公开一个商业级的项目,感兴趣的小伙伴关注。如果您在阅读过程中发现错误,请及时留言给我,我会第一时间改正。也欢迎大家一切交流,共同进步,感谢支持!



版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《Flutter 资源文件 Adding assets and images》的版权归原作者「猴子自习室」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读