Flutter屏幕适配之二:Image资源assets的使用,实现不同分辨率图片的适配

2023-11-20

这两天在研究Flutter的屏幕适配方案。

关于尺寸大小已经有点眉目了,初步定了利用等比例缩放,感兴趣的朋友可移步Flutter屏幕大小适配

但是还是不清楚怎么进行图片分辨率适配的,在百度了之后,仍然有点云里雾里,罢了,直接上官网看吧,果然,清晰了。这里附上官网链接Image.asset页面

这里只说本地文件夹下图片资源配置及使用的问题。关于构造函数、使用别的包里的图片等其他情况不做叙述。

我最初在看的时候一直在纠结以下几个问题:

  • iOS和Android是共用一套图片吗?是怎么共用的?
  • 各个平台系统是怎么判断该用哪个分辨率的图片的呢?
  • 不同分辨率的图片我应该怎么放?
  • 在yaml文件中怎么配置?怎么引用?

下面一一解答上面的4个问题。

iOS和Android是共用一套图片吗?是怎么共用的?

既然用flutter,是为了ios和Android工台开发一套代码,那图片肯定也是可以一起用的,其实我的疑问主要在后半句,怎么共用。

不同分辨率的图片我应该怎么放?

一般我们将图片资源放在跟pubspec.yaml同级的一个image文件夹下,然后在image文件夹下新建2.0x、3.0x子文件夹,将对应倍数的图片放到对应的文件夹内,直接在image文件夹下的是倍数为1.0的。

自己的目录,名字起得不太一样

在yaml文件中怎么配置

官网截图​​​​
自己的声明
自己的文件目录

官网那个截图中就是比较详细,每一张图片的1.0、2.0、3.0都声明了。

我自己写的比较简略,直接写“img/”这种,表示 img/ 这个文件夹下面的所有图片。

在准备图片资源的时候,1.0倍的可以省略,如果省略了,系统会直接使用最接近的,如2.0倍数的,但是在yaml文件中的声明不能省略。

但假如我使用了简写img/这种方式,1.0倍的forward.png图片在img文件夹中是没有的,所以用img/不能声明到,要单独声明一下,这样调用的时候才能加载到子文件夹中的图片(见上面的图)。

官网截图

各个平台系统是怎么判断该用哪个分辨率的图片的呢?

flutter中会首先根据系统的devicePixelRatio(每一个逻辑像素包含多少个原始像素,可以通过MediaQueryData.devicePixelRatio来得到)来找对应倍数的文件夹下的图片,如果没有对应倍数,找最接近的。

官网截图


 

怎么使用?

使用的时候,不用带2x、3.5x这些,直接是1.0倍的那个声明,粘贴过来就行:

