90分钟入门Flutter技术直播分析(架构分析+布局拆分技巧+插件原理)

本文链接：https://blog.csdn.net/kangshaojun888/article/details/87966832

2019年2月26号晚8点第一次做直播，给各位想学习Flutter技术的小伙伴分享了一场Flutter入门的技术。
直播中用到的资料我已经上传到github上了，请点击这里：
https://github.com/kangshaojun/flutter-study-90live

Flutter100交流群: 894109159

开场白

在这里插入图片描述

Flutter简介

在这里插入图片描述

酷炫屌炸天的界面

在这里插入图片描述

超高性能

在这里插入图片描述

渲染引擎Skia

在这里插入图片描述
Skia是Google研发的包括图形、文本、图像、动画等多方面的图形引擎，不仅用于Google Chrome浏览器，Android系统也采用Skia作为绘图处理引擎。

Androis iOS Mac Win Linux 一致的UI

在这里插入图片描述

Android效果图

在这里插入图片描述

iOS 效果图

在这里插入图片描述

Mac效果图

在这里插入图片描述

Win效果图

在这里插入图片描述

移动端跨平台开发技术演进

移动端从Hybird Cordova —> ReactNative —> Flutter 几个方面详细的分析了跨平台开发所使用的技术，如下图：
在这里插入图片描述
上图中ReactNative使用了OEM的组件，所以在不同平台上UI表现很难一致,但Flutter使用自己的一套原生控件，就很容易得到一致的体验。假设你全部使用Material风格的组件，不管是在iOS还是在Android，甚至在Win Mac Linux上展示都是一样的。

Flutter商用情况

在这里插入图片描述

Flutter动画官方示例

在这里插入图片描述

Flutter系统架构

下面的图片是Flutter框架结构图，对大部分开发者而言，最常用的是Widgets层，也就是UI组件。其中有两套风格的一个是Material，一个是Cupertino。然后是渲染层Rendering，然后是动画，绘制，及手势层。底层是Engine层使用C++语言编写，保证其性能，其中Skia是它的图形处理技术，Dart指Dart语言解析，Text指纹理渲染。
在这里插入图片描述

GPU渲染

下图展示了Flutter的绘图原理，Flutter框架直接使用Skia引擎来渲染，因此能够控制渲染帧数，从而实现高帧速率
在这里插入图片描述

状态控制

下图展示了Flutter的状态变化情况，从图中可以看出，当状态发生变化时会调用build方法使得界面重写渲染，所以这里大家需要改变一下思路，想控制界面的变化，可以在组件上编写一个变量，当需要改变这个界面时，调用setState方法改为这个变量即可。
在这里插入图片描述

一切皆为Widget

Flutter一切皆为组件，包括布局控件，手势，动画等内容。从下图可以看到Widget主要分为两大类，StatefulWidget有状态的及StatelessWidget无状态的组件。
在这里插入图片描述

布局思路

如何布局

下图是Flutter官方的一个示例，首先把界面拆分成按垂直方向拆分成四大块，垂直使用Column布局，然后分别实现每一部分内容即可。
第一步：
使用图片Image组件
第二步
使用水平布局Row添加标题及图标文字
第三步
使用水平布局Row添加图标及文字
第四步
使用文本区域组件添加简介
在这里插入图片描述

细节拆分

下面两部分均采用了水平及垂直嵌套布局。首先从横向上看采用水平布局，均分成三块。第一张图左侧标题部分采用了垂直布局添加两行标题。第二图可以把图标加文字抽象出一个方法来，采用垂直布局，传入图标及文字内容即可。
在这里插入图片描述

Flutter插件通讯原理

下图是平台通道的结构概述，使用MethodChannel在上层和底层之间传递消息。MethodChannel就类似一个方法通道的功能，所以MethodChannel的name上下层一定要保持一致，上层调用底层的方法，底层处理好后返回给上层数据。注意这个过程是异步的，所以一定要采用async/await关键字。

在这里插入图片描述