Flutter MediaQuery获取屏幕信息以及屏幕适配

使用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屏幕适配方案插件-完美解决屏幕适配