官网截图
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flutter屏幕适配之二:Image资源assets的使用,实现不同分辨率图片的适配 的相关文章

  • 在 flutter 中将 JSON 解析为 Map

    我收到后端的响应 measurements pm10 name pm10 value 20 8647 unit g m pm25 name pm10 value 20 8647 unit g m o2 name pm10 v
  • 带 NestedScrollview 的 RefreshIndicator

    我想要 2 个带有 ListView 的选项卡页共享一个 RefreshIndicator 但是 RefreshIndicator 必须具有 Scrollable 作为子级 TabBarView 则不然 因此我尝试为每个选项卡创建 2 个
  • 将“Map>”转换为“Map>”

    我想投一个Map
  • Flutter 中没有上下文的 AlertDialog

    我想在 http 获取失败时显示 AlertDialog 函数显示对话框 https api flutter dev flutter material showDialog html https api flutter dev flutte
  • Flutter:在 GridView 平铺中使用 GestureDetector 进行点击延迟

    通常 以下行为本质上是快速的 然而 在 GridView 或我假设的任何 ScrollView 也尝试过 ListView 内 性能似乎非常差 当我点击屏幕时 容器的不透明度会增加 但会出现延迟 知道我缺少什么吗 import packag
  • 如何更改文本字段颤动内部的值?

    我有一个TextEditingController如果用户单击按钮 它就会填写信息 我似乎不知道如何更改 a 中的文本Textfield or TextFormField 有解决办法吗 只需更改text财产 TextField contro
  • 更改语言 Flutter 的按钮

    我正在 Flutter 中构建一个应用程序 到目前为止 我正在使用 JSON 国际化 其中应用程序的语言基于用户手机中默认的语言 它工作得很好 但我想给用户有机会在不更改手机系统语言设置的情况下更改语言 只需单击按钮 然后应用程序即可更改语
  • 如何在flutter中绕过SSL证书验证?

    如何在flutter中绕过SSL证书验证 错误 握手异常 客户端中的握手错误 操作系统错误 CERTIFICATE VERIFY FAILED 自签名证书 handshake cc 345 您需要配置 HttpService 以使用自签名
  • Flutter - 构建失败并出现异常

    当我启动我的应用程序时 我收到此错误消息 自上次运行以来我没有进行任何更改 当时一切都很好 有人知道如何解决这个问题吗 谢谢 FAILURE Build failed with an exception 什么地方出了错 无法确定任务 app
  • 谷歌地图颤动检查点是否在多边形内

    我正在使用 google maps flutter 插件开发 flutter 项目 我想检查用户位置是否位于我在地图上创建的多边形内 有一个简单的方法使用 JavaScript api con tainsLocation 方法 但对于 fl
  • Flutter Spotify Api 身份验证

    我需要在使用 Spotify api 的 Flutter 应用程序中对用户进行身份验证 我使用 flutter web auth 打开 WebView 并让用户在那里登录 我无法返回应用程序 在 Spotify 仪表板中 我将回调 Uri
  • 如何将额外的文本添加到颤振谷歌地图自定义标记中?

    问题是如何将自定义谷歌地图标记上的文本重叠与代表车辆登记号的文本融合在一起 我尝试使用此方法将文本叠加在图标上 生成器 上下文 gt 但根本不被认可 class MapsDemo extends StatefulWidget overrid
  • 扑。应用程序不会崩溃并发送崩溃报告

    我已经集成了Firebase Crashlytics在我的应用程序中 我正在测试 Android 应用程序 我强迫崩溃来检查它 if true List arr throw arr 1 2 我的问题是应用程序不会崩溃 我只是在日志中得到这个
  • 用颤动画布在形状上切一个洞

    如何使用颤动画布在形状上 切一个洞 我有一组相当复杂的形状 看起来像现实世界的物体 该物体上有一个圆角矩形形状的孔 我真的很想从形状中减去 RRect 但我找不到任何有关如何执行此操作的信息 canvas clipRRect myRRect
  • Dart 从 UInt8List 获取扩展

    我正在使用该包图像选择器 https pub dev packages image picker接受来自用户的图像 这会产生 PickedFile 和字节数组 由于图像随后被上传 我想知道如何从字节数组中猜测 mime 类型 PickedF
  • 传递 Stack 中两个小部件之间的所有手势

    我正在开发一个应用程序 在地图上显示标记 如下所示 它的工作方式是标记在地图小部件 上方 呈现为Stack 我的问题是 目前 标记 吸收 用于控制下方地图的手势 如果手势在标记上开始 因此我想知道 有没有办法在堆栈中的两个小部件之间传递所有
  • Cloud Functions,删除Firestore SubCollections,是否需要AdminToken?

    我正在尝试构建可调用的云函数 当用户删除帖子时 它也会尝试删除评论 这是帖子的子集合 所以我看到了这个例子并像文档示例一样实现 const admin require firebase admin const firebase tools
  • dart json.encode(data) 不能接受其他语言

    我目前正在使用 Dart 进行 Web 开发 使用mockclient实现服务 但是 出现以下错误 下面的实现代码是一个继承mockClient的内存web api服务 调用client send 并返回结果的代码 test value是j
  • Flutter:如何在flutter中指定设备id?

    如何在flutter run中选择设备id 请使用 d 标志指定设备 或使用 d all 对所有设备进行操作 iPhone 6 54XXXXXX35130ebefd38f ios iOS 10 3 3 iPhone 7 Plus BA8CX
  • 如何在 TextField 中垂直居中不同大小的hintText?

    我有一个TextField像这样 输入文本和提示文本的大小不同 TextField style Theme of context textTheme subhead copyWith fontSize 70 0 decoration Inp

