title: Flutter 介绍date: 2021-07-14 17:22:57.246

updated: 2021-07-16 10:38:25.492
url: /?p=295
categories: Flutter
tags:

跨平台开发

传统的原生开发，一个团队需要维护Android，iOS两套系统，也就造成了一下问题：

  1. 人力成本高。需要Android和iOS开发人员。
  2. 测试成本高。

面对以上问题，在公司的角度上讲，如果一套代码能够运行在Android和iOS上，就能很好的成本问题。

因此就多了好些技术，比如Hybrid技术、React Native、Flutter等。

移动开发发展

1. 第一阶段：原生开发

在早期的移动开发中，面对这个崭新的方向，人们都处于摸索节点，那时候大家都在进行原生的开发。但是谁都不想放过移动互联网这块蛋糕。Web开发人员的数量远远多于移动互联网开发人员，同时由于原生开发的成本与动态化渐渐无法满足要求。同时原生开发维护成本大、开发周期长，动态化能力弱，所以人们都在寻找跨平台的方案，希望能够只需要一个团队维护一份代码，就能够完成Android与IOS的开发需求。

2. 第二阶段：泛容器方案

早在2008年，就有一款叫做 “PhoneGap” 的框架获了奖并开始支持Android平台。现在我们说的PhoneGap一般指的是 **”Cordova”**。它是PhoneGap贡献给 Apache 后的开源项目，是从PhoneGap中抽离出的核心代码，是驱动PhoneGap的核心引擎。两者维护的是共同的一份源代码组件，只有名字和包名不一样。PhoneGap是一个采用HTML，CSS和JavaScript来完成跨平台开发的技术，当时PhoneGap宣称接近原生性能。然而它的工作原理是基于WebView，然后利用JavaInterface来完成与原生代码的交互。我们称这种工具为 WebView JavaScript Bridge(JsBridge) 。这种方式，能够很好的解决跨平台与动态更新的需求但是，我们都知道 android WebView 的渲染效率很差，同时JavaScript是解释型语言，它不需要编译，在运行时候解释执行，这就导致JavaScript的执行性能太低了。同时因为android自身的问题，使用WebView过程中消耗的内存，没有办法在不需要使用的时候进行及时的回收，这样会导致我们的可用内存越来越少，最终OOM。

3. 第三阶段：自绘引擎开发方案

为了突破使用WebView进行渲染的性能问题，2015年4月，Facebook开源了JS框架 React 在原生移动应用平台的衍生产物——React Native。RN将渲染交给原生，而不是直接在HTML中完成。

我们编写的依旧是JavaScript代码。这时候，我们使用JS写好UI后，会组成一个Virtual DOM。然后通过Bridge将VD发给原生层去进行UI的创建。这种方式看起来与原生开发非常相似，我们在进行原生开发的时候，写好XML布局再由Java对这个布局XML进行解析，然后通过反射创建对应的View，这个XML就是一个界面的配置文件。而使用RN，我们的配置则由XML变成了JS编写。不同的是我们在原生开发中，xml是静态的配置，而RN中要更新UI，又需要经历一次Bridge传递的过程。同时如果需要在RN中调用原生API也需要通过bridge来进行传递。这样导致需要频繁的跨桥调用，bridge 的成本太高了。

虽然RN底层是使用原生进行绘制，但是毕竟中间多了一层Bridge，也就是多了一层中介，你租房是希望能直接与房东进行交流还是和中介公司？很显然，去中介公司进行租房，你将花费一些代价。所以RN多了一层中介——Bridge，它绝无可能与原生的性能相媲美，但是为了跨平台，这点代价不是致命的。你会因为中介需要多付中介费，就完全靠自己去找房东个人租房子吗？

Flutter

之前我们了解到，现有的跨平台技术的工作机制。根据之前的了解，我们是不是设想如果拥有一个框架，我们编写的代码直接会根据打包的平台编译为此平台本身的原生代码，在运行时期直接执行这些编译后的原生代码，就和我们进行原生开发一样，不再需要Bridge来担任中介的角色，是不是能够拥有最优秀的性能？

Flutter是什么？

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

从官方的介绍中，能看出三个关键点：

  • 跨平台移动UI框架
  • 与现有的代码一起工作
  • 完全免费、开源

Flutter的工作机制和我们预想的一样，他正是通过将它的代码根据不同的平台编译为对应平台的机器码，这样就不需要Bridge的存在了。Flutter自己嵌入了一个 Dart VM，我们编写的代码会被编译成ARM的机器码，在Android中就是通过Dart VM所在的libflutter.so完成我们自己编写的代码生成的机器码的载入执行。

Flutter架构

Flutter框架整体拥有两层架构，由上往下，第一层是Framework类库层，提供给我们在开发时所使用的各种Widget、动画等。而第二层则是Engine引擎层，我们上面所说的Dart VM也就处于这一层。

Flutter特点

  • 快速开发
  • 富有表现力，漂亮的用户界面
  • 本地性能

Flutter优势

  1. 热重载

页面每次改动,不需要手动去刷新,可自动刷新。即支持开发过程中热重载。
2. 统一的UI

Flutter 提供丰富的内置 UI 组件—— Material Design（针对 Android ）和 Cupertino（适用于 iOS ），不需要担心在众多设备上看起来会有什么不同。

开发语言

Dart