Flutter【0】

Flutter是什么?

  • Flutter是谷歌的移动端跨平台UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。简单来说,Flutter是一款移动应用程序SDK,包含框架、控件和一些工具,可以用一套代码同时构建Android和iOS应用,并且性能可以达到原生应用一样的性能。
    在这里插入图片描述

移动端跨平台框架

在这里插入图片描述
在传统的原生开发中,一般都要维护Android、iOS两个开发团队,版本迭代时,无论人力成本,还是测试成本都会变大。这一点可能对于我们普通的android程序员感受并不深,或者说我们不care这一点。但是站在公司的角度上,如果能够有一套代码,直接就能够开发出android的apk和ios的ipa,是不是意味着我只需要拥有开发维护这套代码的一个团队就可以了?从人力成本上来说,可以让我少发一些工资。而在开发的角度,一套代码也能够很好的完成复用、测试以及UI风格的统一。

早在2008年,就有一款叫做“PhoneGap”的框架获了奖并开始支持Android平台。现在我们说的PhoneGap一般指的是"Cordova"。它是PhoneGap贡献给Apache后的开源项目,是从PhoneGap中抽离出的核心代码,是驱动PhoneGap的核心引擎。两者维护的是共同的一份源代码组件,只有名字和包名不一样。PhoneGap是一个采用HTML,CSS和JavaScript来完成跨平台开发的技术,当时PhoneGap宣称接近原生性能。然而它的工作原理是基于WebView,然后利用JavaInterface来完成与原生代码的交互。我们称这种工具为WebView JavaScript Bridge(JsBridge)。

这种方式,能够很好的解决跨平台与动态更新的需求但是,我们都知道android WebView的渲染效率很差,同时JavaScript是解释型语言,它不需要编译,在运行时候解释执行,这就导致JavaScript的执行性能太低了。同时因为android自身的问题,使用WebView过程中消耗的内存,没有办法在不需要使用的时候进行及时的回收,这样会导致我们的可用内存越来越少,最终OOM。所以类似Flutter这种框架的出现是必然的,现有的跨平台框架,比如RN都是基于JS,由于JS的执行性能,导致跨平台应用性能一直无法突破瓶颈。而Flutter在Debug使用JIT编译,支持热重载,能够提高我们的开发效率,而Release中利用AOT直接编译成机器码,能够达到更好的性能。从设计角度而言,Flutter提供了非常丰富的Widget组件,能够让我们非常轻松的实现Android或者IOS风格的UI效果。

Flutter优势

热重载
页面每次改动,不需要手动去刷新,可自动刷新。即支持开发过程中热重载。

统一的UI
Flutter 提供丰富的内置 UI 组件——Material Design(针对 Android)和Cupertino(适用于 iOS ),不需要担心在众多设备上看起来会有什么不同。

Flutter架构

在这里插入图片描述

Flutter的架构主要分成三层:Framework,Engine和Embedder。

1.Framework使用dart实现,包括Material Design风格的Widget,Cupertino(针对iOS)风格的Widgets,文本/图片/按钮等基础Widgets,渲染,动画,手势等。此部分的核心代码是:flutter仓库下的flutter package,以及sky_engine仓库下的io,async,ui(dart:ui库提供了Flutter框架和引擎之间的接口)等package。
2.Engine使用C++实现,主要包括:Skia,Dart和Text。Skia是开源的二维图形库,C++ 的2D绘图引擎,调用GPU来完成渲染,提供了适用于多种软硬件平台的通用API。

3.Embedder是一个嵌入层,即把Flutter嵌入到各个平台上去,这里做的主要工作包括渲染Surface设置,线程设置,以及插件等。从这里可以看出,Flutter的平台相关层很低,平台(如iOS)只是提供一个画布,剩余的所有渲染相关的逻辑都在Flutter内部,这就使得它具有了很好的跨端一致性。

Dart语言介绍

Flutter 用Dart作为开发框架和widget的语言,如果你有编程经验,尤其是了解Java或Javascript, 那么你回发现Dart学习起来非常容易。Flutter中文网编辑了一份可以帮助您快速学习Dart的Dart语言资源列表,希望对你有用。

