Flutter UI适配详解 —— Flutter开发必看！

最新推荐文章于 2025-11-25 09:42:49 发布

原创

最新推荐文章于 2025-11-25 09:42:49 发布 · 置顶 · 6.6k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android #ios #适配

本文解析了Flutter中逻辑像素单位的区别于Android、iOS，并介绍了devicePixelRatio的计算原理。重点讲解了为何高分辨率设备devicePixelRatio反而较低，以及flutter_screenUtil如何解决跨平台适配问题。

Flutter中的宽高单位

不同于Android中的dp和IOS中的pt，Flutter奉行另外一种单位，即逻辑像素。

Flutter 遵循简单的基于密度的格式，如 iOS。资产可能是1.0x、 2.0x、3.0x或任何其他乘数。Flutter 没有dp 但有逻辑像素，与设备无关像素基本相同。所谓devicePixelRatio 表示物理像素在单个逻辑像素中的比例。

devicePixelRatio表示1逻辑像素在设备上对应的物理像素数（px），不同设备的devicePixelRatio不尽相同，比如我手上的小米8 SE，其devicePixelRatio值为2.75，即在小米8 SE上，1逻辑像素等于2.75物理像素，而在我手中的另一部华为 Mate9上，其devicePixelRatio值为3，即在华为 Mate9上，1逻辑像素等于3物理像素。

（注：devicePixelRatio值可以通过Flutter中的MediaQuery类查看）

这就有点奇怪了，明明小米8 SE比华为 Mate9的分辨率更高，可是小米8 SE的devicePixelRatio值竟然比华为 Mate9的devicePixelRatio值还低，我们以Android中的dp为例，计算这两款手机dp与px的关系。首先，我们需要先计算这两款手机的DPI，根据DPI的计算公式得：

在这里插入图片描述

手机型号	DPI
小米8 SE	√(2244²+1080²)/5.88 ≈ 423.5
华为 Mate9	√(1920²+1080²)/5.9 ≈ 373.4

再根据公式得

在这里插入图片描述

手机型号	DP	PX
小米8 SE	1	423.5/160 ≈ 2.65
华为 Mate9	1	373.4/160 ≈ 2.33

可以看出，同样是1dp，在小米8 SE上对应的像素数是大于华为 Mate9的。

那么，为什么分辨率高的小米8 SE的devicePixelRatio值要比分辨率低的华为Mate 9还小呢？我们来看看devicePixelRatio是如何计算出来的。

通过源码可以发现

在Android中

源码位置>shell/platform/android/io/flutter/view/FlutterView.java

public FlutterView(Context context, AttributeSet attrs, FlutterNativeView nativeView) {
   
   
    super(context, attrs);

    // ...... 省略 ......
    mMetrics = new ViewportMetrics();
    // 通过Java代码获取平台中的density值
    mMetrics.devicePixelRatio = context.getResources().getDisplayMetrics().density;
    // ...... 省略 ......
}