这篇文章你能学习到:
绘图基本原理(OpenGL)
Flutter 框架设计
Flutter 布局机制
Flutter 部件生命周期 & 状态控制
Flutter 渲染
Flutter 引擎
Flutter 工程结构简介
Flutter vs webView vs ReactNative
绘图基本原理
我们先回顾一下计算机在屏幕上的绘图原理过程:
OpenGL
CPU 将计算好的显示内容提交给 GPU
GPU 使用 VRAM 中的数据和命令, 完成图像渲染
将渲染好的结果存入帧缓冲区 (FrameBuffer)
然后视频控制器将帧缓冲区的数据传递给显示器显示
帧缓冲区: 简称帧缓存或显存, 它是屏幕所显示画面的一个直接映象, 又称为位映射图 (Bit Map) 或光栅. 帧缓存的每一存储单元对应屏幕上的一个像素, 整个帧缓存对应一帧图像.
当然, Android,iOS 的 UI 渲染过程是如此, Flutter 也是如此, 在整个 Flutter 架构中, Flutter 只关心向 GPU 提供显示数据, 并不关心显示器, 视频控制器以及 GPU 是如何工作的.
Graphics Pipeline
GPU 将信号同步到 UI 线程
UI 线程用 Dart 来构建图层树
图层树在 GPU 线程进行合成
合成后的视图数据提供给 Skia 引擎
Skia 引擎通过
OpenGL 或者 Vulkan
将显示内容提供给 GPU
Flutter 框架设计
Flutter 整体框架是由 Dart 语言来实现的, 它的层次非常清晰, 每层 (模块) 的职责也相对单一, 整个结构让 Flutter 框架在使用上来说更加容易和学习. 框架的底层是 Flutter 引擎, 它负责绘图, 动画, 网络, Dart 运行时等功能, 是由 C++ 实现的, 我们会在接下来的章节中介绍.
Architecture
Framework
Meterial, Cupertino: 针对 Android 的 Meterial 风格, 和针对 iOS 的 Cupertino 风格;
Widgets: 按钮, 文本, 输入框, 图片等组件;
Rendering: 渲染层, 负责布局, 绘制, 合成等;
Animation, Painting, Gestures: 动画, 绘图, 手势;
Foundation: 最底层, 提供上层需要使用的工具类和方法;
Engine
Skia: 图形绘制
Dart: 语言运行时
Text: 纹理
Flutter 布局机制
Flutter 提供众多的布局组件, 这一点和其它 Web 前端框架的差别非常大, 种类如下:
单个子元素的布局
- Container
- Padding
- Center
- Align
... 多达 18 种
多个子元素的布局
- Row
- Column
- Stack
... 多达 11 种
Flutter 如此繁多的布局组件, 对于开发者来说学习难度非常大, 并且在不同的页面采用适合的组件非常难选, 并且在复杂的布局结构中组件的嵌套非常的深和复杂, 这几点绝对让一个 Web 前端开发人员鄙视. 或许未来 Flutter 会有更加对开发人员友好的布局设计.
Flutter 部件生命周期 & 状态控制
Flutter 框架的 UI 是基于 Widget 的, 一切皆 Widget, 与 vue,React 等前端框架一样, 部件有自己的生命周期:
State Lifecycle
Flutter 渲染
Flutter 界面渲染分三个阶段: 布局, 绘制和合成. 布局和绘制是在 Flutter 框架层完成的, 合成则是由 Flutter 引擎来完成的.
Rendering Pipeline
动画的运行会改变部件状态(update state)
状态的改变会触发图层树的重建
根据新旧图层树的差异更新渲染树
新的渲染树合成新的图层列表
重新输出图层树
Flutter 引擎
Flutter 引擎是由 C++ 实现的, 主要包含: Skia,Dart 和 Text 三大部分:
Skia: 是由 Google 提供的二维图形框架, 包含字型, 坐标转换, 以及点阵图都有高效能且简洁的表现. 它运用在在 Chrome,Android,Firefox 等产品上.
Dart: 是 Dart 语言的运行时.
Text: 文字布局??
Flutter 工程结构简介
通过 Flutter 插件可以自动创建 Flutter 项目, 目录结构如下:
Android:Android 原生项目
build
iOS:iOS 原生项目
lib:Flutter 项目源代码
test: 单元测试
- .metadata
- .packages
pubspec.lock: 项目所有依赖, 一颗依赖树
pubspec.YAML: 项目主依赖配置
- Flutter vs WebView vs ReactNative
- WebView
最早的跨平台解决方案, 是借助 App 内部的 WebView 组件来实现的, 也就是 App 内部的浏览器. 但是由于它的性能, 兼容性, 稳定性都表现不够出色, 并且在联调上有太多的障碍, 导致这个技术已经不再流行.
Flutter vs Webview
说白了, 其实它仅仅只是 Web 的开发, UI 和业务逻辑都是 Web 的部分, 如果要调取 Native 的硬件设备, 需要 Native 拦截特殊的 Http 请求从而获取硬件设备信息. 当然它有自己的好处, 更新快, 有问题随时发布.
ReactNative
ReactNative 在 WebView 的方案上更进一步, 借助 App 内置 Javascrpit 引擎, 将 JavaScript 和 Native 进行桥接, 直接通过 JavaScript 来调取 Native 的相关组件, 在性能上比 WebView 要更胜一筹.
Flutter vs Reactnative
这种形势的跨平台并非真正意义的跨平台, 如果要做 UI 或者新的组件时, 还是需要在 iOS 和 Android 两端上都有对应接口的实现才行. 由于有 JavaScript 桥接这一层, 在性能上还是稍差于纯 Native 开发. 但是即便于此, 它低廉的学习成本, 与 Web 前端开发方式一样有着直观易懂, 以及极高的开发效率, 得到了开发人员 (尤其是 Web 前端) 的青睐.
Flutter
Flutter 可以说是跨平台解决方案的再一次进化, 它直接借助 OpenGL 通过 GPU 来绘制 UI, 并且通过 C++ 直接和系统层交互.
Flutter
Flutter 可以说在性能更加的高, 在跨平台解决方案上更加彻底, 但是它的学习曲线相对陡峭, 并且刚刚起步, 生态还为形成, 不过潜力还是非常大.
[坚持的一俢]
来源: http://www.jianshu.com/p/c430c5590b9d