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

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容