符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
做移动端开发的小伙伴都知道,针对不同型号和尺寸的手机要进行页面适配,且Android和iOS适配方案各不相同,那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)
1、 新版本Flutter SDK 引入了 extension的机制。可以对某个class 进行扩展。(swift中有类似机制)
2、屏幕适配一直是一个老生常谈的问题,随着机型越来越多,适配的场景也越来越复杂。
3、之前有了解过 微信小程序的适配方案,个人一直感觉是一个比较好的方式( iPhone6为标准尺寸)下面????将引用小程序的方案来进行对 Flutter的尺寸设置。
size_fit.dart 文件
double_extension.dart 文件
int_extension.dart 文件
通过上面的设置,在不同设备上,展示的widget的尺寸就会不一样了。
Flutter中控件的高宽和字体大小时,使用的是逻辑像素,并非是实际的物理像素。
flutter中的屏幕适配
假设设计图的大小为1080 1920,上面一个图片的高度为 80 90,则它在设备上的高宽为
对于android手机,一般以宽度为基准计算UI的高宽,因为android手机的宽度一般就是750,1080等几个尺寸,但是高的尺寸就有很多。
推荐一个别人封装好的一个用于屏幕适配的库
Flutter屏幕适配方案插件-完美解决屏幕适配
本文是根据 Daniele Cambi 的文章 Flutter — Effectively scale UI according to different screen sizes 总结而来 :
文章地址 : (自备扶梯)
本文核心思想 :
作者创建一个矩形 :
在iPhone 5s (4" Display) and on an iPhone XS Max (6,46" Display),
显示效果的差异 !!! 如何解决这个问题呢 ?
注: Flutter 使用的 逻辑像素 logical pixels 为单位 ,和 Android的 dp还是不一样
具体 lp 有什么效果,网上也没查到具体资料????
如何解决这个问题呢 ?
作者认为可以把屏幕认为是一个 , 100 * 100 的格子(或者认为水平方向和竖直方向,平均分成100个单位 ,恩 ,是不是就是Android中的百分比布局了)
作者新建一个帮助类 :
初始化方法 :
使用帮助类来设置widget大小 :
效果图 :
在Flutter中有一个非常方便的小部件,可以有效地处理这些问题,它被称为“安全区域”( SafeArea)。
个人理解,flutter , 把 异形屏 ,导航栏相关区域称为 安全区域 。
作者的思想 :屏幕的长宽去掉安全区域的大小,然后分成 100份 ,算出每一块的单位长度 。
我们可以使用 SizeConfig.safeBlockHorizontal or SizeConfig.safeBlockVertical为单位 ,对文字进行缩放 。
真实的软件开发过程,一般是设计人员先设计好设计图 or 设计稿(一般是1080px * 1920px为基准),然后研发人员进行开发
那我们就把屏幕宽和长 ,分成 1080 和 1920 个单位 ,然后按设计图上的标注去填写相应widgets的大小
所以我认为 flutter 非常适合百分比布局(天生适合按比例布局)
而Android 百分比布局,适配工作量非常大,兼容性差
在网上发现了一个开源库 ,原理我觉得差不多,大家可以学习一下
flutter_screenutil
如果觉得文章有用,帮忙点个喜欢❤️ ,????????????