Flutter学习笔记（一）

先附上学习和参考的网站
Flutter中文网
Flutter实战

初识Flutter

简介

Flutter是Google推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过Dart语言开发App，一套代码同时运行在ios和Android平台。Flutter提供了丰富的组件、接口，开发者可以很快地为Flutter添加native扩展。同时Flutter还使用Native引擎渲染视图，为用户提供良好的体验。

特点

1. 跨平台自绘引擎
2. 高性能
3. 采用Dart语言开发

采用Dart语言开发的原因

首先了解几个概念：JIT和AOT
1. AOT：静态编译的程序在执行前全部被翻译成机器码，通常将这种类型成为AOT（Ahead of Time），即“提前编译”。
2. JIT：动态解释是一句一句边翻译边运行，通常将这种类型称为JIT（Just in Time）即“即时编译”。
注意 AOT和JIT指的是程序运行方式，和编程语言并非强关联的。

采用Dart的原因：

1. 开发效率高
   Dart运行时和编译器支持Flutter的两个关键特性的组合：
   • 基于JIT的快速开发周期：Flutter在开发阶段采用JIT模式，这样就避免了每次改动都要进行编译，极大的节省了开发时间。
   • 基于AOT的发布包：Flutter在发布时可以通过AOT生成搞笑的ARM代码以保证应用性能。
2. 高性能
   Flutter旨在提供流畅、高保真的UI体验。
3. 快速内存分配
   Flutter框架使用函数式流，这使得它在很大程度上依赖于底层的内存分配器。
4. 类型安全
   由于Dart是类型安全的语言，支持静态类型检测，所以可以在编译前发现一些类型的错误，并排除潜在问题，这一点对于前端开发者来说可能会更具有吸引力。

Flutter框架结构

Flutter框架结构.jpg

1. Framework
   这是一个纯Dark实现的sdk，他实现了一套基础库：
   • 底下两层（Foundation(基础)和 Animation(动画)、Painting(绘制)、Gestures(手势)）在Google的一些视频中被合并为一个dart UI层，对应的是Flutter中的dart:ui包，它是Flutter引擎暴露的底层UI库，提供动画、手势及绘制能力。
   • Rendering层，这一层是一个抽象的布局层，它依赖于dart UI层，Rendering层会构建一个UI树，当UI树有变化时，会计算出有变化的部分，然后更新UI树，最终将UI树绘制到屏幕上，这个过程类似于React中的虚拟DOM。Rendering层可以说是Flutter UI框架最核心的部分，它除了确定每个UI元素的位置、大小之外还要进行坐标变换、绘制（调用底层dart:ui）。
   • Widgets层是Flutter提供的一套基础组件库，在基础组件库之上，Flutter还提供了Material和Cupertino两种视觉风格的组件库。我们Flutter开发的大多数场景，只是和这两层打交道。
2. Engine
   这是一个纯C++实现的SDK，其中包括了Skia引擎、Dart运行时、文字排版引擎等。在代码调用dart:ui库时，调用最终会走到Engine层，然后实现真正的绘制逻辑。