Flutter学习笔记

本篇文章是学习fluter的部分内容总结

跨平台根据其原理，主要分为三类：

1.H5+原生（Cordova，Ionic，微信小程序）
h5代码是运行在webview中，而webview实质上就是一个浏览器内核，其JavaScript依然运行在一个权限受限的沙箱中，所以对于大多数系统能力都没有访问权限，如无法访问文件系统，不能使用蓝牙等。
2.JavaScript开发+原生渲染（React Native,Weex,快应用）
主要优点如下：
1.采用web开发技术栈，社区庞大，上手快，开发成本相对较低。
2.原生渲染，性能相对h5提高很多
3.动态化较好，支持热更新
不足：
1.渲染时需要Javascript和原声之间通讯，在有些场景如拖动可能会因为通讯频繁导致卡顿。
2.JavaScript为脚本语言，执行时需要JIT（动态编译），执行效率和AOT（静态编译）代码仍有差距
3.由于渲染依赖原声控件，不同平台的空间需要单独维护，并且当系统更新时，社区控件可能会滞后，除此之外，其控件系统也会受到原声UI系统限制。例如，在Android中，手势冲突消歧规则是固定的，这在使用不同人写的控件嵌套时，手势冲突问题会变得非常棘手。
3.自绘UI+原生（QT for mobile，Flutter）
通过在不同平台实现一个统一接口的渲染引擎来绘制UI，而不依赖系统原声控件，所以可以做到不同平台UI的一致性。
优点：
1.性能高
2.灵活，组件库易维护，UI外观保真度和一致性高
不足：
动态性不足，为了保证UI绘制性能，自绘UI系统一般都会采用AOT模式编译其发布包，所以应用发布后，不能像Hybird和RN那些使用JS作为开发语言的框架那样动态下发代码。

程序主要有两种运行方式：

静态编译和动态解释。静态编译的程序在执行前全部被翻译为机器码，通常将这种类型成为AOT，即“提前编译”；而解释执行的则是一句一句边翻译边运行，通常将这种类型成为JIT，即“即时编译”。

Flutter款架结构：

屏幕快照 2019-01-22 下午8.58.16.png

Dart语言

变量声明
1.var
类似于JavaScript中的var,他可以接收任何类型的变量，但最大的不同时Dart中var变量一旦赋值，类型便会确定，则不能再改变其类型。
2.dynamic和object
Dynamic和Object与var功能相似，都会在赋值时自动进行类型推断，不同在于，赋值后可以改变其类型。
object时dart所有对象的根基类，也就是说所有类型都是Object的子类，所以任何类型的数据都可以赋值给Object声明的对象，所以表现效果和dynamic相似
3.final和const
如果您从未打算更改一个变量，name使用final或const，不是var，也不是一个类型。一个final变量只能被设置一次，两者区别在于：const变量是一个编译时常量，final变量在第一次使用时被初始化。被final或者const修饰的变量，变量类型可以省略。

函数
dart是一种真正的面向对象的语言，所以即使是函数也是对象，并且有一个类型Function。这意味着函数可以赋值给变量或者作为参数传递给其他函数，这是函数式编程的典型特征。

异步支持
dart类库有非常多的返回future或者stream对象的函数。这些函数被称为异步函数：他们只会在设置好一些耗时操作之后返回，比如像IO操作。而不是等到这个操作完成。
async和await关键词支持了异步编程，运行您写出和同步代码很像的异步代码。
future与JavaScript的promise非常相似，表示一个异步操作的最终完成（或失败）及其结果值的表示。简单来说，他就是用来处理异步操作的，异步处理成功就执行成功的操作，异步处理失败就捕获错误或者停止后续操作。一个future只会对应一个结果，要么成功，要么失败。
stream也是用于接收异步事件数据，和future不同的是，他可以接收多个异步操作的结果（成功或失败）。也就是说，在执行异步任务时，可以通过多次触发成功或失败事件来传递结果数据或错误异常。stream常用于多次读取数据的异步任务场景，如网络内容下载，文件读写等。

Dart线程模型及异常捕获

在Dart中，所有的外部事件任务都在事件队列中，如IO、计时器、点击、以及绘制事件等，而微任务通常来源于Dart内部，并且微任务非常少，之所以如此，是因为微任务队列优先级高，如果微任务太多，执行时间总和就越久，事件队列任务的延迟也就越久，对于GUI应用来说最直观的表现就是比较卡，所以必须得保证微任务队列不会太长。

屏幕快照 2019-01-24 上午9.41.49.png

在事件循环中，当某个任务发生异常并没有被捕获时，程序并不会退出，而直接导致的结果是当前任务的后续代码就不会被执行了，也就是说一个任务中的异常是不会影响其它任务执行的。

最终异常捕获：

void collectLog(String line){
    ... //收集日志
}
void reportErrorAndLog(FlutterErrorDetails details){
    ... //上报错误和日志逻辑
}

FlutterErrorDetails makeDetails(Object obj, StackTrace stack){
    ...// 构建错误信息
}

void main() {
  FlutterError.onError = (FlutterErrorDetails details) {
    reportErrorAndLog(details);
  };
  runZoned(
    () => runApp(MyApp()),
    zoneSpecification: ZoneSpecification(
      print: (Zone self, ZoneDelegate parent, Zone zone, String line) {
        collectLog(line); //手机日志
      },
    ),
    onError: (Object obj, StackTrace stack) {
      var details = makeDetails(obj, stack);
      reportErrorAndLog(details);
    },
  );
}

实战

计算器示例