专栏首页yang0rangeFlutter系列(一)——详细介绍
原创

Flutter系列(一)——详细介绍

什么是Flutter

Flutter 是谷歌推出的开发移动UI框架,可以快速的在IOSAndroid上构建高质量的原生用户界面。

Flutter可以与现有的代码一起工作,并且Flutter是完全免费的,开源的。

总结来说:

Flutter是一款移动应用程序SDK,包含框架、widget和工具,为开发人员提供了一种在Android和iOS上构建和部署精美移动应用程序的简单高效的方式。

Flutter的优势

快速开发

毫秒级的热重载,修改后,您的应用界面会立即更新。使用丰富的、完全可定制的widget在几分钟内构建原生界面。

富有表现力和灵活的UI

快速发布聚焦于原生体验的功能。分层的架构允许您完全自定义,从而实现难以置信的快速渲染和富有表现力、灵活的设计。

原生性能

Flutter包含了许多核心的widget,如滚动、导航、图标和字体等,这些都可以在iOS和Android上达到原生应用一样的性能。

Flutter的开发语言

Flutter采用的是Dart作为开发框架和widget的语言。

为什么选择Dart语言?

Flutter在四个主要维度进行了评估,并考虑了框架作者、开发人员和最终用户的需求等因素。我们发现不同的语言在不同的层面符合一部分需求,但Dart在所有评估维度上得分都很高,并且符合我们的所有要求和标准。

Dart运行时和编译器支持Flutter的两个关键特性的组合:

基于JIT的快速开发周期:允许使用类型的语言进行形状更改和有状态的热重载;

以及AOT编译器,可生成高效的ARM代码,可以快速启动并拥有可预测的生产部署性能。

此外,我们有机会与Dart社区密切合作,Dart社区正在积极投入资源改进DartFlutter中的使用。例如,当我们采用Dart时,该语言没有提供生成原生二进制文件的工具链(这对于实现可预测的高性能是很有帮助的),但是现在实现了,因为Dart团队为Flutter构建了它。同样,DartVM之前已经针对吞吐量进行了优化,但团队现在正在优化VM的延迟时间,这对于Flutter的工作负载更为重要。

Dart在以下主要标准上得到高分:

开发人员的效率 Flutter的主要价值主张之一是通过让开发人员使用相同的代码库为iOSAndroid创建应用程序,从而节省了工程资源。使用高效的语言可以进一步加速开发周期,并使Flutter更具吸引力。这对我们的framework团队和开发人员都非常重要。大部分Flutter功能都是用Dart实现,因此我们需要在10万行代码时能保持高效的而不会牺牲frameworkwidget的可读性。

面向对象虽然我们可以使用非面向对象的语言,但这意味着要重新解决几个难题。另外,绝大多数开发人员都具有面向对象开发的经验,因此更容易学习如何使用Flutter进行开发。

可预测,高性。借助Flutter,我们希望使开发人员能够快速创建流畅的用户体验。为了实现这一点,我们需要能够在每个动画帧中运行大量的代码。这意味着我们需要一种既能提供高性能又能提供可预测性能的语言,而不会出现会导致丢帧的周期性暂停。

快速内存分配 Flutter框架使用函数式流,它很大程度上依赖于底层的内存分配器,从而有效地处理小的、短期的内存分配会非常重要,所以在缺乏此功能的语言中Flutter无法有效地工作。

Flutter应用程序性能如何?

Flutter应用程序性能非常出色。Flutter旨在帮助开发人员轻松实现恒定的60fpsFlutter应用程序通过本机编译的代码运行 - 不涉及解释器。这意味着Flutter应用程序可以快速启动并执行。

Flutter开发体验如何?编辑和刷新之间有多长时间?

Flutter实现了热重载开发循环。您可以在设备或模拟器上实现亚秒级重载。

Flutter的热重载是有状态的,这意味着应用程序状态在重载后仍然会保留。所以您可以在应用程序中各个页面快速迭代开发,而无需在每次重新加载后都要从主屏幕重新开始。

Flutter的优势

综上所述,总结来说,Flutter的优势有如下几个方面

性能强大,流畅

Flutter对比weexreact native相比,性能的强大是有目共睹的。基于dom树渲染原生组件,很难与直接在原生视图上绘图比肩性能,Google作为一个轮子大厂,直接在两个平台上重写了各自的UIKit,对接到平台底层,减少UI层的多层转换,UI性能可以比肩原生,这个优势在滑动和播放动画时尤为明显。

