Flutter介绍

Flutter是什么?

Flutter是一款移动应用程序SDK，包含框架、widget和工具，为开发人员提供了一种在Android和iOS上构建和部署精美移动应用程序的简单高效的方式。

Flutter的安装配置

flutter 的安装配置相对比较简单主要分为以下几步:

• 将flutter sdk 下载到本地
  • git clone -b master https://github.com/flutter/flutter.git
    ./flutter/bin/flutter --version
• 配置环境变量
  • export PATH=pwd/flutter/bin:$PATH
• 运行 flutter doctor
  • 检查本机flutter环境，根据提示安装修改相关

集成到原生现有app中参考官网Wiki
Add Flutter to existing apps

具体安装配置细节参考Flutter安装配置

Flutter 应用和原生应用的区别

Flutter 应用运行在一个用 C++ 写的引擎中，Flutter 应用可以看做是一个游戏 App，代码都是在 引擎中运行。
对于 Android 应用来说，Flutter 框架在引擎中实现了一个 继承于 SurfaceView 的 FlutterView 。用户所看到的 UI 都是在这个 SurfaceView 中显示。如果要和原生平台功能交互，则可以在 Activity 中使用 FlutterView，并通过 Flutter 提供的消息 API 和原生平台收发消息。

Flutter 应用和 React Native 应用的区别

• 使用的编程语言不同，Flutter 使用的是 谷歌自己新的 Dart 语言，而 React Native 使用的 JavaScript 语言。
• React Native 是把应用编译为原生控件运行，这样在转换的时候会有性能损耗，并且有些平台特性可能无法做成跨平台使用 ,而Flutter 是有自己专属的一套 Widget，并通过自己的渲染引擎来绘制界面。
• flutter还处于仍然在技术验证开发阶段。react native已经相对成熟稳定。

Flutter支持哪些设备和操作系统版本？

移动操作系统：

• Android v16,4.1.x或更新的版本
• iOS ios8或更新版本

移动硬件：
64位iOS设备（从iPhone 5S和更新的iPhone型号开始）以及ARM Android设备。

请注意，Flutter目前不支持：

• ARM32 iOS设备（iPhone 4，iPhone 5;问题＃2089）
• x86 Android设备（问题＃9253）

flutter支持使用Android和iOS设备(包括Android模拟器和iOS模拟器)来开发测试Flutter应用。

Flutter开发语言 Dart语言

Flutter 用Dart作为开发框架和widget的语言，详情请参考为什么Flutter选择使用Dart语言

Dart语言的相关学习文档:

Dart语言概述

Dart语法糖

Dart语言资源列表

Flutter热重载

“热重载” Hot Reload 通过将更新的源代码文件注入正在运行的Dart VM（虚拟机）中工作。这不仅包括添加新类，还包括向现有类添加方法和字段，以及更改现有函数。尽管有几种类型的代码更改无法热重新：

• 全局变量初始化器。
• 静态字段初始化程序。
• main()应用程序的方法。
  请参阅使用Hot Reload获取更多详细信息

简析热重载:

• dart语言可以同时支持JIT/AOT编译的语言
  • JIT(just in time)即时编译技术 (动态编译)
    • JIT编译器将字节码编译成本机机器代码,具体参考深入浅出 JIT 编译器
    • flutter debug模式下使用的是JIT 编译，将更新的源代码文件注入正在运行的Dart VM中,从而运行的时候实时刷新最新代码
  • AOT (Ahead Of Time) 运行前编译(静态编译),具体参考AOT编译器
  • flutter 打包时使用的是AOT编译，运行之前将代码编译为本机机器语言

Flutter原理简介

Flutter使用C、C ++、Dart和Skia（2D渲染引擎）构建。具体参考架构图列表

[图片上传失败...(image-6ae527-1543882512080)]

从该架构图可知，Flutter框架可分为Framework层和Engine层；

Flutter Framework: 整个框架层都是用Dart语言实现，该层提供一套基础库， 用于处理动画、绘图和手势等。并且基于绘图封装了一套 UI组件库，并且细分为两种风格的组件

