Carson带你学Android：手把手带你入门跨平台UI开发框架Flutter

妖狐艹你老母 2021-11-22 08:28 415阅读 0赞

![a26aedafc2ac45510787091b1d02f019.png][]

# 前言 #

*  Flutter 作为Google出品的一个**新兴的跨平台移动客户端UI开发框架**，正在被越来越多的开发者和组织使用，包括阿里的咸鱼、腾讯的微信等。  
    ![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtMTY2Mjg0MWJmZDFlZmU2Ny5wbmc]
 *  今天，我将献上一份 **《全面 & 详细的Flutter学习指南》**，希望你们会喜欢。

![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtMzk4MTYxODMxODE0ZDdjMy5wbmc]

--------------------

# 目录 #

![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtNmRiNDZiZTE3ZmQ1NDBlNS5wbmc]

--------------------

# 1. 简介 #

*  定义：一款Google出品&开源的移动客户端UI开发框架（SDK）
 *  作用：用**一套代码**同时在Android、iOS上**快速构建高质量、高性能**的原生用户界面
 *  开发语言：Dart语言（高开发效率、高性能等）

--------------------

# 2. 特点 #

*  Flutter的主要特点包括：使用自身的高性能渲染引擎进行渲染 & Dart编程语言语言
 *  具体介绍如下：

### 2.1 高性能渲染引擎 ###

*  Flutter进行UI绘制时，使用的是自带的**高性能渲染引擎**进行绘制渲染（不使用WebView & 原生控件）
 *  好处：保证在Android和iOS上UI的一致性 & 避免对原生控件依赖而带来的限制和维护成本。
 *  组成：C、C ++、Dart、Skia（2D渲染引擎），具体描述如下：

![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtNTg4YmIwOTE0MzlhMTE5ZC5wbmc]

特别注意：

*  Flutter依靠Flutter Engine虚拟机在iOS和Android上运行
 *  Flutter Engine使用C/C++编写 = 低延迟输入 + 高帧速率
 *  开发人员可通过Flutter框架和API在内部进行交互

下面，简单介绍一下Flutter的2D渲染引擎：Skia  
![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtMzFlNDJhNGRlZGE1NDY2YS5wbmc]

### 2.2 Dart语言 ###

*  介绍Dart语言前先介绍两个概念：JIT和AOT。程序主要有两种运行方式：静态编译 & 动态编译，具体如下：  
    ![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtMmQxMjI2ZTQ0MDY1NjQyMS5wbmc]

特别注意：

*  JIT 和 AOT指的是程序运行方式，和编程语言并非强关联的。
 *  有些语言可以以JIT方式 & AOT方式一起运行，如Java，它可在第一次执行时编译成中间字节码、然后在之后执行时可以直接执行字节码
 *  通常区分是否为AOT的标准就是看代码在执行之前是否需要编译，只要需要编译，无论其编译产物是字节码还是机器码，都属于AOT

#### Dart语言的特点 ####

*  Dart语言具备开发效率高、高性能 & 类型安全的特点
 *  具体如下：  
    ![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtMWMzMTU2NjhkMDZjNGNjMi5wbmc]

--------------------

# 3. 原理解析 #

### 3.1 框架结构 ###

*  Flutter框架主要分为两层：FrameWork层、Engine层，如下图所示：  
    ![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtNWQyYjJkNzUyMGNkMWJlZi5wbmc]
 *  说明：开发时，主要基于Framework层；运行时，则是运行在 Engine上。每层的具体介绍如下：  
    ![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtODA0NzU5NTI4OTMxMWQ0Yi5wbmc]

### 3.2 原理概述 ###

*  开发时，主要基于Framework层；运行时，则是运行在 Engine上
 *  Engine是Flutter的独立虚拟机，由它适配 & 提供跨平台支持；因为其存在，Flutter不使用移动端系统的原生控件， 而是使用自己 Engine 来绘制 Widget （Flutter的显示单元）； Dart 代码是通过 AOT 编译为平台的原生代码，所以 Flutter可直接与平台通信，不需要JS引擎的桥接。
 *  同时 Flutter 唯一要求系统提供的是 canvas，以实现UI的绘制。  
    ![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtZTE4ZTZkMDI3YmEzM2YzZi5wbmc]
 *  编译时，具体如下：  
    ![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtNTg4YmIwOTE0MzlhMTE5ZC5wbmc]

### 3.3 关于widget ###

Flutter理念：“一切皆为Widget”，Widget是Flutter应用程序用户界面的基本构建块，具备以下特点：

*  属于具有一致性的统一对象模型，与其他将视图、控制器、布局和其他属性分离的框架不同。更新widget时更加高效
 *  不可变的，仅支持一帧，且每一帧上不会直接更新，要更新而必须使用Widget的状态。无状态和有状态Widget 的核心特性相同，每一帧都会重新构建；
 *  有一个State对象，用于跨帧存储状态数据 & 恢复

