Flutter了解

目录

  前言：原生开发与跨平台开发 
  1. Flutter
  2. 搭建环境

Flutter：谷歌推出的开源跨平台移动应用开发框架（使用Dart语言开发）。

前言：原生开发与跨平台开发

1. 原生开发

针对指定平台（iOS、Android）使用相应平台支持的开发工具和语言进行开发，可直接调用平台提供的SDK API。

Android：
  开发工具Android Studio、
  语言Java、Kotlin
  Android SDK

iOS：
  开发工具Xcode
  语言Object-C、swift
  iOS SDK

优势：
  速度快、性能高、支持复杂动画及绘制，用户体验好。
  可访问平台全部功能（GPS、摄像头）

劣势：
  开发成本高（代码不同造成的人力成本、时间成本、维护成本、测试成本）
  当需求发生变化或遇到重大bug时，纯原生应用需要通过版本升级来更新内容，但应用上架、审核需要时间。（时间成本，动态化差）

2. 跨平台开发 （3种解决方案）

方案1：H5+原生混合开发（Cordova、Ionic、“微信小程序”） 性能低，不适合复杂界面/动画

将APP中需要动态变动的内容通过H5来实现。通过原生的网页加载控件WebView (Android)或WKWebView（iOS）来加载。
混合开发的APP被称为混合应用或Hybrid APP，如果大多数功能都是H5实现的话则称为Web APP。

原生开发可以访问平台所有功能，而混合开发中，H5代码是运行在WebView中，而WebView实质上就是一个浏览器内核，其JavaScript依然运行在一个权限受限的沙箱中，所以对于大多数系统能力都没有访问权限，如无法访问文件系统、不能使用蓝牙等。所以，对于H5不能实现的功能，都需要原生去做。
而混合框架一般都会在原生代码中预先实现一些访问系统能力的API， 然后暴露给WebView以供JavaScript调用，这样一来，WebView就成为了JavaScript与原生API之间通信的桥梁，主要负责JavaScript与原生之间传递调用消息，而消息的传递必须遵守一个标准的协议，它规定了消息的格式与含义，把依赖于WebView的用于在JavaScript与原生之间通信并实现了某种消息传输协议的工具称之为WebView JavaScript Bridge, 简称 JsBridge(混合开发框架的核心)。

以Android为例，实现一个获取手机型号的原生API供JavaScript调用。在这个示例中将展示JavaScript调用原生API的流程。
以Github上开源的dsBridge作为JsBridge来进行通信，dsBridge是一个支持同步调用的跨平台的JsBridge，此示例中只使用其同步调用功能。


1. 首先在原生中实现获取手机型号的API getPhoneModel
    class JSAPI {
     @JavascriptInterface
     public Object getPhoneModel(Object msg) {
       return Build.MODEL;
     }
    }


2. 将原生API通过WebView注册到JsBridge中
    import wendu.dsbridge.DWebView
    ...
    //DWebView继承自WebView，由dsBridge提供  
    DWebView dwebView = (DWebView) findViewById(R.id.dwebview);
    //注册原生API到JsBridge
    dwebView.addJavascriptObject(new JsAPI(), null);


3. 在JavaScript中调用原生API
    var dsBridge = require("dsbridge")
    //直接调用原生API `getPhoneModel`
    var model = dsBridge.call("getPhoneModel");
    //打印机型
    console.log(model);

方案2：JavaScript开发+原生渲染 （React Native (简称RN)、Weex、快应用）

优点：
    1. 采用Web开发技术栈：社区庞大、上手快、开发成本低。
    2. 原生渲染：性能比H5+原生方案高很多。
    3. 动态化好：支持热更新。

缺点：
    1. 渲染时需要JavaScript和原生之间通信，在有些场景如拖动可能会因为通信频繁导致卡顿。
    2. JavaScript为脚本语言，执行时需要JIT(Just In Time)，执行效率和AOT(Ahead Of Time)代码仍有差距。
    3. 由于渲染依赖原生控件，不同平台的控件需要单独维护，并且当系统更新时，社区控件可能会滞后；除此之外，其控件系统也会受到原生UI系统限制，例如，在Android中，手势冲突消歧规则是固定的，这在使用不同人写的控件嵌套时，手势冲突问题将会变得非常棘手。

