Flutter实战-屏幕适配

作者: Nightmare_梦魇兽 | 来源:发表于2019-04-30 13:06 被阅读81次

    前言,最近一直闭关进入Flutter实战开发,遇见了最大的问题就是屏幕适配

    其他某机型设备:


    Screenshot_2019-04-30-12-10-55-607_M.X.png

    作者本人设备:


    Screenshot_2019-04-30-12-10-56-294_M.X.png

    首先推荐用ScreenUtil这个dart包,不过我用的时候感觉老遇见问题,
    setwidth跟setheight的区别我也没搞清楚,字体的大小也遇到了问题
    还有几个关于屏幕适配的帖子感觉都不是很适用
    然后就是用MediaQuery.of(context).size(dp)拿到屏幕的宽高然后按比例除以一个值

    首先须知

    dp是虚拟像素,在不同的像素密度(dpi)上会自动适配,是一种基于屏幕密度的抽象单位,在每英寸160点的显示器上,1dp=1px。
    比如在像素密度是160的设备上,1dp=1px(像素)
    在240dpi上,1dp=1.5px,
    而在作者分辨率2280x1080(px) 440dpi的设备上,1dp=2.75px,
    Flutter中window.devicePixelRatio就是后面的值,也就是你的dpi跟160的比值
    通过简单的计算我的屏幕高就是2280/2.75=829.090909dp,宽就是1080/2.75=392.727273,
    于是乎

    Align(
            alignment: Alignment.centerLeft,
            child: Container(
              height: 40,
              width: 1080/2.75/2,
              color: Colors.red,
            ),
          ),
    

    效果


    Screenshot_2019-04-30-12-40-16-061_windows.x.m.fl.png

    红条就是宽度的一半
    代码不动拿到480dpi的设备上就是


    Screenshot_2019-04-30-12-44-28-030_windows.x.m.flutter_appasdsadasd.png
    可想而知红色的不会占宽度一半,因为440dpi跟480dpi没差太多,所以还不是很严重,还是能看出变长了
    然而平时一般又是直接把dp拿来用,更改马上看效果,不会每次就就去算它跟屏幕宽度的比例,于是作者每次写宽高都(以前自己写的dp)*2.75/window.devicePixelRatio;
    Align(
            alignment: Alignment.centerLeft,
            child: Container(
              height: 40,
              width: (1080/2.75/2)*2.75/window.devicePixelRatio,
              color: Colors.red,
            ),
          ),
    

    乘以2.75(即当前设备的window.devicePixelRatio)转换为了px像素,再除以适配设备的window.devicePixelRatio,这样不管在任何设备,都会按屏幕比例显示大小,字体大小我也是这样干的,不知道会不会有其他异常
    最后看下对比效果
    作者本人设备:

    Screenshot_2019-04-30-12-58-26-209_M.X.png
    其他高密度,低分辨率机型(未适配):
    Screenshot_2019-04-30-12-59-36-006_M.X.png
    成比例的变大了字体跟所有Widget的宽高
    其他高密度,低分辨率机型(适配后的):
    Screenshot_2019-04-30-12-58-23-864_M.X.png
    可能看图片不明显但作者是用真机调试仔细对比过的,反正感觉上比例就跟自己设备差不多,啊哈哈,原理上也感觉行得通,具体实不实用还得看自己用的情况
    还有其他有些东西都准备分享给有同样问题的人,慢慢的会写出来,闭关太久了,
    最后本人Flutter实战软件的链接MX工具箱,暂时还不开源,

    相关文章

      网友评论

        本文标题:Flutter实战-屏幕适配

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