Flutter框架简要介绍

什么是Flutter?

Flutter is a mobile app SDK for building high-performance, high-fidelity, apps for iOS and Android, from a single codebase.

这是谷歌给Flutter的定义,可以看到,Flutter是面向iOS和Android应用,提供一套基础代码的高性能高可靠软件开发工具包,使开发者能够在iOS和Android两个最主要的移动平台上,打造统一代码的高性能应用,这是Flutter的主要目标

Flutter有什么优点

  • 高生产率
    • 一套代码可以开发出 Android 和 iOS 应用
    • Dart语言优越性,使得同样的功能只需要很少的代码。
    • 迭代更加方便, hot reload 功能
  • 创建优雅的、高度可定制的用户界面
    • Flutter 内置了对Material Design和Cupertino (iOS-flavor)的 UI 组件库
    • 提供了可定制的 UI 组件,不再受制于OEM控件的限制

Flutter架构

Flutter 系统架构

Flutter 分为两个部分,上层是函数响应式的Framework(开源),下层是Engine,可以这样理解,基于Framework开发App,在Engine里运行。

与RN的区别

Flutter 视图原理
RN 视图原理

Flutter将UI组件和渲染器从平台移动到应用程序中,这使得它们可以自定义和可扩展。Flutter唯一要求系统提供的是canvas,以便定制的UI组件可以出现在设备的屏幕上。Dart程序和执行数据编码和解码的原生平台代码(蓝色,适用于iOS或Android)之间仍然有一个接口,但这能比JavaScript桥接器快几个数量级。

Flutter 工程结构

官方推荐的集成开发环境是IntelliJ,工程的层次结构大致是这样的:

Paste_Image.png

可以看到,Flutter框架自动生成了android目录和ios目录,并且框架已经做好了粘合两种平台的连接代码,开发者只需要在lib目录用Dart语言,基于其Framework编写App,即实现了一套代码产生两个平台的App。其中:

  • Android:底层引擎是C++代码通过Android的NDK编译,上层通过Dart编译器编译,以native code方式运行
  • iOS:底层引擎是C++代码通过LLVM编译,上层通过AOT-compiled,也是以native code方式运行

Everything’s a Widget

Widget 是每个 Flutter 应用的基础。每个 Widget 是一部分用户界面上不可变的定义。和其他框架把 View、controller、 Layout 和其他资源分开定义不一样,Flutter 具有一致的、唯一的对象模型—— Widget:

  • 一个结构性的元素(比如 按钮或者菜单)
  • 一个元素的风格(比如 字体或者颜色)
  • 指定布局属性(比如 padding)
  • 也可以包含一些业务逻辑
  • 其他…

Widget 通过组合来组成层级结构。每个 Widget 都内嵌在父 Widget 中,并继承父 Widget 的属性。 并没有单独的 “application” 对象,根 Widget 扮演这个角色。Widget 可以响应用户事件来改变 UI,比如用户点击了一个按钮把一个 Widget 替换为另外一个 Widget。框架会比较变化前后 UI 的差异,并高效的更新 UI。

Paste_Image.png

部分FAQ

  1. Flutter引擎有多大?
    官网说最小是6.7MB,我新建一个最简单的demo,编译出来一共7.1MB,整个引擎的大小还算是比较小的
  2. “hot reload”是怎么做到的?
    hot reload 的原理是插桩,类似instant run,debug模式下,对每一个方法和成员进行插桩,运行时期reload就生效了,无需重新安装
    注意:全局变量初始化、静态成员初始化、main方法不能热加载。
  3. 是否可以在原来的基础上,使用Flutter继续开发?
    可以,不过需要修改一些东西,包括入口和相互调用(需待研究)
  4. Flutter是否有反射和依赖注入框架
    目前还没有
    ...

小结

Flutter以一种类似游戏引擎,提供通过类似游戏开发的方式,以一套代码生成Android和iOS平台两种应用,很大程度上减少了App开发和维护的资源,同时Dart语言强大的性能表现和丰富的特性,使得开发比较便利,但是Flutter目前还处于Alpha阶段,许多功能还不是特别完善,完全替代目前Android和iOS开发还有比较长的路要走。

参考

flutter官网
flutter github
Dart

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

推荐阅读更多精彩内容