React（一个响应式的Web框架）

DOM树与控件树
  文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口，一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的标准接口。简单来说，DOM就是文档树，与用户界面控件树对应，在前端开发中通常指HTML对应的渲染树，但广义的DOM也可以指Android中的XML布局文件对应的控件树，而术语DOM操作就是指直接来操作渲染树（或控件树）， 因此，可以看到其实DOM树和控件树是等价的概念，只不过前者常用于Web开发中，而后者常用于原生开发中。

响应式编程
  React中提出一个重要思想：状态改变则UI随之自动改变，而React框架本身就是响应用户状态改变的事件而执行重新构建用户界面的工作，这就是典型的响应式编程范式，React中响应式原理：
    1. 开发者只需关注状态转移（数据），当状态发生变化，React框架会自动根据新的状态重新构建UI。
    2. React框架在接收到用户状态改变通知后，会根据当前渲染树，结合最新的状态改变，通过Diff算法，计算出树中变化的部分，然后只更新变化的部分（DOM操作），从而避免整棵树重构，提高性能。
    值得注意的是，在第二步中，状态变化后React框架并不会立即去计算并渲染DOM树的变化部分，相反，React会在DOM的基础上建立一个抽象层，即虚拟DOM树，对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟DOM，最后再批量同步到真实DOM中，而不是每次改变都去操作一下DOM。为什么不能每次改变都直接去操作DOM树？这是因为在浏览器中每一次DOM操作都有可能引起浏览器的重绘或回流：
      1. 如果DOM只是外观风格发生变化，如颜色变化，会导致浏览器重绘界面。
      2. 如果DOM树的结构发生变化，如尺寸、布局、节点隐藏等导致，浏览器就需要回流（及重新排版布局）。
      而浏览器的重绘和回流都是比较昂贵的操作，如果每一次改变都直接对DOM进行操作，这会带来性能问题，而批量操作只会触发一次DOM更新。

React Native（目前支持iOS和Android两个平台）

React Native是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，主要的区别在于虚拟DOM映射的对象,React中虚拟DOM最终会映射为浏览器DOM树，而RN中虚拟DOM会通过 JavaScriptCore 映射为原生控件树。
使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用。由于RN和React原理相通，并且Flutter也是受React启发，很多思想也都是相通的。

JavaScriptCore 是一个JavaScript解释器，它在React Native中主要有两个作用：
    1. 为JavaScript提供运行环境。
    2. 是JavaScript与原生应用之间通信的桥梁，作用和JsBridge一样，事实上，在iOS中，很多JsBridge的实现都是基于 JavaScriptCore 。

RN将虚拟DOM映射为原生控件的过程中分两步：
    1. 布局消息传递； 将虚拟DOM布局信息传递给原生；
    2. 原生根据布局信息通过对应的原生控件渲染控件树；

RN是通过JavaScript通过 bridge 传递到native完成原生绘制， bridge 的成本高，因为需要频繁的跨桥调用，导致卡顿等性能问题。
Flutter利用DVM(dart虚拟机) 减少了桥的交互，在运行时期直接执行这些编译后的原生代码，就和我们进行原生开发一样，不再需要Bridge来担任中介的角色。

Weex

Weex是阿里巴巴于2016年发布的跨平台移动端开发框架，思想及原理和React Native类似，最大的不同是语法层面，Weex支持Vue语法和Rax语法，Rax 的 DSL(Domain Specific Language) 语法是基于 React JSX 语法而创造。与 React 不同，在 Rax 中 JSX 是必选的，它不支持通过其它方式创建组件，所以学习 JSX 是使用 Rax 的必要基础。而React Native只支持JSX语法。

快应用