路由设计优秀

Flutter的路由传值非常方便,push一个路由,会返回一个Future对象(也就是Promise对象),使用await或者.then就可以在目标路由pop,回到当前页面时收到返回值。这个反向传值的设计基本是甩了微信小程序一条街了。弹出dialog等一些操作也是使用的路由方法,几乎不用担心出现传值困难

单例模式

Flutter支持单例模式,单例模式的实现也非常简单。单例模式很好的解决了一些问题。相比之下,js的单例则并不是一个真正的单例,或者说不是一个简单的单例,这也是受限于js所运行的环境。单例模式并不总是合理的,容易被滥用。但是在App的初期开发中,往往一个容易实现的单例可以帮助我们快速完成一些逻辑的搭建。

优秀的动画设计

Flutter的动画简单到不可思议,动画对象会根据屏幕刷新率每秒产生很多个(一般是60个)浮点数,只需要将一个组件属性通过补间(Tween)关联到动画对象上,Flutter会确保在每一帧渲染正确的组件,从而形成连贯的动画。这种十分暴力的操作在Flutter上却看不到明显的卡顿,这也是Flutter的一个魔力所在。相比之下其他跨平台框架几乎不能设计动画……往往会遭遇非常严重的性能问题。

UI跨平台稳定

Google直接在两个平台上在底层重写了UIKit,不依赖于Css等外部解释器,几乎不存在UI表达不理想,渲染不正常的情况,可以获得非常稳定的UI表达效果。Css换个浏览器就有不同的表现,基于Css的跨平台框架很难获得稳定的UI表现。

可选静态的语言,语言特性优秀

Dart是一个静态语言,这也是相对于js的一个优势。Dart可以被编译成js,但是看起来更像java。静态语言可以避免错误,获得更多的编辑器提示词,极大的增加可维护性。很多js库也已经用ts重写了,Vue3.0的底层也将全部使用ts编写,静态语言的优势不言而喻。

最后

当然,Flutter也有一些不足,还有和React Native的比较我会在下一篇文档当中详细介绍介绍。

Flutter已经是Top20的软件库,通过接下来的一系列的文章,希望我和大家一起来学习Flutter,一起进步,一起有所收获,掌握未来技术主流的主动权!

有什么好的建议,意见,想法欢迎给我留言!

参考

https://www.jianshu.com/p/c51fc925bfd1

https://flutterchina.club/

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter系列(一)——详细介绍

    Flutter 是谷歌推出的开发移动UI框架,可以快速的在IOS和Android上构建高质量的原生用户界面。

    Demo_Yang
  • 闲鱼基于Flutter技术的架构演进和创新

    最近一段时间一直学习Flutter,也尝试写一下Demo,但是在用的时候。从一开始惊艳到了,觉得写起来很爽,各种UI效果实现起来很棒,而且由于渲染机制,还让双端...

    Demo_Yang
  • Flutter系列(二)——与React Native进行对比

    React Native也是一种跨平台的开发模式,现在还有一些都在用,比如我了解的去哪儿,京东的部分事业群都在用React Native,我在之前的项目开发当中...

    Demo_Yang
  • 革命性web前端框架Flutter详细介绍和学习路径

    Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutte...

    Javanx
  • 客户端统一开发框架 Flutter 完全指南

    Flutter 作为一个跨平台的框架,其开发技术栈融合了 Native 和前端的技术,不仅涉及到了 Native(Android、iOS )的开发知识,又吸取了...

    老钱
  • 2020 Flutter开源资源索引

    (3)Flutter Create 是我们发起的一次开发竞赛 https://github.com/pinkeshdarji/FlutterCreateSub...

    jerrypxiao
  • Flutter系列(一)——详细介绍

    Flutter 是谷歌推出的开发移动UI框架,可以快速的在IOS和Android上构建高质量的原生用户界面。

    Demo_Yang
  • 开始使用:了解更多信息 顶

    南郭先生
  • Flutter the Future

    Flutter Interact 2019在双12的凌晨结束了,6个多小时的大会,每一分钟都让一个开发者感到惊艳。

    用户1907613
  • Flutter学习总结系列----第一章、Flutter基础全面详解

    版权声明:本文为博主原创文章,未经博主允许不得转载。https://www.jianshu.com/p/2c9867e737a1

    AWeiLoveAndroid

扫码关注云+社区

领取腾讯云代金券