Flutter 原理之跨平台

通过最近对 Flutter 开发的大致了解，感受最深的简单概括就是：Widget 就是一切外加组合和响应式，我们开发的界面，通过组合其他的 Widget 来实现，当界面发生变化时，不会像我们原来 iOS 或者 Andriod 开发一样去直接修改 UI 元素，而是去去更新状态，根据新的状态来完成 UI 的构建，这一点是不是跟 Vue、React 很像。

关于 Widget 的具体使用，我也不打算去写，如果需要对某个知识点需要深入探索下的话，可能会记录下，其实对 Widget 学习大家可以参考 Flutter Api 文档地址如下： https://api.flutter.dev/> ，... 。

要理解 Flutter 跨平台实现的原因，先了解下屏幕显示图像的基本原理。

屏幕显示器都是有一个个的物理显示单元构成，每个物理单元称之为一个像素点，每一个像素点可以承载多种颜色的显示，屏幕显示器能够显示图像就是因为不同的像素点上呈现的不同的颜色，最终呈现出来一个完整的图像。

通常说的同一面积屏幕显示器，屏幕分辨率越高，显示器可以呈现的元素就会越多，我们看到的画面就会越清晰。

我们知道手机屏幕刷新频率是 60Hz ，当一帧画面显示完成后，准备下一帧时，显示器会发出一个垂直同步信号，这样在 1s 内显示就完成了 60 次这样的操作，而每次操作中，都是完成 CPU 将计算好的内容，同步到 GPU ，GPU 对要显示的内容进过渲染操作，放入到了缓冲区中，等待显示器去显示，整个操作都是有操作系统的硬件系统来完成的。

iOS 、Andriod移动设备的 GUI 显示都是这样一个原理，其实不同操作系统 UI 控件，只是操作系统去操作硬件系统 API 的一层封装，如果我们直接操作底层 API 去完成 GUI 开发是一件非常痛苦的事。

Flutter 只是用一种编程语言，也就是采用一套Dart API ，底层通过 OpenGL（操作系统 API 的一个封装库）这种跨平台的绘制库，来实现一套代码跨端使用，也就是说 Flutter 所谓跨平台只是 Dart 调用 OpenGL ，然后 OpenGL 再去调用操作系统底层的 API 。跟 ReactNative 、weex 不同的是，他们需要依赖 JavaScriptCore 引擎去跟原生应用的通信。

当然我们不去谈论方案的优劣，本身他们选择的方向就不同。