素材巴巴 > 程序开发 >

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

程序开发 2023-09-17 22:17:49

在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个单位长度,
那么, frac{unit}{1}=frac{w}{750} 。

代码实现:

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。

那么:frac{statusBar}{b} = frac{40}{88}b=frac{88}{40}*statusBar

代码中实现:

static double sizeTitleBar = 88 / 40 * statusBar;

使用:

final double height = Sizes.sizeTitleBar;

标签:

上一篇: react antd mobile实现 H5底部tab页面 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。