Flutter实践--屏幕适配

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter实践--屏幕适配相关的知识,希望对你有一定的参考价值。

参考技术A 做移动端开发的小伙伴都知道,针对不同型号和尺寸的手机要进行页面适配,且androidios适配方案各不相同,那flutter端如何进行适配呢?以下为近期flutter开发过程中关于适配的一些学习和记录~~~~

说到flutter屏幕适配,就不得不提到插件 flutter_screenutil ,提到flutter_screenutil就不得不说以下几点🥶

   默认宽1080px
   默认高1920px
   allowFontScaling为false,即不跟随系统字体大小设置变化
   初始化单位为px

需要把context传进去,因为内部是通过 MediaQuery 来获取屏幕尺寸等相关信息的

无需再传context,因为内部是通过单例 window 来获取屏幕尺寸等相关信息的

作为iOS开发,之前都是以pt为参照进行比例适配的,且架构组已经定义了一套适配相关常量,传px进去不太方便,所以需要对flutter_screenutil进行扩展

公司设计图是以iPhone X的尺寸提供的即物理设备尺寸为375x812,像素比例为750x1624,像素密度比为2

初始化仍用px来初始化

dart sdk 2.7正式支持 extension-method ,即为已有类扩展方法,从 flutter_screenutil 这种 540.w 写法点进去,我们可以看到

flutter_screenutil为num类扩展了一系列简写方法,那我们当然可以按照它这种方式进行扩展

网上提供的解决方案:
第一步:修改 pubspec.yaml

第二步:执行 flutter pub get
第三步:重启 AndroidStudio

解决方案:去掉const即可

UI设计中px、pt、ppi、dpi、dp、sp之间的关系
Dart/Flutter - 扩展方法(ExtensionMethod)

以上是关于Flutter实践--屏幕适配的主要内容,如果未能解决你的问题,请参考以下文章

Flutter学习-屏幕适配

flutter 屏幕尺寸适配字体大小适配

flutter屏幕适配

Flutter中屏幕适配,尺寸设置

11-Flutter移动电商实战-首页_屏幕适配方案和制作

Flutter-阿里P7告诉我的屏幕适配终极方案!!!