--------------------

# 4. 特点 #

*  Flutter具备跨平台、开发效率高 & 高性能的特点
 *  具体说明如下：

### 4.1 跨平台 & 开发效率高 ###

Flutter通过使用上述所述的自身渲染引擎、原理框架 & Widget运行，使用一套代码即可同时构建iOS和Android应用，从而实现跨平台的特性，最终提高开发的效率

### 4.2 高性能 ###

*  原因1：通过其自带的高性能渲染引擎进行渲染
 *  原因2：Dart语言本身的语言特性
 *  原因3：编译过程特点，具体如下：  
    ![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtNzFlMzcyZWVjZWJlMWFiNS5wbmc]

--------------------

# 5. 对比 #

*  跨平台开发的本质是为了：增加代码复用、减少不同平台差异适配的工作量 & 提高开发效率。
 *  目前主流的跨平台开发框架有：React-Native、Weex和本文提及的Flutter。下面，我先简单介绍React-Native和Weex，再进行三者的对比。

![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtM2VhYWZlMTdlOGE5YTdkYi5wbmc]

### 5.1 React-Native ###

*  简介  
    由Facebook出品，采用了JavaScript语言、JSCore引擎和通过原生渲染的跨平台框架
 *  实现原理  
    通过编写JavaScript语言代码，通过 React Native 的中间层来调用 Native端的组件，最终实现相应的功能。JS端中所写控件的作用类似 Map中的key 值，对应着Native端的对应控件（如 Android 中 标签对应 ViewGroup 控件）。JS端会通过多个key 组合成Dom，最后交由Native端进行解析，最终渲染出Native端的控件。  
    ![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtMDhmODEzNjE0NzRmOTA4ZC5wbmc]
 *  实现框架  
    React Native的架构主要由三层实现。其中最重要的是由C++ 实现的中间适配层，此处最主要封装了JavaScriptCore用于执行JS的解析，最终实现了JS端与原生端的双向通信交互。而React Native运行在JavaScriptCore中。（在iOS上直接使用内置的javascriptcore、在Android则使用webkit.org官方开源的jsc.so）

![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtODFkZDdmNTQ5ZTUyNWRlZS5wbmc]

### 5.2 Weex ###

*  简介  
    由Alibaba出品，采用了JavaScript语言、JS V8引擎和通过原生渲染的跨平台框架
 *  实现原理  
    与React-Native类似，JS端会通过多个key组合成Dom，最后交由Native端进行解析，最终渲染出Native端的控件，但区别在于：Weex是可以跨三端的 = Android、iOS、Web，其原因在于在开发过程中，代码模式、编译过程、模板组件、数据绑定、生命周期等上层语法是一致，不同的是Web端和Native端对Virtual DOM 执行的解析方法有所区别。  
    ![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtODU1M2UzMDk0ZWY3NTJiNi5wbmc]
 *  实现框架  
    weex的架构主要分为三部分，具体如下：  
    ![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtYjk3MTUzNTAzMmY4YzAwYS5wbmc]

### 5.3 三者对比 ###

![示意图][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtYzMzNTMxNmIyMTliZmY3Yi5wbmc]

注：对于性能的对比，从理论上来说Flutter应该是最接近原生性能 & 最好的，但就目前实际应用&体验中并没具备很明显的差异化，后续需进行进一步的验证。

--------------------

# 6. 学习方式 & 资料 #

