Flutter:原理

原创:有趣知识点摸索型文章
创作不易,请珍惜,之后会持续更新,不断完善
个人比较喜欢做笔记和写总结,毕竟好记性不如烂笔头哈哈,这些文章记录了我的IOS成长历程,希望能与大家一起进步
温馨提示:由于简书不支持目录跳转,大家可通过command + F 输入目录标题后迅速寻找到你所需要的内容

目录

  • 1、开源跨平台UI框架
  • 2、Flutter的优缺点
  • 3、Flutter的理念架构
  • 4、Flutter的绘制流程
  • 5、Flutter 与原生Android、iOS进行通信的原理

1、开源跨平台UI框架

Flutter是Google推出的一套开源跨平台UI框架,可以快速地在Android、iOS和Web平台上构建高质量的原生用户界面。同时,Flutter还是Google新研发的Fuchsia操作系统的默认开发套件。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。

Flutter采用现代响应式框架构建,其中心思想是使用组件来构建应用的UI。当组件的状态发生改变时,组件会重构它的描述,Flutter会对比之前的描述,以确定底层渲染树从当前状态转换到下一个状态所需要的最小更改。


2、Flutter的优缺点

优点
  • 热重载(Hot Reload):利用 Android Studio 直接一个ctrl+r就可以重载,模拟器立马就可以看见效果,相比原生冗长的编译过程强很多
  • 一切皆为 Widget 的理念:对于Flutter来说,手机应用里的所有东西都是Widget,通过可组合的空间集合、丰富的动画库、分层扩展的架构,实现了富有感染力的灵活界面设计
  • 良好的运行效率:利用 Flutter 构建的应用在运行效率上会和原生应用差不多。
缺点
  • 不支持热更新
  • 第三方库有限,需要自己造轮子
  • Dart 语言编写,增加了学习难度,并且学习了 Dart 之后无其他用处

3、Flutter的理念架构

Widget

在 Flutter 中,几乎所有东西都是Widget。将一个Widget想象为一个可视化的组件,当你需要构建与布局相关的任何内容时,你就需要使用Widget

Widget树

Widget以树结构进行组织。包含其他Widgetwidget被称为父Widget(或widget容器)。

Context

仅仅是已创建的所有Widget树结构中的某个Widget的位置引用。简而言之,将context作为widget树的一部分,其中context所对应的widget被添加到此树中。一个context只从属于一个widget,它和widget一样是链接在一起的,并且会形成一个context树。

State

应用于State的任何更改都会强制重建Widget

StatelessWidget

一旦创建就不关心任何变化,在下次构建之前都不会改变。它们除了依赖于自身的配置信息(在父节点构建时提供)外不再依赖于任何其他信息。比如典型的TextRowColumnContainer等,都是StatelessWidget。它的生命周期相当简单:初始化、通过build()渲染。

StatefulWidget

在生命周期内,该类Widget所持有的数据可能会发生变化,这样的数据被称为State,这些拥有动态内部数据的Widget被称为StatefulWidget。比如复选框、Button等。State会与Context相关联,并且此关联是永久性的。


4、Flutter的绘制流程

a、渲染机制

Flutter 只关心向 GPU提供视图数据,GPUVSync信号同步到 UI线程,UI线程使用 Dart来构建抽象的视图结构,这份数据结构在 GPU线程进行图层合成,视图数据提供给 Skia引擎渲染为 GPU数据,这些数据通过 OpenGL提供给 GPU

Flutter 既不使用WebView,也不使用系统的原生控件,而是通过高性能的渲染引擎来画控件,它只有C/C++代码编写的单一层,这样开发者更容易控制系统。

Flutter用什么技术构建的? C, C++, Dart, and Skia (2D 渲染引擎)。Flutter 和 React Native 不同主要在于 Flutter 是直接通过skia渲染的 ,而 React Native 是将js中的控件转化为原生控件,通过原生去渲染的。

b、热重载

热加载是注入源代码到运行中的Dart虚拟机,包括增加新的类,和给已有类增加新的方法和变量以及修改已有方法。热加载功能是状态保持的(stateful),可以快速重复屏幕内容而不需要从主屏幕开始加载。

热重载的流程可以分为 5 步,包括:扫描工程改动、增量编译、推送更新、代码合并、Widget 重建。Flutter在接收到代码变更后,并不会让 App 重新启动执行,而只会触发 Widget树的重新绘制,因此可以保持改动前的状态,大大缩短了从代码修改到看到修改产生的变化之间所需要的时间。

另一方面,由于涉及到状态的保存与恢复,涉及状态兼容与状态初始化的场景,热重载是无法支持的,如改动前后 Widget状态无法兼容、全局变量与静态属性的更改、main 方法里的更改、initState方法里的更改、枚举和泛型的更改等。

可以发现,热重载提高了调试 UI 的效率,非常适合写界面样式这样需要反复查看修改效果的场景。


5、Flutter 与原生Android、iOS进行通信的原理

Flutter 通过PlatformChannel与原生进行交互,其中 PlatformChannel分为三种:

  • BasicMessageChannel :用于传递字符串和半结构化的信息。
  • MethodChannel :用于传递方法调用(method invocation)。
  • EventChannel: 用于数据流(event streams)的通信。
Flutter如何将代码运行在Android上?

引擎的C/C++代码使用AndroidNDK编译的,并且框架的大部分和APP代码作为本地代码(由Dart编译器编译的)运行的。

Flutter如何将代码运行在iOS上?

引擎的C/C++代码使用LLVM编译,并且任何Dart代码都是AOT编译成本地代码。

可以嵌入Flutter视图到你已经存在的AndroidiOSAPP中。

©著作权归作者所有,转载或内容合作请联系作者
禁止转载,如需转载请通过简信或评论联系作者。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,313评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,369评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,916评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,333评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,425评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,481评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,491评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,268评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,719评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,004评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,179评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,832评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,510评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,153评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,402评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,045评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,071评论 2 352

推荐阅读更多精彩内容