Flutter详细介绍 - 千语创想

Flutter概述

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

一句话总结就是：Flutter是一个跨平台、高性能的移动UI框架。

跨平台

Flutter使用自己的高性能渲染引擎来绘制 Widget([ˈwɪdʒɪt])，这样可以保证在 Android 和iOS 上 UI 的一致性，目前 Flutter 已经支持 iOS、Android、Web、Windows、macOS、Linux、Fuchsia（Google新的自研操作系统）等众多平台。

高性能

Flutter的高性能主要靠两点来保证：

采用 Dart 语言开发
使用自己的渲染引擎来绘制 UI

Dart语言在JIT模式下，执行速度与 JavaScript 基本持平。但是它支持AOT，以 AOT模式运行时，JavaScript 便远远追不上了，执行效率也就大大提升。并且Flutter使用自己的渲染引擎绘制UI，布局数据都由Dart语言直接控制，性能开销比较可观

Flutter框架结构

Flutter 从上到下可以分为三层：框架层、引擎层和嵌入层

框架层

底下两层被合并为一个dart UI层，对应的是Flutter中的dart:ui包，它是 Flutter Engine 暴露的底层UI库，提供动画、手势及绘制能力。
Rendering 渲染层，依赖于 Dart UI 层，渲染层会构建一棵由可渲染对象的组成的渲染树，当动态更新这些对象时，渲染树会找出变化的部分，然后更新渲染。渲染层可以说是Flutter 框架层中最核心的部分，它除了确定每个渲染对象的位置、大小之外还要进行坐标变换、绘制（调用底层 dart:ui ）。
Widgets 层是 Flutter 提供的的一套基础组件库，在基础组件库之上，Flutter 还提供了 Material 和 Cupertino 两种视觉风格的组件库，它们分别实现了 Material 和 iOS 设计规范。

引擎层

引擎层是Flutter的核心，由C++实现，其中包括了 Skia 引擎、Dart 运行时、文字排版引擎等。在代码调用 dart:ui库时，调用最终会走到引擎层，然后实现真正的绘制和显示

嵌入层

嵌入层主要是将 Flutter 引擎 ”安装“ 到特定平台上，Flutter 代码可以通过嵌入层，以模块方式集成到现有的应用中，也可以作为应用的主体。

使用Flutter的好处

传统的Web应用中会有成千上万数量个DOM节点，所以更新的时候会非常琐碎、频繁，使页面加载缓慢，所以现代的Web应用开始使用虚拟DOM技术来提高页面更新的速度，用一个虚拟DOM，而不是直接调用类似.getElementById的方法，只操作JavaScript对象，然后再把更改的部分更新到真实DOM，这样是相当方便的。但是添加了虚拟DOM意味着更多的代码，而且在一个DOM节点相对较少的页面中用虚拟DOM，实际上有可能会更慢。

不仅是现代的Web应用，其实目前主流的Android于iOS应用也是大量使用类似虚拟DOM的技术，即虚拟控件，而且得益于移动设备的性能优势，使虚拟DOM这种形式的响应式框架的优点发挥到极致，使得开发者忽略了该模式的缺点。

在Flutter的响应式框架中，控件树中的控件直接通过可移植的图形加速渲染引擎、高性能的本地ARM代码进行绘制，不再需要通过虚拟DOM或虚拟控件、真实DOM或平台控件这些中间对象来绘制。Flutter响应式框架通过“无中间商赚差价”的方式直接利用硬件的所有性能。

对比：AVM框架

AVM（Application-View-Model）框架是千语创想推出的一个跨端高性能 JavaScript框架，更趋近于原生的编程体验，它提供简洁的模型来分离应用的用户界面、业务逻辑和数据模型，适合高度定制化的项目，一次编码，可以同时开发安卓、iOS和小程序等多端应用。

AVM是千语创想基于标准H5子集设计的DSL中间语言编程框架，其可具备如下能力：

Virtual DOM：通过虚拟DOM，渲染到不同终端，充分尊重系统特性，为不同终端执行差异处理，实现高效渲染；

组件化：高可重用性、可组合性、可维护性的架构设计，隐藏了复杂的DOM结构和行为，让开发者专注于应用的功能和外观；

数据绑定：轻松将数据源绑定到应用用户界面，降低逻辑复杂性和开发难度；

状态管理和路由：有效分离用户界面和数据处理，实现项目的工程化管理；

类Vue语法和兼容React JSX，兼具Vue的轻巧和React的灵活性。

千语创想 DSL最终可编译为标准JS，通过DeepEngine渲染到app端和Web端，或者编译为微信小程序代码，用于微信小程序平台发布。

立即免费在线制作一个APP，新手注册即送开发大礼包