屏幕适配

分辨率

flutter 尺寸单位采用的是逻辑像素，类似于 ios 中的点 pt 和 android 中的 dp。逻辑像素也被称为与设备或者分辨率无关的像素。物理像素又称为设备像素，指屏幕的基础单元，也是我们能看到的尺寸。比如 iphone6 的屏幕在宽度上有750个像素点，高度是 1334个像素点。

逻辑像素

---

逻辑像素 = 物理像素px / devicePixelRatio。在 flutter 中 devicePixelRatio 由 ui.Window 类提供，window 是 Flutter Framework 连接宿主操作系统的接口。因此，Flutter 的 devicePixelRatio 属性正是引擎层从原生平台中获取的。而这个值在安卓中就对应着 density ，在 ios 中就对应着 [UIScreenmainScreen].scale 。相同逻辑像素在不同分辨率手机看到的物理像素不一样的原因是每个设备可能都会有不同的 dpr.

为什么要做屏幕适配

---

通过指定像素的大小来控制页面元素显示的大小，如果不做屏幕适配在分辨率更高的屏幕上元素会显得更小（百分比角度看上去更小）

实现屏幕适配的方案

---

• 以设计稿宽度为基准来获取屏幕实际宽度相对设计稿宽度的缩放比 ratio
• 获取开发中的尺寸大小相对于设计稿宽度的实际大小
• 通过 dart 的扩展来减少适配成本

安全边距

有些手机有刘海，就导致不是整块屏幕都可用，当要在屏幕的顶端显示内容时，要特别注意不被刘海部分遮挡。在任何有状态 widget 的 state class 中可直接使用下面代码 - 默认有 context

// 获取当前设备安全边距的顶部边距，从此处开始向下显示内容
double top = MediaQuery.of(context).padding.top;