flutter

作者: 李啦啦 | 来源:发表于2019-07-09 20:24 被阅读0次

1.Widget,、Element、RenderObject？
Widget:
在Android开发中，TextView, Button等这些都是一个控件，而在Flutter中 Widget的概念更广泛，不仅可以表示UI元素，而且还可以表示一些功能性的组件。
Text: 创建一个带格式的文本。
Row、Column: 在水平与垂直方向上创建布局。
Stack:类似与Android中的LinearLayout, 可以让子widget堆叠。

rootWidget.png

Widget是用户界面的一部分,并且是不可变的（immutable）。Widget会被inflate到Element,并由Element管理底层渲染树。Widget本身没有可变状态（所有的字段必须是final）。如果想要把可变状态与Widget关联起来，可以使用StatefulWidget，StatefulWidget通过使用StatefulWidget.createState方法创建State对象，并将之扩充到Element以及合并到树中；

image.png Element:

element.png

An instantiation of a [Widget] at a particular location in the tree.
在[Widget]树中，特定位置的一个实例。负责组织管理Widget配置和RenderObject渲染。

Widget与Element的关系(Widget的作用)：
Widget为Element描述需要的配置；
创建Element, ===> createElement();
Element是否需要更新，===>canUpdate(Widget oldWidget, Widget newWidget);
Flutter 的Framework层通过一套算法来对比rebuild后的widget树，如果没有发生改变，则Element不触发重绘。换言之，就是Widget树的重建并不会直接导致Element树的重建。

Element的状态一般由flutter的framework层管理，开发者不用关心，只需要负责更改Widget就可以。

RenderObject:

render.png

An object in the render tree

layout.png

renderObject不在framework.dart中，存在于object.dart内。renderObject表示为渲染树的一个对象，也就是renderObject负责真正的渲染工作。performLayout()计算渲染对象的布局、paint()绘制等都由renderObject负责。

三者之间的关系：
Widget树负责UI的配置，这部分由用户来设置，Element树由Framework通过算法对比Widget的配置来创建或者更新，最后由renderObject来负责渲染。

2.StatelessWidget与StatefulWidget

StatelessWidget 一般用来更新不需要在运行时改变的视图，比如logo这些，创建之后不需要修改配置数据。

statelessWidget.png
如果想动态地改变UI，比如先从网络获取图片然后改变UI，这个时候就要用到StatefulWidget ，StatefulWidget 会告诉framework 层widget的状态发生了改变，会去更新widget。

statefluwidget.png

这个状态(State)是什么？状态是在构建控件时可以同步读取的信息，而且在控件的生命周期内可以改变。当我们定义的widget继承于StatefluWidget，我们就需要重写createState()方法。

StateWidget.png

setState.png

最终状态的改变需要在setState()方法内设置，通过调用setState()然后交由framework层处理，framework层会重新build来更新最新的状态。所以开发者需要在状态改变时及时通过setState()通知framework状态变化。

3.页面跳转
在flutter中两个页面的导航是用Navigator 和 Route。
Route在应用中是一个抽象的“screen”或者“page”的概念。route可以粗略的认为是一个Activity。Navigator可以通过push()或者pop() routes来切换屏幕。Navigator的工作原理类似于栈，可以push()一个新的route来跳转，通过pop()来返回。

push_pop.png

4.异步任务与消息循环机制
消息循环机制：

eventqueue.png 一个事件队列（消息队列）的作用就是不断的从队列中取出事件（或者说消息）并处理他们直到这个队列为空。

eventqueues.png
事件队列（消息队列）中的事件（消息）的来源可以为用户的输入、文件I/O操作、定时器等等。上图所示的事件队列就包含了用户事件和定时器消息。
为什么这样设计？应用启动到应用程序停止之间，会有磁盘I/O、用户点击、网络请求、定时器等等各种各样的东西。无法去预测这些事件何时发生，以何种顺序发生，而且还需要不能阻塞。
Dart的异步操作特性（futures, streams, async and await）都是在这个简单的循环上构建的。
Dart是单线程模型，有一个重要的概念叫isolate（隔离）。默认情况下我们的应用都是运行在main isolate中（类似于android中的main thread）。在特殊的情况下，也可以通过isolate 的API创建新的isolate，多个isolate可以更好的利用多核CPU的特性来提供效率。多个isolate之间是无法直接共享内存，不同的isolate之间只能通过isolate API来进行通信。具体的更多详情可以参阅官方文档。

