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实战-屏幕适配

    前言,最近一直闭关进入Flutter实战开发,遇见了最大的问题就是屏幕适配 其他某机型设备: 作者本人设备: 首先...

  • Flutter 屏幕适配和宏定义

    Flutter 屏幕适配

  • LayaAir屏幕适配

    LayaAir屏幕适配 官方教程链接:LayaAir实战开发11-屏幕适配 屏幕适配 随着移动端设备(手机、平板、...

  • Flutter 屏幕适配

    Flutter屏幕适配可以采用小程序的rpx适配来完成Flutter的适配,比较好理解。 rpx适配原理: 不管是...

  • Flutter开发常用功能框架

    flutter_swiper 轮播图flutter_screenutil 屏幕适配pull_to_refresh ...

  • Flutter:适配学习

    flutter 屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局! Flutter的适配可以使用flu...

  • Flutter常用第三方框架

    轮播图:flutter_swiper : ^1.1.6 网路请求:dio: ^3.0.8 屏幕适配:flutter...

  • Flutter MediaQuery

    Flutter MediaQuery获取屏幕信息以及屏幕适配 链接地址:https://www.jianshu.c...

  • flutter 屏幕适配

    github 地址https://github.com/OpenFlutter/flutter_screenuti...

  • Flutter 屏幕适配

    一、概述 对于Flutter开发来说,除了需要满足Android和IOS风格样式之外,我们首先需要考虑的就是开发出...

网友评论

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

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