当前位置：首页 > news >正文

认识 Flutter

news 2025/9/6 7:14:11

一、Flutter是什么？

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
Flutter 是 Google 的 UI 工具包，用于从单个代码库构建漂亮的、本地编译的移动、web 和桌面应用程序。

Flutter 的几个特点：美观、快速、高效、开放。

美观：使用 Flutter 内置美丽的 Material Design 和 Cupertino widget、丰富的 motion API、平滑而自然的滑动效果和平台感知，为用户带来全新体验。
快速：（1）Flutter 的 UI 渲染性能很好。在生产环境下，Flutter 将代码编译成机器码执行，并充分利用 GPU 的图形加速能力，因此使用 Flutter 开发的移动应用即使在低配手机上也能实现每秒60帧的UI渲染速度；（2）Flutter引擎使用C++编写，包括高效的Skia2D渲染引擎，Dart运行时和文本渲染库。
高效：HotReload（热重载）；开发一套代码多端可以使用。
开放：Flutter是开放的，它是一个完全开源的项目。

二、跨平台历史

任何一种技术的出现是为了解决之前技术的痛点。

跨平台解决方案一：webview

基于 JavaScript 和 WebView 的跨平台

最早出现的跨平台框架是基于 JavaScript 和 WebView ，代表框架有 PhoneGap，ApacheCordova，Ionic 等等。
主要是通过 HTML 来构建自己的界面，再将其显示在各个平台的 WebView 中。
但是它默认是不能调用本地的一些服务的（比如相机、蓝牙等），所以需要通过 JavaScript 进行桥接调用 Native 的一些代码来完成某些功能。
但是，它本身的体验、性能都并不理想，而且开发过程中的坑非常多。

跨平台解决方案二：React Native

备受欢迎的 ReactNative
在寻求最佳跨平台解决方案的过程中，无疑 ReactNative 是之前最优秀的一个。

ReactNative（简称RN）是 Facebook 于2015年4月开源的跨平台移动应用开发框架，是Facebook 早先开源的 JS 框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台；
RN使用 JavaScript 语言，类似于 HTML 的 JSX，以及 CSS 来开发移动应用，因此熟悉 Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。
并且在保留基本宣染能力的基础上，用原生自带的UI组件实现核心的渲染引擎，从而保证了良好的渲染性能。
但是，由于 RN 的本质是通过 JavaScriptVM 调用原生接口，通信相对比较低效，而且框架本身不负责宣染，而是是间接通过原生进行渲染的。

跨平台解决方案三：Flutter

从下面的图中可以对比出 flutter - native - rn 的区别。

Flutter 利用 Skia 绘图引擎，直接通过 CPU、GPU 进行绘制，不需要依赖任何原生的控件
Android 操作系统中，我们编写的原生控件实际上也是依赖于 Skia 进行绘制，所以 flutter 在某些 Android 操作系统上甚至还要高于原生（因为原生 Android 中的 Skia 必须随着操作系统进行更新，而 FlutterSDK 中总是保持最新的）
而类似于 RN 的框架，必须通过某些桥接的方式先转成原生进行调用，之后再进行渲染。

在 iOS 上，Flutter 同样不依赖原生控件进行渲染，而是使用自带的引擎（主要基于 Metal）直接绘制。 这带来了与 Android 上相同的好处：渲染一致性、不受系统版本制约、以及避免了桥接带来的性能损失。虽然苹果的原生渲染极其优秀，但 Flutter 通过这种方案实现了高度的跨平台一致性并具备了媲美原生的性能潜力。

在 iOS 上，Flutter 的渲染机制和性能优势逻辑与 Android 类似，甚至更显著。
绘图引擎：
在 iOS 上，Flutter 不再使用 Skia（默认情况下）。为了更好地与苹果生态系统集成并追求极致的性能，Flutter 使用了苹果自家的 Metal 作为底层图形 API（对于支持 Metal 的设备，基本上是 iPhone 5s 及以后的所有机型）。
Flutter 的引擎会将 UI 指令直接编译为 Metal 的命令，由 GPU 执行。对于旧设备，Flutter 会回退到 OpenGL ES。
所以，准确的说法是：Flutter 在 iOS 上使用 Metal/OpenGL 进行绘制，同样不依赖原生控件。
与 iOS 原生的对比：
原生 iOS 应用：使用 UIKit 框架（如 UIButton, UILabel, UITableView）。这些原生控件的绘制最终是由 Core Animation 和 Core Graphics 来完成的，它们底层也是调用 Metal/OpenGL，但这是一个非常优化和紧密集成的过程。
Flutter 应用：如前所述，用自己的渲染流水线，直接调用 Metal。
性能对比：
理论上：由于 Flutter 是直接调用 Metal，它避免了 UIKit 的抽象层，理论上可以做到和原生一样快，甚至在某些极端复杂的自定义 UI 绘制场景下更快，因为它避免了原生控件组合可能带来的一些开销。
实际上：苹果对 UIKit 和 Core Animation 的优化已经到了登峰造极的地步，经过十多年的打磨，其性能在日常使用中极其流畅和稳定。Flutter 要达到与之媲美甚至超越，需要付出巨大的工程努力。
更重要的优势：和 Android 的情况一样，Flutter 的渲染引擎是打包在 App 里的。这意味着：
一致性：你的 App 在 iOS 12 和 iOS 16 上的外观、表现和性能是完全一致的。你不需要担心旧系统上的渲染 bug 或性能差异。
不受系统限制：你可以立即使用 Flutter 引擎带来的最新图形特性，而无需等待用户升级到最新的 iOS 系统。