与android类似，Dart也是通过事件驱动，通过事件队列（消息队列）不停的从队列中拿事件或者消息来保证应用的运行。不同点是Dart的消息循环机制是有两个队列，event queue, microtask queue。每个isolate中的event loop(消息循环)，event queue(个人理解为普通队列）,microtask queue（优先队列）也都是各种独享的。

eventloop.png

1.启动应用；
2.执行main方法；
3.执行main方法后，开始处理microtask queue,直到为空。
4.当microtask queue为空的时候才开始处理event queue，值得注意的是，event queue并不会一直把队列里边的event执行完，而是一次取出一个event执行，执行完之后就回到前面去重新判断microtask queue是否为空。所以microtask queue存在的意义就很明显了，当我们想要在处理所有的event之前做一些事情，或者想要在处理完当前event之后，并且在将要处理下一个event之前做一些事情，就可以使用microtask queue。

备注：当event loop处理microtask queue是，就会阻塞event queue，但是UI的绘制，用户点击等交互任务是放在event queue中的，所以microtask queue中的任务不能太多，处理时间不能太长，否则就会导致UI绘制，点击事件等交互任务被卡住。关于Dart中事件机制更详细的解释可以看官方文档。

异步处理方法：

Future使用示例：

future.png 从这个例子可以看到，直接new一个Future，没有具体的返回类型，其实相当于Future<Null> future = new Future(() => null);

Future里面有几个函数：
then：异步操作的逻辑。
whenComplete: 异步完成时候的回调。
catchError：异常时候的回调。

async await使用示例：

async.png

await可以多次使用，但只能在有async标记的函数中使用。

备注：在Dart 2.0 之后，有async标识的异步函数会同步执行，直到第一个wait关键字。换句话说，就是在有async标识的异步函数内，第一个await关键字之前的同步代码是立刻执行的。

对比Future与async和await可能会觉得Future多余，其实不然，Future可以配合microtask使用等等，实现一些别的玩法。

MethodChannel methodChannel.png

platformChannel.png

BasicMessageChannel: 消息在发送前被编码为二进制,接收到的二进制消息，被解码成Dart值。
消息类型为泛型，但是只能使用指定的[MessageCodec]支持的值，使用不支持的值应该被视为编程错误，并且将导致抛出异常。(消息传递)

MethodChannel：方法调用在发送之前被编码为二进制，然后是二进制结果接收到的被解码成Dart值。使用的[MethodCodec]必须与平台插件使用的兼容。Dart类型的参数和结果是“动态的”，但是只能使用指定的[MethodCodec]支持的值。名称相同的通道会互相干扰通信。（方法调用）

OptionalMethodChannel：忽略缺少平台插件的[MethodChannel],当[invokeMethod]找不到平台插件时，它返回null而不是抛出异常。

EventChannel：用于使用事件流与平台插件通信的命名通道。流设置请求在发送前被编码成二进制，
接收到的二进制事件和错误被解码成Dart值。发送和接收的Dart事件类型是“动态的”，但只有由指定的[MethodCodec]支持的值可以吗被使用。（方法调用）

methodchannel.png

messageCodecs.png

 On Android, messages are represented as follows:
  * null: null
  * [bool]\: `java.lang.Boolean`
  * [int]\: `java.lang.Integer` for values that are representable using 32-bit
    two's complement; `java.lang.Long` otherwise
  * [double]\: `java.lang.Double`
  * [String]\: `java.lang.String`
  * [Uint8List]\: `byte[]`
  * [Int32List]\: `int[]`
  * [Int64List]\: `long[]`
  * [Float64List]\: `double[]`
  * [List]\: `java.util.ArrayList`
  * [Map]\: `java.util.HashMap`