美文网首页FlutterFlutter
Flutter MediaQuery获取屏幕信息以及屏幕适配

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

作者: 真胖大海 | 来源:发表于2019-11-19 16:50 被阅读0次

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

    相关文章

      网友评论

        本文标题:Flutter MediaQuery获取屏幕信息以及屏幕适配

        本文链接:https://www.haomeiwen.com/subject/zuzwictx.html