[flutter] 写给iOS开发的flutter指南

移动开发漫谈

移动开发在IT开发行业算是一个比较年轻的门类,2008年苹果公司才发布了iOS SDK,2009年谷歌发布了Android SDK,分别基于Objective-C和Java两门比较古老的语言开发,后来双方陆续推出了swift和kotlin两门现代语言来普及自己的优势。在原生开发的领域之外,也有各种各样的跨平台开发技术层出不穷。下面我们简单聊一下各自的特点。

webview

第一种解决方案是基于JavaScript and WebViews来实现的,其中的代表为PhoneGap, Apache Cordova,他们将项目内需要动态展示的页面(新闻、商品之类)通过原生的webview控件来加载出来,这样一来,这个模块不需要经过发版,审核一个比较漫长的过程也可以实现一次代码,两个平台运行。

在iOS SDK和Android SDK的帮助下,我们可以访问该平台下的所有功能。但是webview不同,本质上仍然是运行在一个受限的沙盒环境,对于蓝牙,通讯等必须由该平台才能完成的功能,通常我们需要借助bridge来实现,webview 通过 jsbridge 这个桥梁来实现js和原生之间的通讯,开放相应的接口,实现上下文的切换。参照下图


但是由于多了一层通讯和本身的问题,webview的解决方案在性能方面并没有太出色。对于复杂的界面和动画,都不是很理想。

RN 和 Weex

webview的解决方案将业务和绘制都交给了自己来解决再加上有限的环境,所以很多场景不堪重任,于是出现了js开发+原生渲染的解决方案。

React Native 是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,支持iOS和Android两个平台。RN利用js构建在iOS和安卓上运行的应用,它使用与React相同的设计,以数据变化驱动ui变化,通过js core 将虚拟DOM映射为安卓和iOS上原生的控件,相对于webview来说,RN是原生控件渲染,所以在性能上的表现要好很多(rn是react在原生平台的衍生产物,同样的flutter也借鉴了react很多东西,在很多思想上有很多相似的地方)。

weex是国内阿里巴巴退出的跨平台开发解决方案,也是用js开发+原生渲染,但是生态环境和rn比还有些差距,和rn最大的地方在于语法层面上的不同。

这部分的通讯流参照下图

总的来说,这种方式已经很成熟了,采用web开发技术栈,前端人员好上手。原生渲染,性能上明显提升。有热更新动态化技术解决方案。但是渲染上需要和原生通信不断拖动的场景下仍然有时候会出现卡顿等不好的体验,

Flutter

Flutter采用了自绘UI+原生的方式来解决了跨平台开发方案,它没有用脚本语言而是采用了不同的方案,通过编译语言Dart加上自绘引擎来避免了绘制UI时候的频繁通信(解决了UI的通信,如果需要平台下的其他能力仍然需要通信)Dart编译成本平台代码,无需频繁切换上下文,避免了性能消耗,缩短了启动时间。我们下面着重说明一下Flutter。

Flutter简介

flutter是什么?Flutter是Google发布的一个用于创建跨平台、高性能的移动应用程序SDK。他包括了一个现代的响应式框架、一个2D渲染引擎、现成的widget和开发工具,通过这些我们可以快速的实现构建,调试,还原一个精致的应用。我们可以书写一份精简的代码,同时开发iOS和Android,通过大量的多是多样的widget组合构建Material Design和Cupertino风格的APP。

跨平台自绘

我们上面提到过,flutterUI绘制方面没有采用原生的控件,而是通过了自家的跨平台2D渲染引擎skia来绘制UI,直接调用的系统界别的api,避免了大量的上下文切换通信带来的性能损耗问题,也可以避免对原生控件的依赖。

开发语言Dart

Dart也是谷歌自家的语言,Flutter采用了Dart来开发而不是用js。Dart是一门现代语言,你可以看到很多现代语言拥有的优点,简单易学,易于上手。更重要的是Dart支持开发阶段的的JIT和发包时候的AOT,在开发周期时候的热重载特点可以大量提高你在开发时候的效率,而发包时候,可以通过AOT生成高效的ARM代码以保证应用性能,想对应的js就不能实现。

Dart语法就参考官网了,例如可选类型、闭包、库、词法作用域、顶层函数、命名参数、async/await等等。一些优秀的设计都有,话说你从swift1学到了swift4还有什么不易学呢哈哈,开个玩笑。

widget

这个概念在flutter里很重要很重要!可以说理解了widget对于你书写flutter有着至关重要的作用。在flutter的世界里,万物皆widget

与其他将视图、控制器、布局和其他属性分离的框架不同,Flutter具有一致的统一对象模型:widget。widget本身就分很多种,有布局类的,基础控件类的,功能性的,手势,帮助类的等等等等,可以说凡是你看到的都是widget。

Widget根据布局形成一个层次结构。每个widget嵌入其中,并继承其父项的属性。没有单独的“应用程序”对象,相反,根widget扮演着这个角色。你可以想着整个应用,每一个页面都是一个widget套着一个widget。在flutter中,自定义widget的时候相比原生开发来讲并不多,更多时候我们是将不同的widget组合起来来拼成我们想要的模样。


Flutter结构

我们可以看到分为Framework 和Engine两层。

Engine层面是有c++写的,其中包括了 Skia引擎、Dart运行时、文字排版引擎等。在代码调用 dart:ui库时,调用最终会走到Engine层,然后实现真正的绘制逻辑。

通常我们用的更多的是Framework层面的东西,这是由Dart实现的。从高到底,依次深入,我们可以用更少的代码来实现更多的事情,也可以深入到下面自绘view。


这篇文章就聊到这里,接下来简单对比下flutter和iOS里面一些概念的对比。

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

推荐阅读更多精彩内容