flutter 知识点总结(一)

文档参考 https://zhuanlan.zhihu.com/p/102193331
请直接参考原文


1.Dart中的..表示什么意思?

Dart中的..表示 级联操作符,为了方便配置而使用。...不同的是调用..后返回的this.而.返回的则是该方法的返回值。

2.Dart的作用域

Dart是没有publicprivate关键字的,默认就是公开的,私有变量使用下划线_开头

3.Dart是不是单线程模型?是如何运行的?

  • Dart是单线程模型。简单来说,Dart在单线程中是以消息循环机制来运行的,包含两个任务队列。一个是微任务队列microtask queue,另一个叫做事件任务队列event queue
  • flutter启动后,消息循环机制也启动了。首先按照先进先出的顺序逐个执行微任务队列中的数据,当微任务队列中的数据执行完成后便开始执行事件队列中的任务,事件任务执行完毕后再去执行微任务,如此循环往复,直到两个队列中的任务都为空。
  • 微任务队列(microtask queue),表示一个短时间内就会完成的异步任务。它的优先级最高,高于event queue,只要队列中还有任务,就可以一直霸占着事件循环。microtask queue添加的任务主要是由 Dart内部产生。
  • 事件队列(event queue),包含所有的外来事件:I/O、mouse events、drawing events、timers、isolate之间的信息传递。
  • 因为 microtask queue 的优先级高于event queue ,所以如果 microtask queue有太多的微任务, 那么就可能会霸占住当前的event loop。从而对event queue中的触摸、绘制等外部事件造成阻塞卡顿。
运行流程图

4.Dart是如何实现多任务并行的

  • Dart实现多任务并行主要依赖dart的并发编程、异步和驱动机制。
  • 在dart中,一个Isolate对象其实就是一个Isolate执行环境的引用,一般来说我们都是通过当前的Isolate去控制其他的Isolate完成彼此之间的交互,而当我们想要创建一个新的Isolate可以使用Isolate.spawn方法获取一个新的Isolate对象,两个Isolate之间使用SendPort相互发送消息,而Isolate中也存在了一个与之对应ReceivePort接收消息用来处理,但是我们需要注意的是SendPortReceivePort在每一个Isolate都有一对,只有同一个Isolate中的ReceivePort才能接受当前类的SendPort发送的消息并且处理。

Isolate可以把它理解为Dart中的线程。但它又不同于线程,更恰当的说应该是微线程。它与线程最大的区别就是不能共享内存,因此也不存在锁竞争问题,两个Isolate完全是两条独立的执行线,且每个Isolate都有自己的事件循环,它们之间只能通过发送消息通信,所以它的资源开销低于线程。

Isolate交互

5.说下Dart异步编程中的Future关键字?

在dart编程中,经常会使用Future来处理异步或者延时处理等任务操作。在dart的每一个isolate中,执行的优先级为:Main-MicroTask-EventQueue

