一、序
大家好,这里是承香墨影!
今天介绍一个我最近开源的 Flutter UI 方案,可以做到在全设备上 100% 还原设计稿,其背后的思想类似 Android 侧今日头条基于 density 的 UI 适配方案,接下来进入正题。
由于 Android 的碎片化,全设备的 UI 一致性,一直是开发者和设计师所追求的。后续也衍生出各种不同的适配方案以及对应的开源库,例如:AndroidAutoLayout、smallestWidth,以及最后今日头条基于修改 density 的 UI 适配方案。到后期对于 Android 的 UI 适配,基本上不存在什么新的问题了,只有方案的选择和使用问题。
而在 Flutter 中,由于要支持 Android 和 iOS 多系统的设备,UI 适配遇到的场景将更加复杂,这一切又要重新来一遍。对于各个系统的屏幕适配原理都差不多,Flutter 也是如此,我们在 Flutter 中直接写在 Widget 的尺寸,会被乘以一个倍数去放大,最终对应到的是物理设备屏幕的像素尺寸。
这个倍数,在 Flutter 中就是 devicePixelRatio
。它是设备上一个固定的值,不同设备的取值会不相同。
主流的 Flutter UI 适配方案,就是使用 flutter_screenutils
这个 Package,它也是基于 devicePixelRatio 对设置给 Widget 的尺寸进行调整,但入侵还是比较高的,需要遵循它的一些约束,如果想在成熟的项目上迁移使用,改动不会小。并且也有一些小问题,例如:无法适应 const Widget 的优化(戳此了解)。
那么针对我的一些需求,我开源了一个 Flutter package:screen_autosize
,对于成熟的项目也可以做到低入侵的引入。
既然是 UI 适配,直接上效果说话。
对于一套相同的代码,使用 1080 宽度的设备,但从左到右的 dpi 分别是 375 → 392 → 440,运行后的效果如下。

引入 screen_autosize 后,运行效果如下。

该有的元素都有,可以看到在不同的参数设备下,可以做到 100% 的一致性。
二、screen_autosize
接下来我们正式介绍 screen_autosize。
2.1 优势 & 劣势
优势:
适配效果:100% 还原 UI;
稳定性高:原理简单,无任何 Framework 的 Hook;
侵入性低:修改点少且统一,日常编写 UI 无需特殊注意;
使用成本低:统一修改,全局有效;
性能损耗:几乎没有;
不破坏 const Widget 常量优化(戳此了解);
<