快应用是华为、小米、OPPO、魅族等国内9大主流手机厂商共同制定的轻量级应用标准，目标直指微信小程序。它也是采用JavaScript语言开发，原生控件渲染，与React Native和Weex相比主要有两点不同：
    1. 快应用自身不支持Vue或React语法，其采用原生JavaScript开发，其开发框架和微信小程序很像，值得一提的是小程序目前已经可以使用Vue语法开发（mpvue），从原理上来讲，Vue的语法也可以移植到快应用上。
    2. React Native和Weex的渲染/排版引擎是集成到框架中的，每一个APP都需要打包一份，安装包体积较大；而快应用渲染/排版引擎是集成到ROM中的，应用中无需打包，安装包体积小，正因如此，快应用才能在保证性能的同时做到快速分发。

方案3：自绘UI+原生(QT for mobile、Flutter)

本质：通过在不同平台实现一个统一接口的渲染引擎来绘制UI，而不依赖系统原生控件，所以可以做到不同平台UI的一致性。注意，自绘引擎解决的是UI的跨平台问题，如果涉及其它系统能力调用，依然要涉及原生开发。

Flutter和QT mobile一样，都没有使用原生控件，相反都实现了一个自绘引擎，使用自身的布局、绘制系统。

QT Mobile

历程
  1991年，由Qt Company开发的跨平台C++图形用户界面应用程序开发框架。
  2008年，Qt Company科技被诺基亚公司收购，Qt也因此成为诺基亚旗下的编程语言工具。
  2012年，Qt被Digia收购。
  2014年4月，跨平台集成开发环境Qt Creator 3.1.0正式发布，实现了对于iOS的完全支持，新增WinRT、Beautifier等插件，废弃了无Python接口的GDB调试支持，集成了基于Clang的C/C++代码模块，并对Android支持做出了调整，至此实现了全面支持iOS、Android、WP，它提供给应用程序开发者构建图形用户界面所需的所有功能。

但是，QT虽然在PC端获得了巨大成功，备受社区追捧，然而其在移动端却表现不佳。原因：
  第一：QT移动开发社区太小，学习资料不足，生态不好。
  第二：官方推广不利，支持不够。  
  第三：移动端发力较晚，市场已被其它动态化框架占领（Hybrid和RN)。
  第四：在移动开发中，C++开发和Web开发栈相比有着先天的劣势，直接结果就是QT开发效率太低。


优点：
    1. 性能高；由于自绘引擎是直接调用系统API来绘制UI，所以性能和原生控件接近。
    2. 灵活、组件库易维护、UI外观保真度和一致性高；由于UI渲染不依赖原生控件，也就不需要根据不同平台的控件单独维护一套组件库，所以代码容易维护。由于组件库是同一套代码、同一个渲染引擎，所以在不同平台，组件显示外观可以做到高保真和高一致性；另外，由于不依赖原生控件，也就不会受原生布局系统的限制，这样布局系统会非常灵活。

缺点：
    1. 动态性不足；为了保证UI绘制性能，自绘UI系统一般都会采用AOT模式编译其发布包，所以应用发布后，不能像Hybrid和RN那些使用JavaScript（JIT）作为开发语言的框架那样动态下发代码。
    2. 开发效率低：QT使用C++作为其开发语言，而编程效率是直接会影响APP开发效率的，C++作为一门静态语言，在UI开发方面灵活性不及JavaScript这样的动态语言，另外，C++需要开发者手动去管理内存分配，没有JavaScript及Java中垃圾回收（GC）的机制。

Flutter

和QT mobile做一个对比：
    1. 生态：从Github上来看，目前Flutter活跃用户正在高速增长。从Stackoverflow上提问来看，Flutter社区现在已经很庞大。Flutter的文档、资源也越来越丰富，开发过程中遇到的很多问题都可以在Stackoverflow或其github issue中找到答案。
    2. 技术支持：现在Google正在大力推广Flutter，Flutter的作者中很多人都是来自Chromium团队，并且github上活跃度很高。另一个角度，从今年上半年Flutter频繁的版本发布也可以看出Google对Flutter的投入的资源不小。
    3. 开发效率：Flutter的热重载可帮助开发者快速地进行测试、构建UI、添加功能并更快地修复错误。在iOS和Android模拟器或真机上可以实现毫秒级热重载，并且不会丢失状态。秒杀原生。