6.说下Dart异步编程中的Stream数据流

  • 在 Flutter 中有两种处理异步操作的方式 Future 和 Stream,Future 用于处理单个异步操作,Stream 用来处理连续的异步操作
  • Stream 是一个抽象类,用于表示一序列异步数据的源。它是一种产生连续事件的方式,可以生成数据事件或者错误事件,以及流结束时的完成事件。
  • 单订阅流在发送完成事件之前只允许设置一个监听器,并且只有在流上设置监听器后才开始产生事件,取消监听器后将停止发送事件。即使取消了第一个监听器,也不允许在单订阅流上设置其他的监听器。广播流则允许设置多个监听器,也可以在取消上一个监听器后再次添加新的监听器。默认为单订阅模式
  • Stream 有同步流和异步流之分。它们的区别在于同步流会在执行 add,addError 或 close 方法时立即向流的监听器 StreamSubscription 发送事件,而异步流总是在事件队列中的代码执行完成后在发送事件。`

7. await for如何使用?

await for是用来不断获取stream流中的数据,然后执行循环体中的操作。它一般用在直到stream什么时候完成,并且必须等待传递完成后才能使用,不然会阻塞。

Stream<String> stream = new Stream<String>.fromIterable(['不开心', '面试', '没', '过']);
main() async{
    await for(String s in stream){
    print(s);
  }
}

8.说下mixin机制?

  • dart为了支持多继承引入mixin关键字。mixin定义的类不能有构造方法,这样可以避免继承多个类而产生的父类构造方法冲突。
  • mixins对象是类,mixins绝不是继承,也不是接口,而是一种全新的特性,可以mixins多个类,mixins使用需要满足一定条件。

9.介绍下flutter框架,以及优缺点

google退出的跨平台UI框架,可以快速在Android、ios上构建应用

优点

  • 热加载,保存后重载,模拟器立马看见效果,相比原生编译过程简单
  • 一切皆为组件,实现了富有感染力的灵活界面设计;
  • 运行效率高

缺点

  • 不支持热更新
  • Dart语言增加了学习难度

10.介绍下flutter的理念架构

flutter的理念架构

flutter自下而上分为EmbedderEngineFramework三层。

  • Embedder是操作系统适配层,实现了渲染Surface设置、线程设置,以及平台插件等平台相关特性的适配;
  • Engine层负责图形绘制、文字排版和dart运行时。具有独立虚拟机,正是由于他的存在,flutter可以运行在不同设备上
  • Framework是dart编写的基础视图库,包含动画、图形、手势等功能,使用频率最高的一层

11.flutter的EngineFramework作用

  • Framework是dart编写的框架,实现了一系列基础库,包含MaterialCuptertino风格的界面,还有就是动画、绘制、手势等等;
  • Engine层是Skia 2D的绘图引擎库,其前身是个向量绘图软件,chromeandroid均采用Skia作为绘图引擎层。skia是跨平台的,所以可以被嵌入到flutter的sdk中。android自带skia所以Flutter android SDKiOS sdk小很多

12.介绍下Widget、State、Context概念

  • Widget:在flutter'中一切皆为组件,可以将Widget想成一个可视化组件
  • Widget树:Widget以树结构进行组织。包含父Widget、子Widget
  • Context: Widget树结构中某个Widget位置引用。一个context只属于一个widget,他和widget一样是链接在一起的,形成一个context树
  • State:定义了StatefulWidget实例的行为,用于交互、干预widget行为和布局

13.简述StatelessWidgetStatefulWidget

  • StatelessWidget 一旦创建就不关心任何变化,在下次构建前不会有任何变化。如TextRowContainer等。生命周期也简单:初始化、build()渲染
  • StatefulWidget 生命周期内,该类所持有的数据可能会发生变化,这样的数据被称为State。如复选框、button等等。State与Context关联,并且关联是永久性的,State对象将永远不会改变其Context。当state与context关联时,state被视为已挂载。

14.StatefulWidget生命周期

生命周期
  • initState() : Widget初始化当前State,在当前方法中不能获取到Context的,如果想获取,可以试试Future.delayed
  • didChageDependencies()(1)initState() 后调用,(2)State对象依赖发生变化调用;系统语言、主题修改,系统也会通知调用
  • deactivate()当State被暂时从视图树种移除时会调用,页面切换时也会调用
  • despose()Widget销毁时调用
  • didUpdateWidget() Widget状态发生变化时调用,新旧Widget的key、runtimeType不变时调用。也就是Widget.canUpdate=>true.
  • reassemble() 热重载会被调用,在release下永远不会被调用

创建并打开:initState->didChangeDependencies->build.
横竖屏切换:didUpdateWidget->build 当前值保留
离开页面:deactivate->dispose 重新进入init重新初始化
热重载执行:reassemble->didUpdateWidget->build
调用setState->build

15.说下Widgets、RenderObjects和Elements的关系

  • Widget:仅用于存储渲染所需要的信息
  • renderObject:负责管理布局、绘制等操作
  • Element: 控制树上的实体,管理底层渲染树
    Widget会被inflate(填充)到Element,并由Element管理底层渲染树。Widget并不会直接管理状态及渲染,而是通过state这个对象来管理状态。flutetr创建Element可见树,相对于Widget是可变的,通常用于开发中,我们不用操作 Element,而是由框架层实现内部逻辑。就如一个UI视图树中,可能包含多个TextWidget,但是放在内部视图树的视角,这些TextWidget都是填充到一个个独立的Element中。Element会持有Widgets、RenderObjects的实例。记住,Widget只是一个配置,renderObject负责管理布局、绘制等操作。
    在第一个创建Widget的时候,会对应创建一个Element,然后将该元素插入到树中。如果之后Widget发生了变化,则将其与旧的Widget进行比较,并且更新Element。重要的事Element不会被重建,只是更新而已。

16.什么是状态管理,你了解那些状态管理框架?

Flutter中的状态和前端React中的状态概念是一致的。React框架核心是组件化,应用由组件搭建而成,组件最重要的概念就是状态,状态是一个组件的UI数据模型,是组件渲染的数据依据。
Flutter的状态分为全局状态和局部状态两种。推荐使用Google退出的Provider

17.简述Flutter的绘制流程

flutter绘制流程

Flutter只关心向GPU(图形处理器)提供视图数据,GPU的vsync(垂直同步)信号同步到UI线程,UI线程使用dart来构建抽象的视图结构,这份数据结构在GPU线程进行图层合成。,这些数据提供给skia引擎渲染为GPU数据,这些数据通过openGL或者Vulkan提供给过给GPU

18.简述Flutter的线程管理模型

flutter Engine层的架构示意图
  • 默认情况下,Flutter Engine层会创建一个lsolate,并且Dart代码默认运行在这个主lsolate上。必要时可以使用spawnUrlspawn两种方式创建新的lsolate,新创建的lsolate由flutter进行统一的管理
  • Flutter Engline自己不创建和管理线程,Flutter Engine线程的创建是由Embeder负责的。Embeder指的是将引擎移植到平台的中间层代码。
  • 在flutter架构中,Embeder提供四个Task Runner,每个Task Runner负责不同的任务,Flutter Engine不在乎Task Runner运行在哪个线程,但是它需要在线程整个生命周期中保持稳定。

19. Flutter是如何与原生Android、iOS进行通信的?

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

  • BasicMessageChannel : 用于传递字符串及半结构化信息
  • MethodChannel : 用于传递方法调用(method invocation)
  • EnentChannel:用于数据流event streams的通信

同时 Platform Channel 并非是线程安全的

20.简述Flutter的热重载

  • flutter的热重载是基于JIT编译模式的代码增量同步。由于JIT属于动态编译,能够将Dart代码编程生成中间代码,让Dart VM在运行时解释执行,因此可以实现动态更新中间代码实现增量同步。
  • 热重载流程可以分为5步,包括:扫描工程改动、增量编译、推送更新、代码合并、Widget重建。flutter在接收到代码后,并不会让APP重新启动执行,而只会副厂Widget树的重新绘制,因此可以保持改动前状态。
  • 另一方面,由于涉及状态的保存于恢复,涉及状态兼容与状态初始化场景,热重载是无法支持的,如改动前后widget状态无法兼容、全局变量与静态属性的更改、main方法里的更改、initState方法中的更改、枚举和泛型的更改等
  • 可以发现,热重载提高了UI的效率,非常适合写界面样式这样返回查看修改效果的场景。但由于状态保存机制限制,热重载本身有一些无法支持的边界
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容

  • flutter column row布局的列表自适应宽高mainAxisSize: MainAxisSize.mi...
    wayDevelop阅读 1,717评论 0 6
  • Flutter 1 Flutter是什么? Flutter是谷歌的移动UI框架,可以快速在iOS和Andro...
    江河_ios阅读 1,312评论 0 3
  • Dart 部分 其实学习过 JavaScript 或者 Java/Kotlin 的人,在学习 Dart 上几乎是没...
    Android高级工程师阅读 1,633评论 0 10
  • Dart是基于事件循环机制的单线程模型 一条执行线上,同时且只能执行一个任务(事件),其他任务都必须在后面排队等待...
    Hankkinn阅读 933评论 0 1
  • 渐变的面目拼图要我怎么拼? 我是疲乏了还是投降了? 不是不允许自己坠落, 我没有滴水不进的保护膜。 就是害怕变得面...
    闷热当乘凉阅读 4,238评论 0 13