设计的素材网站有哪些,开网站做女装好还是童装好,郑州seo优化服务,WordPress如何快速排名文章目录 前言开发环境问题描述问题分析解决方案最后 前言
最近客服反馈了一个奇怪的问题#xff0c;有个用户反馈其他问题时给了应用截图#xff0c;然后他发现这截图中有一条奇怪的白线。他在自己手机上没有发现这个问题#xff0c;于是提工单反馈到我这。
开发环境
Fl… 文章目录 前言开发环境问题描述问题分析解决方案最后 前言
最近客服反馈了一个奇怪的问题有个用户反馈其他问题时给了应用截图然后他发现这截图中有一条奇怪的白线。他在自己手机上没有发现这个问题于是提工单反馈到我这。
开发环境
Flutter: 3.24.3
问题描述
应用截图原图没办法给出白线大概长这样不是很明显图片上传被压缩后可能更不明显 白线分割的上下两部分分别是两个Container组件。
问题分析
首先这个问题在公司一堆测试机中都没有发现查了该用户的登录设备型号是Xiaomi 23116PN5BC也就是小米14 Pro。
找同型号的云真机测试一番确实存在这个问题但是在其他很多手机上都没有发现这个问题初步判断应该是跟设备屏幕分辨率有关。小米14 Pro分辨率信息如下
物理分辨率1440x3200
逻辑分辨率411x898
设备像素比devicePixelRatio2.625物理分辨率是网上查的其他的通过Flutter获取。奇怪devicePixelRatio好像不太对有点太小了。一般来说
物理分辨率 逻辑分辨率 * 设备像素比411 * 2.625 1078.875这相差的有点多这设备像素比更像是小米 14物理分辨率1080x2400的。
这设备像素比合不合理另说先找一个逻辑分辨率和设备像素比差不多的模拟器用于本地跑demo测试同时也可以进一步验证这个问题是不是只在小米14 Pro上出现。
这个网站可以查看iPhone/Pixel/Galaxy的大部分设备分辨率信息找到一个比较符合要求的Google Pixel 7 直接新建一个Google Pixel 7模拟器再写个测试用的demo
import package:flutter/material.dart;void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: const Text(Flutter问题记录 - 布局中莫名其妙的白线/缝隙,style: TextStyle(fontSize: 18),),),body: SingleChildScrollView(child: Column(children: [Container(color: Colors.purple,height: 100,),Container(color: Colors.purple,height: 100,),],),),),);}
}运行后白线出现了截图请看前面的问题描述。现在可以确定这问题不局限于小米14 Pro再仔细看截图中的白线高度明显小于1个逻辑像素基本可以判断这是由于逻辑像素转为设备像素后出现小数取整导致的问题毕竟物理像素不能是小数。
实测将第一个Container的高度从100逐渐增加到104白线的粗细会不断变化直到104时白线消失。这应该和Flutter的取整方式以及抗锯齿处理有关由于组件边缘像素对齐误差的变化被渲染为背景色的区域大小也在不断变化从而造成粗细不一的白线如果背景色是白色的。
100 * 2.625 262.5
101 * 2.625 265.125
102 * 2.625 267.75
103 * 2.625 270.375
104 * 2.625 273那该怎么解决这个问题呢最简单的方法
View.of(context).devicePixelRatio 2.625 ? 104 : 100;根据设备像素比返回不同的逻辑像素避免得到的物理像素是小数。虽然看上去有点不靠谱但是简单有效毕竟这个问题也不是那么容易遇到的它需要满足以下条件
两个背景颜色相同的组件放在一起颜色不同基本发现不了设备像素比是2.625这种像iPhone设备像素比全是整数根本不会出现该问题大部分Android设备也不会出现。开发时逻辑像素尽量使用偶数这样就算设备像素比是3.5的Android设备得到的物理像素也基本是整数
当然也有更靠谱一点的解决方式
import package:flutter/material.dart;void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: const Text(Flutter问题记录 - 布局中莫名其妙的白线/缝隙,style: TextStyle(fontSize: 18),),),body: SingleChildScrollView(child: Column(children: [Container(// color: Colors.purple,height: 100,decoration: BoxDecoration(color: Colors.purple,border: Border.all(width: 0,color: Colors.purple,),),),Container(// color: Colors.purple,height: 100,decoration: BoxDecoration(color: Colors.purple,border: Border.all(width: 0,color: Colors.purple,),),),],),),),);}
}设置宽度为0的边框起到像素对齐的作用。注意都需要设置不然很可能还会有白线。
这问题也不是什么新鲜问题目前也没有完美的解决方案相关的issue很多例如Antialiasing behaviour when same-colour。
解决方案
对特定设备像素比适配参考如下
View.of(context).devicePixelRatio 2.625 ? 104 : 100;给组件设置宽度为0的边框参考如下
Container(// color: Colors.purple,height: 100,decoration: BoxDecoration(color: Colors.purple,border: Border.all(width: 0,color: Colors.purple,),),
)最后
如果这篇文章对你有所帮助点赞收藏支持一下吧谢谢 本篇文章由crasowas发布于CSDN。