• Materail : Android风格的Widget
• Cupertino: IOS风格的Widget

Skia是什么？

Skia是一个 2D的绘图引擎库，其前身是一个向量绘图软件，Chrome和 Android均采用 Skia作为绘图引擎。Skia提供了非常友好的 API，并且在图形转换、文字渲染、位图渲染方面都提供了友好、高效的表现。Skia是跨平台的，所以可以被嵌入到 Flutter的 iOS SDK中，而不用去研究 iOS闭源的 Core Graphics / Core Animation。

Flutter Engine: 这是一个纯 C++实现的框架层，包含了 Skia引擎（高性能渲染引擎）、Dart运行环境、文字排版引擎等。它可以以 JIT、JIT Snapshot 或者 AOT(预先编译)的模式运行 Dart代码。AOT直接将Dart源码编译成了本地字节码，没有了解释执行的过程，提升执行性能。和Java显著不同的是Dart的"线程"(Isolate)是不共享内存的，各自的堆(Heap)和栈(Stack)都是隔离的，彼此之间通过消息通道来通信。所以，Dart不存在数据竞争和变量状态同步的问题，整个Flutter Framework Widget的渲染过程都运行在一个isolate中，在代码调用 dart:ui库时，提供 dart:ui库中 Native Binding 实现。 这个运行时还控制着 VSync信号的传递、GPU数据的填充等，并且还负责把客户端的事件传递到运行时中的代码。

[图片上传失败...(image-d0acd1-1543882512081)]

Flutter工程目录结构

参照创建您的第一个Flutter应用创建一个默认的Flutter App功能目录结构如下

[图片上传失败...(image-7049d4-1543882512081)]

• lib目录
  • lib目录下主要编辑Dart相关代码
• pubspec.yaml
  • pubspec文件管理Flutter应用程序的assets(资源，如图片、package等)项目依赖:
• android
  • Android工程
• ios
  • Ios工程

[图片上传失败...(image-1674f3-1543882512081)]

Flutter生命周期

State生命周期

widget是immutable的(不可变)，发生变化的时候需要重建，所以谈不上状态。StatefulWidget 中的状态保持其实是通过State类来实现的。State拥有一套自己的生命周期，下面做一个简单的介绍。

名称	状态
initState	插入渲染树时调用，只调用一次
didChangeDependencies	state依赖的对象发生变化时调用
didUpdateWidget	组件状态改变时候调用，可能会调用多次
build	构建Widget时调用
deactivate	当移除渲染树的时候调用
dispose	组件即将销毁时调用

生命周期图如下:

[图片上传失败...(image-8fd367-1543882512081)]

几个注意点:

• didChangeDependencies有两种情况会被调用。
  • 创建时候在initState 之后被调用
  • 在依赖的InheritedWidget发生变化的时候会被调用
• 正常的退出流程中会执行deactivate然后执行dispose。但是也会出现deactivate以后不执行dispose，直接加入树中的另一个节点的情况。
• 这里的状态改变包括两种可能：
  • 1.通过setState内容改变
  • 2.父节点的state状态改变，导致孩子节点的同步变化。

App生命周期

需要指出的是如果想要知道App的生命周期,那么需要通过WidgetsBindingObserver的didChangeAppLifecycleState 来获取。通过该接口可以获取是生命周期在AppLifecycleState类中。常用状态包含如下几个：

名称	状态
resumed	可见并能相应用户的输入
inactive	处在并不活动状态，无法处理用户相应
paused	不可见并不能相应用户的输入，但是在后台继续活动中

一个实际场景中的例子：

• 在不考虑suspending的情况下：从后台切入前台生命周期变化如下:
  • AppLifecycleState.inactive->AppLifecycleState.resumed;
• 从前台压后台生命周期变化如下：
  • AppLifecycleState.inactive->AppLifecycleState.paused;

参考:

• Flutter框架介绍
• Flutter教程(一) Flutter简介
• Flutter 原理简解
• Flutter框架概览
• Flutter快速上车之Widget