跨平台技术对比：

下表部分字段说明
  1. 开发效率：整个开发周期的效率，包括编码时间、调试时间、以及排错、兼容时间。
  2. 动态化：是否支持动态下发代码和是否支持热更新。Flutter的Release包默认是使用Dart AOT模式编译的，所以不支持动态化，但Dart还有JIT或snapshot运行方式，这些模式都是支持动态化的。

跨平台技术对比 RN原理
Flutter原理

1. Flutter

诞生过程：
    2017 年 Google I/O 大会上，Google 首次推出了一款新的用于创建跨平台、高性能的移动应用框架——Flutter。
    2018年2月，Flutter发布了第一个Beta版本，同年五月， 在2018年Google I/O 大会上，Flutter 更新到了 beta 3 版本。
    2018年6月，Flutter发布了首个预览版本，这意味着 Flutter 进入了正式版（1.0）发布前的最后阶段。

Flutter框架主要分成三层: Framework、Engine、Embedder。

flutter框架结构

1. Framework
  使用dart实现，包括Material Design风格的Widget,Cupertino(针对iOS)风格的Widgets，文本/图片/按钮等基础Widgets，渲染，动画，手势等。此部分的核心代码是:flutter仓库下的flutter package，以及sky_engine仓库下的io,async,ui(dart:ui库提供了Flutter框架和引擎之间的接口)等package。Material和Cupertino是通过组合来自Widget层的基本Widget来构建的。
  Foundation和Animation、Painting、Gestures底下这两层合并为一个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两种视觉风格的组件库。大多数场景下程序员只需和这两层打交道。


2. Engine
  一个纯 C++实现的 SDK，其中包括了 Skia引擎、Dart运行时、Text文字排版引擎等。Skia是开源的二维图形库，C++ 的2D绘图引擎，调用GPU来完成渲染，提供了适用于多种软硬件平台的通用API。
  在代码调用 dart:ui库时，调用最终会走到Engine层，然后实现真正的绘制逻辑。
  

3. Embedder
  是一个嵌入层，即把Flutter嵌入到各个平台上去，这里做的主要工作包括渲染Surface设置,线程设置，以及插件等。从这里可以看出，Flutter的平台相关层很低，平台(如iOS)只是提供一个画布，剩余的所有渲染相关的逻辑都在Flutter内部，这就使得它具有了很好的跨端一致性。

Dart和JavaScript比较

1、开发效率高
  基于JIT的快速开发周期：Flutter在开发阶段采用JIT模式，避免了每次改动都要进行编译再运行，极大的节省了开发时间；
  基于AOT的发布包: Flutter在发布时可以通过AOT生成高效的ARM代码以保证应用性能。而JavaScript则不具有这个能力。

2、高性能
  Flutter旨在提供流畅、高保真的的UI体验。为了实现这一点，Flutter中需要能够在每个动画帧中运行大量的代码。这意味着需要一种既能提供高性能的语言，而不会出现会丢帧的周期性暂停，而Dart支持AOT，在这一点上可以做的比JavaScript更好。

3、快速内存分配
  Flutter框架使用函数式流，这使得它在很大程度上依赖于底层的内存分配器。因此，拥有一个能够有效地处理琐碎任务的内存分配器将显得十分重要，在缺乏此功能的语言中，Flutter将无法有效地工作。当然Chrome V8的JavaScript引擎在内存分配上也已经做的很好，事实上Dart开发团队的很多成员都是来自Chrome团队的，所以在内存分配上Dart并不能作为超越JavaScript的优势，而对于Flutter来说，它需要这样的特性，而Dart也正好满足而已。

4、类型安全
  由于Dart是类型安全的语言，支持静态类型检测，所以可以在编译前发现一些类型的错误，并排除潜在问题，这一点对于前端开发者来说可能会更具有吸引力。与之不同的，JavaScript是一个弱类型语言，也因此前端社区出现了很多给JavaScript代码添加静态类型检测的扩展语言和工具，如：微软的TypeScript以及Facebook的Flow。相比之下，Dart本身就支持静态类型，这是它的一个重要优势。