*  官网：[https://flutter.dev/][https_flutter.dev]  
    快速入门 & 学习最好的方式是：阅读Flutter官网的资源，同时官网也是了解最新Flutter发展动态的地方
 *  Flutter中文网社区：https://flutterchina.club  
    目前Flutter最大的中文资源社区，提供了：Flutter官网文档翻译、开源项目 & 案例等学习资源
 *  StackOverflow：[https://stackoverflow.com/][https_stackoverflow.com]  
    活跃度最高的Flutter问答社区，Flutter开发团队的成员也经常会在上面回答问题
 *  源码：[https://flutter.dev/docs/development/tools/sdk/releases][https_flutter.dev_docs_development_tools_sdk_releases]  
    Flutter SDK的源码具备以下特点：开源、示例 & 详细注释，Gallery是Flutter官方示例APP，其源码在Flutter源码“examples”目录下

--------------------

# 7. 总结 #

本文全面介绍了Flutter入门学习知识，接下来推出的文章，我将继续讲解Flutter的相关知识，包括使用语法、实战等，感兴趣的读者可以继续关注Carson带你学Android系列文章  
[Carson带你学Android：学习方法][Carson_Android]  
[Carson带你学Android：四大组件][Carson_Android 1]  
[Carson带你学Android：自定义View][Carson_Android_View]  
[Carson带你学Android：异步-多线程][Carson_Android_-]  
[Carson带你学Android：性能优化][Carson_Android 2]  
[Carson带你学Android：动画][Carson_Android 3]

--------------------

# 欢迎关注Carson\_Ho的[CSDN博客][CSDN] 与 公众号！ #

博客链接：https://carsonho.blog.csdn.net/  
![06b2ed0fbb8979f0aba34c14ede04b59.png][]

--------------------

# 请帮顶 / 评论点赞！因为你的鼓励是我写作的最大动力！ #

我想邀请你和我一起学Android

我想邀请您和我一起写Android（福利回赠）

我想给你们介绍一个与众不同的Android微信公众号（福利回赠）

[a26aedafc2ac45510787091b1d02f019.png]: /images/20211122/4fab8c5efc9b4a5fba2a9c4e905e0285.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtMTY2Mjg0MWJmZDFlZmU2Ny5wbmc]: /images/20211122/fa3ceb942b274a1ba7178fdf5e4a9487.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtMzk4MTYxODMxODE0ZDdjMy5wbmc]: /images/20211122/58f04ea32c1d492b896bb2c93876b9d6.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtNmRiNDZiZTE3ZmQ1NDBlNS5wbmc]: /images/20211122/4678a652ba08469a87027afce7995cb5.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtNTg4YmIwOTE0MzlhMTE5ZC5wbmc]: /images/20211122/5d298e8f11b647f8b847708953ad866e.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtMzFlNDJhNGRlZGE1NDY2YS5wbmc]: /images/20211122/d9073f4f3de04834a66c984d6a6b573a.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtMmQxMjI2ZTQ0MDY1NjQyMS5wbmc]: /images/20211122/0b5e737ce49d4231b130407be469e5b9.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtMWMzMTU2NjhkMDZjNGNjMi5wbmc]: /images/20211122/cebbe642627347e8a8e94aa2c70e86c3.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtNWQyYjJkNzUyMGNkMWJlZi5wbmc]: /images/20211122/4c9bc9cf78e74853b24fa7c4fc8b3a34.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtODA0NzU5NTI4OTMxMWQ0Yi5wbmc]: /images/20211122/1c166eeb523344529d33a7021a7999f4.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtZTE4ZTZkMDI3YmEzM2YzZi5wbmc]: /images/20211122/a46b503c41ba4208856f44e6b4e8e788.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtNzFlMzcyZWVjZWJlMWFiNS5wbmc]: /images/20211122/377f6a9d927b4a52a03c6978072edd4a.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtM2VhYWZlMTdlOGE5YTdkYi5wbmc]: /images/20211122/0e50cee05b1d40088a621cc2523203c6.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtMDhmODEzNjE0NzRmOTA4ZC5wbmc]: /images/20211122/c153ef996c1f413f85fdcf6c1c8ace60.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtODFkZDdmNTQ5ZTUyNWRlZS5wbmc]: /images/20211122/900293f72c33420484ccf7578207f418.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtODU1M2UzMDk0ZWY3NTJiNi5wbmc]: /images/20211122/7e450f741ccd413088fc0003fc634ff1.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtYjk3MTUzNTAzMmY4YzAwYS5wbmc]: /images/20211122/4b5fe99bad4c4b2dba8d880d977e7286.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NDQzNjUtYzMzNTMxNmIyMTliZmY3Yi5wbmc]: /images/20211122/d5328c415c50440bb201d8d656bef25f.png
[https_flutter.dev]: https://flutter.dev/
[https_stackoverflow.com]: https://stackoverflow.com/
[https_flutter.dev_docs_development_tools_sdk_releases]: https://flutter.dev/docs/development/tools/sdk/releases
[Carson_Android]: https://blog.csdn.net/carson_ho/category_9273178.html?spm=1001.2014.3001.5482
[Carson_Android 1]: https://blog.csdn.net/carson_ho/category_5959547.html?spm=1001.2014.3001.5482
[Carson_Android_View]: https://blog.csdn.net/carson_ho/category_6735474.html?spm=1001.2014.3001.5482
[Carson_Android_-]: https://blog.csdn.net/carson_ho/category_6440777.html?spm=1001.2014.3001.5482
[Carson_Android 2]: https://blog.csdn.net/carson_ho/category_7474499.html?spm=1001.2014.3001.5482
[Carson_Android 3]: https://blog.csdn.net/carson_ho/category_9268277.html?spm=1001.2014.3001.5482
[CSDN]: https://carsonho.blog.csdn.net/
[06b2ed0fbb8979f0aba34c14ede04b59.png]: /images/20211122/703cfe8c6604460abb701837e3e1e5cb.png