扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
细心的开发者会发现flutter构建的App体积比native的大一些,是什么原因造成App体积大呢?
目前成都创新互联已为上千的企业提供了网站建设、域名、网页空间、网站托管维护、企业网站设计、巴中网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
其实flutter 在release时App体积和native的大小差不多,而debug时体积通常会大。debug版本体积较大是为了Hot reload和快速编译。如果有flutter开发经验的朋友都体验过,如果您修改一下App的背景颜色,只需save一下就可以立刻看到修改后效果。我称之为“像艺术家一样在创造App”,因此为了实现这些目标,提高开发的效率,debug将占用全部资源。而当我们构建release版时,flutter又会采用AOT策略,提高App运行效率,release版只打包必需的资源,因而体积又会减少。
另外,flutter团队也一直在寻找减小程序大小的方法。
做移动端开发的小伙伴都知道,针对不同型号和尺寸的手机要进行页面适配,且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)
在用Flutter 开发windows和linux跨平台应用的时候,如何设置默认窗口大小呢?
flutter没有提供统一的api,所以默认的窗口大小是1280x720.
如果我们想要改成自己想要的默认窗口大小呢?比如我想要设置为:512像素宽, 926像素高
我该怎么做呢?
请看我的教程。
首先你确保你已经为项目创建了windows和Linux的支持。
目前Flutter 为windows和linux提供的是托管式运行的主程序,可以理解为一个壳子,这个壳子就是用cpp写的,平台原生的window 窗口。
所以我们可以打开相应的cpp源代码,设置默认窗口大小。
这里先讲windows和linux,因为mac 平台跟windows和linux不一样,后面单独给大家讲解。
我们看图。
源代码路径位于:
windows/runner/main.cpp
找到
第一个参数是宽度,单位是px,第二个是高度,单位是px
修改后重新运行生效。
源代码路径位于:
linux/my_application.cc
找到
方法的第一个数字是宽度,第二个是高度,单位也是px像素。
修改后,重新运行生效。
现在,你已经学会了如何设置初始窗口大小了。
Flutter是一个移动应用程序的软件开发工具包(SDK),具有以下特征:
跨平台应用的框架,没有使用WebView或者系统平台自带的控件,使用自身的高性能渲染引擎自绘
简化版的浏览器,最大限度在android和ios上统一UI,包括业务逻辑和用户体验
开发语言使用dart,结合C, C++, 和Skia(2D渲染引擎)构建
支持hot reload,包含着完整的控件和工具链
一切皆控件,控件是每个Flutter应用程序的基本构建块,与分离视图、控制器、布局和其他属性的框架不同,Flutter具有一致的统一对象模型:控件。一个控件可以定义:结构元素(比如按钮或菜单)、风格元素(比如字体或颜色方案)、布局的方面(比如填充)、一些业务逻辑等
组合大于继承,控件本身通常由许多小型、单用途的控件组成,结合起来产生强大的效果,类的层次结构是扁平的,以最大化可能的组合数量
强化版的WebView,框架仅提供一个View层,大部分功能要依赖原生
目前只能够运行大部分Dart代码(不能引入dart:mirrors或dart:html库)
本文是根据 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
如果觉得文章有用,帮忙点个喜欢❤️ ,????????????
最近在做的一个项目,项目的前期采用Weex开发。但是随着交互复杂度的增加,Weex一处开发多处多处运行的特征并没有很好的体现,相反很多时候我们还是需要做IOS和Android的适配。如今火热的Flutter相比Weex和Rn来说,给出了更好的跨平台解决方案。所以我们设计了一套基于Weex实现,底层跑在Flutter Engine上的框架。
底层的Runtime采用isolate engine,框架业务逻辑,Dom的解析逻辑和Render逻辑都跑在这里。
渲染引擎采用Flutter的Skia,彻底剥离了Android和IOS的差异性.
将Weex VirsualDom的解析都替换成Flutter Widget.
设计基于Weex2Dart的Brider,使JS和Dart可以相互调用
weex-demo的性能展示
release环境下采用AOT模式,性能会有质的飞跃。
Android-Release版本只有10m大小
相比Weex和Rn具有更好的性能,同时具有更好的跨平台性
相比Flutter,具有动态部署的能力(Flutter Release采用AoT模式并没有动态部署的能力,即使Debug版本也只是开发环境下才有动态化能力并没有可以实施项目的能力)
只需要会Weex开发或则Rn开发就可以,不需要额外学习Dart,已有的Weex项目可以无缝切换。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流