跨平台自绘引擎

Flutter提供了丰富的组件、接口来添加Native扩展，且使用Native引擎渲染视图。
Flutter既不使用WebView，也不使用操作系统的原生控件。 相反，Flutter使用自己的高性能渲染引擎来绘制widget。这样不仅可以保证在Android和iOS上UI的一致性，而且也可以避免对原生控件依赖而带来的限制及高昂的维护成本。

Flutter使用Skia作为其2D渲染引擎，Skia是Google的一个2D图形处理函数库，包含字型、坐标转换，以及点阵图都有高效能且简洁的表现，Skia是跨平台的，并提供了非常友好的API，目前Google Chrome浏览器和Android均采用Skia作为其绘图引擎。

目前Flutter默认支持iOS、Android、Fuchsia（Google新的自研操作系统）三个移动平台。但Flutter亦可支持Web开发（Flutter for web）和PC开发，本书的示例和介绍主要是基于iOS和Android平台的，其它平台读者可以自行了解。

高性能

Flutter APP采用Dart语言开发。
Flutter使用自己的渲染引擎来绘制UI，布局数据等由Dart语言直接控制，所以在布局过程中不需要像RN那样要在JavaScript和Native之间通信，这在一些滑动和拖动的场景下具有明显优势，因为在滑动和拖动过程往往都会引起布局发生变化，所以JavaScript需要和Native之间不停的同步布局信息，这和在浏览器中要JavaScript频繁操作DOM所带来的问题是相同的，都会带来比较可观的性能开销。

采用Dart语言开发

程序主要有两种运行方式：静态编译与动态解释。
静态编译的程序在执行前全部被翻译为机器码，通常将这种类型称为AOT （Ahead of time）即 “提前编译”；而解释执行的则是一句一句边翻译边运行，通常将这种类型称为JIT（Just-in-time）即“即时编译”。所有脚本语言都支持JIT模式。有些语言既可以以JIT方式运行也可以以AOT方式运行，如Java、Python。

Flutter APP采用Dart语言开发。Debug时使用JIT编译（即时编译,速度与 JavaScript基本持平），支持热重载（代码改动后自动更新界面），提高开发效率。Release时利用AOT直接编译成机器码，能够达到更好的性能(JavaScript远远追不上)。

基于JIT的快速开发周期
  Flutter使用dart语言，在开发阶段采用JIT模式，这样就避免了每次改动都要进行编译，极大的节省了开发时间；
  基于AOT的发布包lutter在发布时可以通过AOT生成高效的ARM代码以保证应用性能。
  为了快速流畅的用户体验需要能够在每个动画帧运行大量的代码，不能有周期性的停顿，否则会造成掉帧。

单线程:
  不需要锁，不存在数据竞争和变量状态同步，也没有线程上下文切换的性能损耗和锁导致的卡顿。

垃圾回收
  多生代无锁垃圾回收器，专门为UI框架中常见的大量Widgets对象创建和销毁优化。

2. 搭建环境（Mac）

第一步：下载FlutterSDK安装包并解压，放入指定位置（如：/Users/cx目录下）

安装包-官网下载
安装包-github下载

第二步：配置路径

添加路径
vim $HOME/.bash_profile

#国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像
#没有下两行，会造成pub get卡死
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
#flutter，其中/Users/cx为解压后的文件所在目录
export PATH=/Users/cx/flutter/bin:$PATH
#Android
export PATH=${PATH}:/Users/cx/Library/Android/sdk/platform-tools

立即刷新
source $HOME/.bash_profile

验证路径是否添加
echo $PATH

查看是否还需要安装其它依赖
flutter doctor
/**
1. 如果Android Studio还没有安装flutter插件，会进行提示。

2. 如果提示✗ Android licenses not accepted.  To resolve this, run: flutter doctor--android-licenses
  则命令行flutter doctor --android-licenses，所有协议填y
*/

