Flutter初探

时间  2020-02-06 标签 flutter 初探

flutter

文章内容是我在学习Flutter过程当中对知识点的梳理和总结。若有不对的地方，欢迎指出。java

2018年前 H5的性能瓶颈和RN的停更 致使业界对跨平台开发失去信心。直到2018年10月Google推出首个Flutter跨平台解决方案，打破整个移动开发的方向。linux

去年MWC大展上发布首个Beta版后，Flutter 1.0正式版于2018年12月召开的Flutter Live 2018上正式发布。今年2月27在巴塞罗那召开的MWC发布会上，Google正式发布了Flutter跨平台UI框架的1.2版本。新版本最大的改变就是引入了对Android App Bundles的支持，可有效打包Android APP并建立即时应用的最新技术。此外该框架还帮助开发者接受应用内支付奠基了基础，并添加了不少基于Web的工具。android

Flutter 的发展速度远超咱们的想象。做为Google的亲儿子，将来必定会大力发展Flutter的，因此如今学习Flutter是比较好的优点。再看一下招聘状况，以Boss直聘为例，目前已经陆陆续续有公司在招聘Flutter开发工程师了，而且公司相对比较高。
Boss直聘Flutter招聘
git

文章目录

Flutter是什么？

Flutter是谷歌的移动UI框架，能够快速在iOS和Android上构建高质量的原生用户界面。 Flutter能够与现有的代码一块儿工做。在全世界，Flutter正在被愈来愈多的开发者和组织使用，而且Flutter是彻底免费、开源的。github

Flutter能够和如今的工程相结合，拥有比较好的开发体验，它有一个热重载(hot reload)技术，让咱们改变UI以后，及时的看到UI效果，而且保证咱们上一次测试的状态。web

Flutter拥有很丰富的UI组件，如：material cupertino，能够构建一个灵活的且富有表现力的UI。我在工做过程当中常常和设计师沟通，他们常用苹果的设计风格进行设计，这致使咱们的产品基本全都使用IOS的设计风格，以前一直要自定义VIew去实现，十分复杂。如今咱们有了Flutter，用Flutter内置的UI组件库，咱们很容易的就能够作到这一点。macos

Flutter它还有比较好的性能，几乎能够和原生应用相媲美，甚至在Android低端机上比原生的表现还要优异。难道Flutter这么好的技术只能在移动平台上去使用吗？很显然Google的野心可不止如此，目前我已知的Flutter支持的平台已经有Android IOS Web Windows Linux 和Mac OS ，除此以外，Flutter还支持嵌入式。canvas

这是三个平台的SDK，有兴趣的老铁能够先Star，后续慢慢作研究。segmentfault

Flutter: https://github.com/flutter/flutter
Desktop: https://github.com/google/flutter-desktop-embedding
WebSite: https://github.com/flutter/websitewindows

目前的跨平台解决方案

  • Web/Hybrid

也被称为 Hybrid 技术，它基于 Web 相关技术来实现界面及功能（表明框架：phonegap、cordova）。

  • JSCore

经过虚拟Dom树来构建UI，映射成原生UI组件，经过JSCore桥接调用原生服务（表明框架：ReactNative、Weex）。

  • Native

将某个语言编译为二进制文件，生成动态库或打包成 apk/ipa/xap 文件（表明框架：Flutter）。

为何选择Flutter

网上有不少Flutter与其余跨平台解决方案的多维度对比的资料（建议了解一下RN与Flutter的对比），感兴趣的能够查阅一下，这里就不一一列举了。

我的的观点是：Flutter是一场革命！

  • 跨平台性

Flutter基于图像绘制引擎进行渲染，在不一样平台下绘制效果是绝对一致的，能作到真正的跨平台，一处写到处运行。

  • 性能优异性

不一样于H5经过DOM渲染 和RN映射组件，Flutter直接基于native进行绘制。性能上彻底超过原生。

  • 热重载性

Android原生开发会遇到“编译-打包-安装“三部曲。开发效率迟迟得不到提高。热重载技术在Flutter内完美体现。

Flutter详情介绍

  • Dart语法编译

Dart 是一种弱类型、跨平台的客户端开发语言。具备专门为客户端优化、高生产力、快速高效、可移植易学的风格。Dart主要由Google负责开发和维护。

  • Flutter插件

Flutter使用的Dart语言没法直接调用Android系统提供的Java接口，这时就须要使用插件来实现中转。Flutter官方提供了丰富的原生接口封装。

Flutter系统架构

Flutter分为三大部分：

1.由Dart语言负责的Framwork层

2.Dart语法执行器

3.Skia图像处理引擎
Flutter系统架构
其实Flutter的核心是Skia，Dart更像是在外面包装了一层，而后去调用Skia的接口，最终都是被Skia去执行；Text是一些组件，只不过经过Dart去执行，但最终也是被Skia去执行，既然Skia这么重要，那咱们简单了解一下吧！

Skia引擎详解

Skia
2005年Skia图像处理引擎成立，用来展现Chrome 火狐 和其余Google自家的产品使用。
2007年 第一个Android系统问世，因而Google开发者将Skia移植到Android平台。
Skia做为一个2D的图形系统，包括绘图，渲染，显示图片都是用Skia完成。