随机推荐

  • vue-excel导出-单表头,多表头导出,Export2Excel.js Blob.js

    效果如图 一级导出 二级导出 如下图 三级导出 Export2Excel js Blob js 等 安装依赖 npm install S file saver npm install save xlsx 0 10 0 npm install
  • 蓝牙ble tips3-MAC地址

    和计算机网络IP地址类似 BLE也会有属于自己的一个地址 BLE设备地址 蓝牙地址 也称作 Bluetooth MAC Media Access Control 地址 是一个48位的唯一硬件标识符 用于在蓝牙设备之间建立连接和通信 它由全球
  • TRMF 辅助论文:最小二乘法复现TRMF

    1 目标函数 总 论文笔记 Temporal Regularized Matrix Factorization forHigh dimensional Time Series Prediction UQI LIUWJ的博客 CSDN博客 1
  • 蓝桥杯第23天(Python)(疯狂刷题第6天)

    题型 1 思维题 杂题 数学公式 分析题意 找规律 2 BFS DFS 广搜 递归实现 深搜 deque实现 3 简单数论 模 素数 只需要判断到 int sqrt n 1 gcd lcm 快速幂 位运算移位操作 大数分解 分解为质数的乘积
  • Deque接口简介说明

    转自 Deque接口简介说明 下文笔者讲述Deque接口的简介说明 如下所示 Deque简介 Deque接口是一个双端队列 可以对队列的头尾进行操作 所以也可以当做栈来使用 Queue和Deque接口的相对应方法 Queue方法 Deque
  • 完美解决SpringMVC中org.springframework.web.servlet.DispatcherServlet.noHandlerFound No mapping 404错误

    错误原因描述 出现该错误的原因主要是无法扫描注册 Controller注解的类的实例进入IOC容器而导致的 从而从一下几个方面来分析 MVC配置文件中 component scan 标签扫描包路径是否正确 且是否误写了排除 Controll
  • 《深入理解计算机系统》实验四Architecture Lab

    前言 深入理解计算机系统 实验四Architecture Lab下载和官方文档机翻请看 深入理解计算机系统 实验四Architecture Lab下载和官方文档机翻 我觉得这个文档对整个实验很有帮助 如果你的Y86 64环境还没安装好可以看
  • 一个互联网研发团队的标准配置

    做一件大事 通常会产生一个组织 对于一个组织来说 确定了梦想和目标之后 首要的事情是 组织分工和明确 权责 权利和责任分不清楚 效率必定低下 读书阶段的时候 无论是学习 还是做事 从来没有深刻地感受过 事倍功半 和 事半功倍 工作之后 经历
  • JavaEE简单示例——在使用Tomcat的时候可能出现的一些报错

    简单介绍 在我们之前使用Tomcat的时候 经常会出现在启动的时候因为一些报错导致项目无法正常的启动 我们就对一些比较常见的报错来看一下可能导致的原因 以及出现报错之后如何去解决 严重 Failed to initialize end po
  • 汇率之谜:揭秘黄金折算与真实人民币汇率的神秘差距

    导言 人民币是中国的官方货币 其汇率在国际贸易和金融市场中扮演着至关重要的角色 然而 观察到黄金折算的人民币汇率与真实人民币汇率之间存在显著差距 本文将探讨这一差距的原因以及它所暗示的经济现象 汇率基础知识 首先 让我们了解一下汇率的基础知
  • Linux服务器远程访问通过Tomcat部署的静态资源

    一 安装Java和Tomcat 1 1 安装Java 下载jdk8 切换到root用户 创建文件夹 usr local java 将下载的jdk压缩包上传到该目录下 解压 mkdir usr local java cd usr local
  • 8、配置多生成树技术(MSTP协议)

    什么是生成树技术 在局域网通信中 为了能确保网络连接的可靠性和稳定性 常常需要网络提供冗余链路 而所谓的 冗余链路 就是当一条通信信道遇到堵塞或者不通畅时 就启用别的通信信道 冗余就是准备两条以上的链路 如果主链路不通了 就启用备用链路 什
  • 树梅派应用19:树莓派安装OpenWRT做路由器图文详解

    在玩OP之前 你需要一个靠谱的以太网卡 一个型号为RTL8192CU AR9271的无线网卡 官方芯片的无线网卡都可以 随便大小的SD卡或者TF卡 都是可以的 由于没有高手指导 我算是走了不少弯路 废话不多说 首先 下载OpenWRT的系统
  • 若依单体版添加免密登录

    若依单体版添加 免密登录 的流程在其官网有流程 若依常见问题地址 可以查询到 如何实现用户免密登录配置方法 具体代码官网都有 记录一下实际操作部分细节 1 LoginService添加login方法 去掉密码验证 可能是若依框架更新频繁 网
  • mysql8.0.18数据恢复方法-ibd文件恢复(innodb引擎)

    1 创建同名数据库 2 创建相同的表 3 使用ALTER TABLE 数据库名 表名 DISCARD TABLESPACE 4 将ibd文件拷贝到数据库的数据目录下 5 使用ALTER TABLE 数据库名 表名 IMPORT TABLES
  • apt-get: command not found

    CentOS5 4 apt get install gcc bash apt get command not found 解答 CentOS的软件安装工具不是apt get 是yum yum y install gcc 在ubuntu下安装
  • 检索 COM 类工厂中 CLSID 为 {} 的组件时失败,原因是出现以下错误: 80040154没有注册类.(注册组件的方法)

    执行程序报错如下 原因 没有注册rmReport组件 解决办法 注册组件 注册组件方法如下 首先你要知道你要注册哪个文件 并且找到它 上图报错位置那个变量是我要注册的文件 并且我在自己的项目中找到了它 之后打开C Windows Syste
  • 仅需一个样本即可定制个性化的SAM

    Personalize Segment Anything Model with One Shot https arxiv org pdf 2305 03048 pdf https github com ZrrSkywalker Person
  • shell脚本之循环语句

    for循环 语法1 for i in 集合 do 程序 done 语法2 for i 0 i lt 100 i do 程序 done eg 批量压缩文件 bin bash 批量压缩文件 cd root ls tar gz gt ls log
  • Flutter屏幕适配之二:Image资源assets的使用,实现不同分辨率图片的适配

    这两天在研究Flutter的屏幕适配方案 关于尺寸大小已经有点眉目了 初步定了利用等比例缩放 感兴趣的朋友可移步Flutter屏幕大小适配 但是还是不清楚怎么进行图片分辨率适配的 在百度了之后 仍然有点云里雾里 罢了 直接上官网看吧 果然