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

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

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

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

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

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

现在我们来实现。

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

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

已知：UI图中屏幕宽度是750，Flutter中MediaQueryData得到的屏幕宽度是w（这个宽度不同的设备上可能不一样，拿到多少就是多少）。

假设flutter中unit个单位长度相当于设计图中1个单位长度，
那么，  。

代码实现：

static double unit = w/ 750.0;

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

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

使用：

TextStyle(fontSize: Sizes.size32),

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

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

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

那么：，。

代码中实现：

static double sizeTitleBar = 88 / 40 * statusBar;

使用：

final double height = Sizes.sizeTitleBar;

最后

以上就是搞怪机器猫为你收集整理的Flutter屏幕适配之一：采用与UI图等比例显示的方案，实现屏幕大小尺寸的适配的全部内容，希望文章能够帮你解决Flutter屏幕适配之一：采用与UI图等比例显示的方案，实现屏幕大小尺寸的适配所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。