flutter 知识点(二)

117 阅读4分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第19天,点击查看活动详情

Flutter 中widget、Element、 RenderObject关系

  • Widget实际上就是Element的配置数据,Widget树实际上是⼀个配置树,⽽真正的UI渲染树是由Element构成;不过,由于Element是通过Widget⽣成,所以它们之间有对应关系,所以在⼤多数场景,我们可以宽泛地认为Widget树就是指UI控件树或UI渲染树。
  • ⼀个Widget对象可以对应多个Element对象。这很好理解,根据同⼀份配置(Widget),可以创建多个实例(Element)。
  • 从创建到渲染的⼤体流程是:根据Widget⽣成Element,然后创建相应的RenderObject并关联到Element.renderObject属性上,最后再通过RenderObject来完成布局排列和绘制。flutter使⽤RenderObjects管理传统UI对象的许多职责(例如维护布局的状态)。RenderObjects在帧之间保持不变,flutter的轻量级
  • Widgets告诉框架在状态之间改变RenderObjects。
  • Widget 仅⽤于存储渲染所需要的信息。
  • RenderObject 负责管理布局、绘制等操作。
  • Element 才是这颗巨⼤的控件树上的实体。

Layer

IOS的每⼀个UIView都有⼀个layer,flutter的render object不⼀定存在layer,⼀般情况下⼀个renderObject⼦树都渲染在⼀个layer上,那么什么renderObject具有layer,⼦renderObject怎么渲染到这个layer?

  • 当⼀个renderObject的 alwaysNeedsCompositing == true 或isRepaintBoundary == true,renderOject会有对应的compositinglayer
  • ⼦renderObject会对⽬标layer返回对应的offsetLayer, ⽬标compositing layer再根据offset合成⼀个渲染的纹理buffer

didChangeDependencies有两种情况会被调⽤。

  • 创建时候在initState 之后被调⽤
  • 在依赖的InheritedWidget发⽣变化的时候会被调

Flutter跟ReactNative、weex 等有什么不同?

  1. WebViews 最早的跨平台⽅案是基于JaveScript 和 WebView的,像PhoneGap Cordova、Ionic等。UI通过WebView来显⽰html代码,系统服务则通过⼀个中间层桥接到JaveScript中去。
  2. 原⽣App 苹果2008年发布iOS,Google 2009年发布Android,它们的SDK是基于两种不同的编程语⾔Objective-C 和 Jave.现在⼜有了Swift和Kotlin
  3. React Native RN不仅桥接系统服务,也将系统UI也桥接到了JaveScript中,这样写出来的UI最终也会渲染成原⽣的控件。
  4. Flutter Flutter使⽤Dart语⾔开发,Dart可以被编译(AOT)成不同平台的本地代码,让Flutter可以直接和平台通讯⽽不需要⼀个中间的桥接过程,从⽽提⾼了性能。

Widget的两种类型是什么

  • StatelessWidget: ⼀旦创建就不关⼼任何变化,在下次构建之前都不会改变。它们除了依赖于⾃⾝的配置信息(在⽗节点构建时提供)外不再依赖于任何其他信息。⽐如典型的Text、Row、Column、Container等,都是StatelessWidget。它的⽣命周期相当简单:初始化、通过build()渲染。
  • StatefulWidget: 在⽣命周期内,该类Widget所持有的数据可能会发⽣变化,这样的数据被称为State,这些拥有动态内部数据的Widget被称为StatefulWidget。⽐如复选框、Button等。State会与Context相关联,并且此关联是永久性的,State对象将永远不会改变其Context,即使可以在树结构周围移动,也仍将与该context相关联。当state与context关联时,state被视为已挂载。StatefulWidget由两部分组成,在初始化时必须要createState()时初始化⼀个与之相关的State对象

mixins extends implement之间的关系

继承(关键字 extends)、混⼊ mixins (关键字 with)、接⼝实现(关键字 implements)。这三者可以同时存在,前后顺序是extends ->mixins ->implements。

Flutter中的继承是单继承,⼦类重写超类的⽅法要⽤@Override,⼦类调⽤超类的⽅法要⽤super。

在Flutter中,Mixins是⼀种在多个类层次结构中复⽤类代码的⽅法。mixins的对象是类,mixins绝不是继承,也不是接⼝,⽽是⼀种全新的特性,可以mixins多个类,mixins的使⽤需要满⾜⼀定条件。