Flutter(1) — 入门

Flutter应该是目前前端很火热的一个词了，移动端的发展从Web到H5、到Native APP、到Hybrid、到React Native，然后到现在的Flutter。所有一起都是为了解决移动端需求的快速迭代、快速更新、减少三端的重复开发量。去年年初就开始大概了解了一下Flutter，前年也是看了一段RN，只是没有很深入，因为工作上也没用的上。所以这次打算边学边记录学习一门新的技术，并不建议装好环境马上动手写代码，而是应该先去了解整个系统的结构、原理、设计，甚至是选择性的阅读源码。这更有助于写好代码。 毕竟读别人的代码比自己写要难得多。

后续文章都如无特殊说明，都是基于以下版本

Flutter 1.2.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 8661d8aecd (6 weeks ago) • 2019-02-14 19:19:53 -0800
Engine • revision 3757390fa4
Tools • Dart 2.1.2 (build 2.1.2-dev.0.0 0a7dcf17eb)

一、 Flutter是什么

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

优点

• 快速开发：毫秒级的热重载，修改后，您的应用界面会立即更新。使用丰富的、完全可定制的widget在几分钟内构建原生界面。
• 富有表现力和灵活的UI：快速发布聚焦于原生体验的功能。分层的架构允许您完全自定义，从而实现难以置信的快速渲染和富有表现力、灵活的设计。
• 原生性能：Flutter包含了许多核心的widget，如滚动、导航、图标和字体等，这些都可以在iOS和Android上达到原生应用一样的性能。

以上都是官网的介绍，简单说Flutter是一个跨平台的UI框架，可以实现写一份代码同时在IOS和Android平台上执行。并且有着比H5和RN更好，基本接近原生应用的性能。Flutter并不是用来取代Android和IOS的原生开发，它必须以原生页面作为Host来执行。 它不是一个新的平台，只是一个UI框架，因为可以跨平台，所以可以减少两端UI的开发量。 但是并不能替代原生开发，因为很多功能还是需要调用原生系统的接口。

二、Flutter架构

简单的看Flutter是由两部分组成，因为是UI框架，所以主要都是UI相关的功能，其他功能还是要依赖于原生接口。

• Framework： 提供给用户的编程接口，主要包含了UI需要的widget组件、渲染、动画、手势等等。并且支持Android的Material和IOS的Cupertino风格的UI。这一层是用Dart语言实现。
• Engie： 是整个框架的引擎，也就是核心部分。 其中最重要的是Skia，了解Android的朋友对Skia应该不会太陌生，他是Android中2D引擎。 Dart主要是提供了执行Dart语言的VM虚拟机。

下面这张图是更详细的架构图，显示引擎更多的功能。 并且多了一个Embedder层，这层可以理解为是一个平台抽象层。主要负责处理一些平台的UI渲染、线程、事件循环、原生交互以及打包等功能，来适配Android和IOS。

关于Skia

Skia is an open source 2D graphics library which provides common APIs that work across a variety of hardware and 
software platforms。It serves as the graphics engine for Google Chrome and Chrome OS, Android, Mozilla Firefox and 
Firefox OS, and many other products.

Skia是一个开源的2D图形库，它提供了在各种硬件和软件平台上工作的通用api。它是Google Chrome和Chrome操作系
统、Android、Mozilla Firefox和Firefox OS以及许多其他产品的图形引擎。

下面两张图是UI图形和渲染相关的架构：

1. GPU发出VSync信号，Framework对当前UI会进行Animate–>Build–>Layout–>Paint操作生成Layer Tree。
2. Engine对Layer Tree进行进行组合，由Skia生成纹理并通过Open GL或Vulkan接口提交数据给GPU进行显示

从中可以得到发现，Flutter不是把Dart的Widget转化为对应平台的原生的View，而是直接使用Skia进行渲染。这样好处是两端相对统一，更好的兼容性，更少的适配，最重要的是更好的性能。

三、Flutter Widget

Widget是Flutter应用程序用户界面的基本构建块。每个Widget都是用户界面一部分的不可变声明。 与其他将视图、控制器、布局和其他属性分离的框架不同，Flutter具有一致的统一对象模型：widget。

Widget是Flutter面向开发者最基本的构建块。对于Flutter来说，一切都是Widget，设置连应用程序这个概念都没有，整个程序就是一个大的Widget，然后由很多Widget组合而成。这有点像面向对象语言一样，一切都是Object，大的Object是由多个的Object组成的。这个可能有点难以理解， 看一下Sample Code感受一下。

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

程序执行就是运行了MyApp，它是继承于Widget， 并没有类似普通应用程序main函数那样执行一些其他啊代码，而是直接运行了一个Widget。当然如果仅仅从UI层面去考虑，Flutter只是一个UI框架，他就是用来做UI的，一切东西都是Widget视乎就好理解一些了。

四、总结

上面简单介绍了Flutter是什么以及一些基本的架构概念，可以对Flutter有一个整体的认识。关键点：

• Flutter是一个跨移动平台的UI框架
• 使用Dart语言开发，流行的响应式编程
• 使用Skia库直接进行UI渲染，性能接近原生
• Widget是Flutter的基础，一切都是Widget

下面展示了Flutter特有的Hot Reload 功能，以及在Android和IOS平台上的统一显示。对Flutter开发和功能有一个直观感受。

相关网站：
https://github.com/flutter
https://flutter.dev/
https://flutterchina.club/