使用MediaQuery获取屏幕高宽等信息
- MediaQuery.devicePixelRatio 每一个逻辑像素点对应的物理像素点个数
- MediaQuery.size.width 用逻辑像素表示的屏幕宽度
- MediaQuery.size.height 用逻辑像素表示的屏幕高度
- MediaQuery.padding.top 屏幕上部被系统UI遮挡的部分的逻辑高度(即:状态栏高度)
- MediaQuery.textScaleFactor 显示文字时,每一个逻辑像素对应的字体像素
讲解
Flutter中控件的高宽和字体大小时,使用的是逻辑像素,并非是实际的物理像素。
实际像素=逻辑像素*MediaQuery.devicePixelRatio
flutter中的屏幕适配
image.png
假设设计图的大小为10801920,上面一个图片的高度为 8090,则它在设备上的高宽为
MediaQueryData mediaQuery = MediaQuery.of(context);
width=80*(mediaQuery.size.width)/(1080)
height=90*(mediaQuery.size.width)/(1080)
对于android手机,一般以宽度为基准计算UI的高宽,因为android手机的宽度一般就是750,1080等几个尺寸,但是高的尺寸就有很多。
推荐一个别人封装好的一个用于屏幕适配的库
Flutter屏幕适配方案插件-完美解决屏幕适配
网友评论