Flutter开发之--初识Flutter

概述

Flutter 是由Google公司研发的一种跨端开发技术，在2018年正式推出。Flutter自带Skia图形绘制引擎，采用自绘制的方式，不管是在Android还是IOS上，Flutter都统一使用Skia引擎进行绘制，因此两端的渲染过程完全一致，能够实现像素级别的双端一致性。

在执行效率方面，众所周知，不管是哪个跨端框架，执行效率通常都是低于原生的。但是Flutter的执行效率接近原生。原因有两个，一是Flutter采用的是Dart语言，支持多种编译方式，既能以JIT的方式编译，也能用AOT的方式编译，JIT主要用于开发的阶段，这种方式虽然运行效率低，但是可以热重载(Hot Reload)。当需要打包发布的时候，也就是Release模式，可以使用AOT的方式将Dart的代码编译成平台原生代码，运行时无需再通过解释器解释，执行效率接近原生。 二是渲染引擎的优势，Flutter采用集成的Skia引擎自己渲染UI，没有跨层带来的性能损耗。而跨层的意思就是绘制的任务需要经过native层，应用层等多个层级，比如在React Native中进行UI渲染的时候，Android端需要通过JS Bridg将绘制的任务从JavaScript引擎中从C/C++ 层转移到Java层，，这涉及到JNI的调用，所以会产生一定的性能开销。而Flutter的绘制没有跨层，所以不存在这些额外的性能损失。

在跨端方面，Flutter不仅能够跨移动端，而且可以运行在Web端和桌面端，跨端能力极强。代码复用方面，由于Flutter采用自渲染的方案，所以多端从运行时环境到底层渲染都完全一致，因此可以实现最大化的多端复用。

Flutter整体架构

如上图所示，Flutter 的整体架构分为3层，从上到下分别是，框架层(FrameWork), 引擎层(Engine)以及嵌入层(Embedder)，接下来从下到上依次介绍各层

嵌入层

嵌入层是和设备操作系统离得最近的一层，在这一层会提供一系列的接口，因此在载有任何操作系统的设备上，只要实现了嵌入层提供的接口，就能让Flutter在该平台上运行，从而实现跨端的能力。原生系统在和Flutter嵌入层做对接的时候，需要向Flutter提供一个Surface用于UI的展示，并且还需要处理用户的输入手势，将用户的输入手势转换成Flutter支持的手势格式。除此之外，原生系统还需要向Flutter提供所需要的线程和消息队列以及一些原生能力的封装与导出。嵌入层的实现语言和平台有关，比如Androi
上使用C++和Java完成适配，IOS平台上使用Objective-C/Objective-C++完成适配

引擎层

引擎层由C/C++实现，在该层中包含了Dart运行时和Skia底层绘制库，分别用于执行Dart代码，底层布局，文本绘制等工作。引擎层还负责帧调度及UI的底层绘制工作，它提供了Flutter核心API的底层实现，包括图形绘制，文本布局，文件和网络I/O、可访问性支持，插件架构，以及Dart运行时和编译工具链。

框架层

框架层使用Dart语言实现了Flutter的应用层框架，在这一层中定义了一些Flutter框架中常用的最基础的类和Flutter的UI基础以及大量的UI组件。
在框架层中，自底向上又可以细分为Foundation层，动画绘制与手势层，渲染层，以及组件层。在Foundation层中定义了Flutter应用框架中最基础的类，比如AbstractNode抽象节点，ChangNotifier通知监听器，组件标识Key等。然后在动画、绘制、手势层中则是提供了Flutter的UI基础。然后在渲染层提供了布局能力，并且定义了RenderObject树的概念，通过这套机制可以确定UI组件在界面中的位置、大小、以及如何绘制。在组件层中饰项链响应式编程的开发模式以及组件化的开发模式。最后就是Flutter提供的这些组件整体可以分为两个组件库，分别是Material，对应Android 的设计风格，Cupertino，对应IOS的设计风格。

跑通demo尝鲜

编写Flutter项目建议使用MAC电脑，因为需要同时支持Android和IOS端的开发，所以Mac电脑是最佳选择，配置环境也会简单很多。

Flutter项目的目录介绍

Flutter demo项目的运行

在项目的lib/main.dart中输入如下代码：

class MyApp extends StatelessWidget{
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return const Center(
      child: Text("你好，自定义组件===Flutter",
          style: TextStyle(color: Colors.red,fontSize: 30)),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

在命令行执行flutter doctor,得到如下图的结果：

如果结果中没有红叉，就表示环境OK
运行结果：

Android平台:

IOS平台：

总结

本文主要介绍了flutter的技术特点以及整体架构并且介绍了flutter架构中各层的工作，并且在Android和IOS平台上跑通了一个基本的Demo。大致看了这个Demo的代码后，发现和Android的Compose的开发很相似，所以可以将两者对比起来学习。