那Skia是如何渲染图片和控件的呢？

1.渲染图片

咱们以BItmap为例：在加载一张图片的时候，咱们可经过Bitmap去加载，通常两种方式，第一种经过Bitmap.createBitmap()方式建立，第二种是经过 BitmapFactory方式，但其实两种方式是同样的，第二种会调用第一种的代码，因此咱们直接经过Bitmap.createBitmap()去看源码是如何实现的。
随便找一个BitMap.createBitmap()入口,进去会发现有不少createBitmap()方法重载，一路疯狂点击进入，最终咱们找到一个不同的方法nativeCreate()，如图：
Bitmap.createBitmap源码截图
好，胜利就在眼前，咱们继续点进去。咦！咱们惊奇的发现是居然调用的是native方法。
经过native这个方法来看，咱们的一张图片生成的内存放在哪一个区域是否是就很明显了呢？既然是调用了native方法返回的Bitmap，那确定就是native堆去开辟内存对不对。那咱们的Bitmap.java算什么呢？它其实就至关于一个中介者，至关于一座桥，它链接着java层又链接着native层。
nativeCreate
这时候咱们想点nativeCreate()去看如何实现的，但点不进去了，那咱们还要不要继续往下找呢？
既然咱们要看skia，那确定是要的，怎么办呢，这时咱们就要去看Android系统源码了。

Android系统源码下载
咱们打开源码，依次打开frameworks -> base -> core -> jni -> android，以下图：
Android源码
graphics和opengl这两个就表明着Android图像处理引擎库，Skia主导，会调用opengl里面的内容进行一个原理性的绘制。
咱们继续好Bitmap的native实现类，
Bitmap的native实现类
打开文件，搜咱们要找的nativeCreate方法
nativeCreate方法
找到了， 那他所对应的的实现函数是什么呢，显然是Bitmap_creator，好，接下来咱们找Bitmap_creator这个函数。

Bitmap_creator
找到了，那咱们刚才nativeCreate方法返回的Bitmap其实是由Bitmap_creator这个方法返回的。这里面的代码咱们不须要去了解，但咱们发现不少结构体是以SK开头的。那SK是什么呢，咱们再来看这个Bitmap.cpp的头文件：
Bitmap.cpp
除了Android系统自带的头文件以外，有不少引用一SK开头的头文件。那SK和Skia又有什么联系呢，是否是取了Skia的的首字母呀？对的，是这样的。再继续看，咱们发现真正一张图片加载实际是SkBitmap来进行实现。
SkBitmap
既然Skia在Android的系统源码里面，那确定找获得相关的踪影，找到了，是否是应该扣一波666。
skia源码
Android原生图片绘制流程以下：
图片源码追踪
2.渲染控件
全部的View是否是都要重写onDraw()方法啊？是的，那咱们以ImageView为例去看一下它的onDraw()方法是如何实现的。
发现onDraw()方法都是经过canvas来进行绘制。
在这里插入图片描述
继续
在这里插入图片描述
在这里插入图片描述
又是调用了这么多native方法，既然和图片绘制相似，那咱们就不在这看canvas.cpp了，有兴趣的能够去看一下，也是在graphics包下。
在这里插入图片描述
总结：
咱们全部的图片、控件以及XML布局都是通过native来绘制，native最终又调用了Skia图像处理引擎，这也就是咱们Android的界面为何可以显示，为何咱们能够在XML去写一个布局，其实这都和Skia密不可分。同理，Flutter能够运行在IOS上，是由于Dart经过Flutter引擎调，Flutter引擎又调用了之下IOS的JEPG图像处理引擎，这样也是Flutter为何能够实现跨平台基本原理。

题外话：Skia和JEPG有什么关系呢？其实就像Retrofit和OkHttp关系，Skia是在JEPG的基础上进行了二次封装。更进一步能够说Android和IOS实际上是用的一样的图片处理引擎库。

Flutter性能优异

咱们经过两张图（第一张Android原生渲染流程，第二张Flutter渲染流程）来看，能够发现Flutter较原生而言，中间环节更少，这也就意味着更加高效，可能咱们写小demo时看不出什么区别来，可是随着咱们项目需求的不断增长，那Flutter的优越性就愈来愈明显了。
在这里插入图片描述
在这里插入图片描述

其余

至于为何选择Flutter，Flutter的发展趋势、Flutter与其余跨平台解决方案的对比，RN与Flutter的渲染对比以及Flutter的环境搭建，网上的相关资料不少且整理的十分详尽，这里不一一介绍，你们能够去查阅。

Flutter学习资料

  • Flutter文档和SDK

文档参考
https://flutter.dev
https://flutterchina.club/
SDK下载
https://github.com/flutter/flutter
https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.2.1-stable.zip
https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_v1.2.1-stable.zip
https://storage.googleapis.com/flutter_infra/releases/stable/linux/flutter_linux_v1.2.1-stable.tar.xz

下一篇文章我将对Dart基础进行汇总整理，敬请期待。

联系我们 沪ICP备13005482号-10