Flutter使用dart语言,在开发阶段采用JIT模式,这样就避免了每次改动都要进行编译,极大的节省了开发时间;
基于AOT的发布包lutter在发布时可以通过AOT生成高效的ARM代码以保证应用性能。

为了快速流畅的用户体验需要能够在每个动画帧运行大量的代码,不能有周期性的停顿,否则会造成掉帧。

单线程:
不需要锁,不存在数据竞争和变量状态同步,也没有线程上下文切换的性能损耗和锁导致的卡顿。

垃圾回收
多生代无锁垃圾回收器,专门为UI框架中常见的大量Widgets对象创建和销毁优化。

  • Flutter与RN的优势
    RN是通过JavaScript通过 bridge 传递到native完成原生绘制, bridge 的成本高,因为需要频繁的跨桥调用,导致卡顿等性能问题。
    在这里插入图片描述
    Flutter利用DVM(dart虚拟机) 减少了桥的交互,在运行时期直接执行这些编译后的原生代码,就和我们进行原生开发一样,不再需要Bridge来担任中介的角色
    在这里插入图片描述

Flutter和React-Native、Weex这样的动态化框架有什么不同?

React-Native、Weex核心是通过Javascript开发,执行时需要Javascript解释器,UI是通过原生控件渲染。Flutter与用于构建移动应用程序的其它大多数框架不同,因为Flutter既不使用WebView,也不使用操作系统的原生控件。 相反,Flutter使用自己的高性能渲染引擎来绘制widget。Flutter使用C、C ++、Dart和Skia(2D渲染引擎)构建。在IOS上,Flutter引擎的C/C ++代码使用LLVM编译,任何Dart代码都是AOT编译为本地代码的,Flutter应用程序使用本机指令集运行(不涉及解释器)。而在Android下,Flutter引擎的C/C ++代码是用Android的NDK编译的,任何Dart代码都是AOT编译成本地代码的,Flutter应用程序依然使用本机指令集运行(不涉及解释器)。因此,Flutter能达到原生应用一样的性能。

同时,Flutter提供了一组自己的widget,由Flutter的framework和引擎管理和渲染。您可以浏览Flutter widget的目录。之所以不适用原生控件,是因为Flutter希望最终结果是更高质量的,如果Flutter使用原生系统widget,Flutter应用的质量和性能将受到这些widget本身质量的限制。例如,在Android中,有一组硬编码的手势和固定的规则来对它们进行手势冲突消歧。在Flutter中,您可以编写自己的手势识别器,该手势识别器是手势系统中的一级参与者 。此外,由不同人撰写的两个小工具可协调手势冲突消歧。

Flutter支持像webpack一样“热重载”或者Android “instant run”吗?

支持,Flutter支持Hot Reload,通过将更新的源代码文件注入正在运行的Dart VM(虚拟机)中工作。这不仅包括添加新类,还包括向现有类添加方法和字段,以及更改现有函数。详情请参阅Flutter热重载 。

对于程序员/开发人员来说,要使用Flutter必须具备哪些经验?

Flutter对熟悉面向对象概念(类、方法、变量等)和命令式编程概念(循环、条件等)的程序员来说是很容易入门的。学习和使用Flutter,无需事先具有移动开发经验。 我们已经看到了一些不怎么有编程经验的人学习并使用Flutter进行原型设计和应用程序开发。

Flutter未来前景

越来越多的厂商使用flutter进行开发,例如阿里,京东金融,腾讯,Flutter的前途一片大好。在这里插入图片描述

应用示例:

  • 一个开源的 Flutter 应用实例
    开发一个APP实现基础功能,包括登录、资讯列表、动弹列表、评论列表支持下拉刷新或分页加载等。
    在这里插入图片描述
    ios截图
    在这里插入图片描述
    Android截图

本文引用以及推荐的参考学习资料

猜你喜欢

转载自blog.csdn.net/cena1001/article/details/109332225
今日推荐