一个全新 Flutter UI 适配方案,低入侵 & 100% 还原设计稿!

一、序

大家好,这里是承香墨影!

今天介绍一个我最近开源的 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 优势 & 劣势

优势:

  1. 适配效果:100% 还原 UI;

  2. 稳定性高:原理简单,无任何 Framework 的 Hook;

  3. 侵入性低:修改点少且统一,日常编写 UI 无需特殊注意;

  4. 使用成本低:统一修改,全局有效;

  5. 性能损耗:几乎没有;

  6. 不破坏 const Widget 常量优化(戳此了解);

<

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值