常用flutter命令

查看帮助
flutter help

// Flutter SDK有多个分支，如beta、dev、master、stable，其中stable分支为稳定分支（日后有新的稳定版本发布后可能也会有新的稳定分支，如1.0.0），dev和master为开发分支
// Flutter官方建议跟踪stable稳定分支，但也可以跟踪master开发分支，这样可以查看最新的变化，但这样稳定性要低的多。
查看所有分支以及当前使用的分支（带"*"号的分支即本地的FlutterSDK跟踪的分支）
flutter channel
切换分支
flutter channel beta或master

升级flutter（会同时更新Flutter SDK和你的flutter项目依赖包）
flutter upgrade
如果只想更新项目依赖包（不包括Flutter SDK），可以使用如下终端命令：
    flutter packages get获取项目所有的依赖包。（也可在Android Studio工具内）
    flutter packages upgrade 获取项目所有依赖包的最新版本（也可在Android Studio工具内）


查看可连接的设备
flutter devices 

查看可连接的模拟器
flutter emulators

运行模拟器
flutter emulators --launch Pixel_API_30

创建模拟器
flutter emulators --create

静态分析代码
flutter analyze

运行项目
flutter run

优化代码缩进格式
flutter format <filename>

创建release版本（flutter build默认为--release）
flutter build ios

第三步：下载Xcode、Android Studio

开发工具：Android Studio 或 IntelliJ 或VS Code

Android Studio官网下载

给Android Studio添加插件

需要安装两个插件:
  Flutter插件： 支持Flutter开发工作流 (运行、调试、热重载等)
  Dart插件： 提供代码分析 (输入代码时进行验证、代码补全等)

1. 启动Android Studio
2. 打开插件首选项 (Android Studio>Preferences>Plugins)(Windows：File>Settings>Plugins)
3. 搜索Flutter插件并安装
4. 重启Android Studio

第四步：创建Flutter项目

首先cd到开发目录下

创建Flutter项目（直接用Android Studio创建Flutter项目经常会卡死）
flutter create hello

打开Android Studio，选择Open an existing打开刚才的项目

目录说明：

  android： android平台相关代码
  ios： iOS平台相关代码
  lib：flutter相关代码（主要工作）
  test：测试代码
  pubspec.yaml：项目配置文件

hello项目
main.dart

第五步1：模拟器运行

运行iPhone模拟设备
iPhone模拟器运行
热更新
Tools|AVD Manger 添加android模拟设备
x86、硬件加速
模拟设备列表，选择其中一个并运行

选择测试设备并运行项目，修改dart.main文件并保存，界面会即时更新。

第五步2：真机运行

Android

1.
在Android设备上启用 开发人员选项 和 USB调试 。
2.
使用USB将手机插入电脑。如果设备出现调试授权提示，请授权你的电脑可以访问该设备。

flutter devices

iPhone

1. 
安装homebrew
2.
brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
如果失败，执行brew doctor查看原因
3.
双击ios/Runner.xcworkspace打开项目，并配置描述文件

常用小功能

1. 格式化代码

右键 | Reformat Code with dartfmt

1. 需要安装Dart插件
2. 始终添加尾随逗号：在函数、方法和构造函数的参数列表末尾， 有助于自动格式化程序为Flutter样式代码插入适当的换行符。

格式化代码

2. 调试

1. Data Analysls静态分析（追踪问题的最快的方式）
  Dart分析器大量使用了代码中的类型注释来帮助追踪问题。所以要尽量避免var、无类型的参数、无类型的列表文字等。

2. Flutter Inspector可视化浏览Widget树（运行后查看）
  解决：布局问题

3. Dart Observatory (语句级的单步调试和分析器)
  运行后，打开Observatory URL的Web页面

Data Analysls静态分析 Flutter Inspector的Select widget。在AndroidStudio上选中组件，会选中手机上的对应组件，反之亦然
Flutter Inspector的render tree。调试布局 AndroidStudio上使用终端