Flutter屏幕适配之一：采用与UI图等比例显示的方案，实现屏幕大小尺寸的适配

在Flutter中&＃xff0c;我们设置尺寸的时候都是double型的数量&＃xff0c;不能设置单位&＃xff0c;这是因为flutter默认是使用logical pixel逻辑像素的&＃xff0c;系统拿到我们设的值&＃xff0c;会自动判断在iOS或者Android上对应的尺寸&＃xff0c;不用我们强制转换成某一个单位。

所以&＃xff0c;我们现在要想的就是&＃xff0c;这个值&＃xff0c;我们应该设置成多少。

在这里&＃xff0c;我用实现控件尺寸与屏幕上固定尺寸&＃xff08;宽度、状态栏高度&＃xff09;的比例与UI图上相同的适配方案。

Flutter中有一个类叫做 MediaQueryData&＃xff0c;通过这个类可以拿到屏幕上的某些尺寸&＃xff0c;还有一些别的属性&＃xff0c;大家感兴趣可以自己去研究下&＃xff0c;我这里只列出来这篇文章中用到的&＃xff1a;

MediaQueryData mediaQuery &＃61; MediaQueryData.fromWindow(ui.window);var w&＃61;mediaQuery.size.width;//屏幕宽度var h&＃61;mediaQuery.size.height;//屏幕高度var scale &＃61;mediaQuery.devicePixelRatio;//每一个逻辑像素包含多少个原始像素var statusBar&＃61;mediaQuery.padding.top;//状态栏高度

现在我们来实现。

UI给的设计图&＃xff0c;整个页面的宽度是750&＃xff0c;状态栏高度是40&＃xff0c;标题栏高度是88&＃xff0c;标题title文字大小是32。

我的思路是&＃xff0c;看看flutter中的几个单位长度相当于设计图中1个单位长度&＃xff0c;算出这个比例&＃xff0c;直接乘以UI给的尺寸&＃xff0c;就是flutter中应该设置的大小。

已知&＃xff1a;UI图中屏幕宽度是750&＃xff0c;Flutter中MediaQueryData得到的屏幕宽度是w&＃xff08;这个宽度不同的设备上可能不一样&＃xff0c;拿到多少就是多少&＃xff09;。

假设flutter中unit个单位长度相当于设计图中1个单位长度&＃xff0c;
那么&＃xff0c;  。

代码实现&＃xff1a;

static double unit &＃61; w/ 750.0;

然后根据UI图给出的控件尺寸&＃xff0c;换算出对应的大小。

///常用尺寸
class Sizes {//省略.....static double size36 &＃61; 36 * unit;static double size32 &＃61; 32 * unit;static double size30 &＃61; 30 * unit;}


使用&＃xff1a;

TextStyle(fontSize: Sizes.size32),

以小米MIX为例&＃xff0c;得到的w为360&＃xff0c;则unit为0.48。于是&＃xff0c;设计图上的32px&＃xff0c;在flutter中设置的值为size32就是32*0.48&＃61;15.36&＃xff0c;当然了&＃xff0c;这个过程不用我们自己算&＃xff0c;这个值也不是固定的&＃xff0c;系统算出来多少就是多少&＃xff0c;我只是说这个意思。

然后来单独设置标题栏高度。因为UI给的图中&＃xff0c;状态栏与屏幕宽度的比例与实际手机的比例有些不同&＃xff0c;所以单独来保证状态栏与标题栏的比例与UI一致。

假设flutter中标题栏高度是b&＃xff0c;状态栏高度由上面的方法得到是statusBar。

那么&＃xff1a;&＃xff0c;。

代码中实现&＃xff1a;

static double sizeTitleBar &＃61; 88 / 40 * statusBar;

使用&＃xff1a;

final double height &＃61; Sizes.sizeTitleBar;