Flutter篇：跨平台技术详解

跨平台技术比对

H5+原生混合开发

混合开发的主要原理是将APP中需要动态变动的部分通过H5实现，利用原生网页加载控件WebView进行渲染。这种H5与原生的结合模式称为混合开发，采用此模式的应用被称为混合应用或Hybrid APP。若应用大多数功能由H5实现，则可称为Web APP。当前典型的混合开发框架包括Cordova、Ionic和微信小程序。

混合开发的核心技术点是JSBridge（WebView JavaScript Bridge）。WebView作为JavaScript与原生API之间的通信桥梁，负责传递调用消息。消息传递需遵循标准协议，规定格式与含义。JSBridge正是依赖于WebView、实现消息传输协议的工具，是混合开发框架的关键。

React Native和Weex：JavaScript开发+原生渲染

React Native是基于React框架在移动平台的衍生产物。React是一个响应式Web框架，其重要概念包括DOM树与响应式编程。DOM树与控件树等价，DOM操作即直接操作渲染树。响应式编程的核心思想是状态改变则UI自动更新，React框架在状态变化时自动重新构建UI，通过Diff算法计算变化部分并仅更新这些部分，从而提升性能。

React Native与React的主要区别在于虚拟DOM映射对象：React中虚拟DOM映射为浏览器DOM树，而React Native中通过JavaScriptCore映射为原生控件树。JavaScriptCore作为JavaScript解释器，为JavaScript提供运行环境，并充当JavaScript与原生应用间的通信桥梁。React Native将虚拟DOM映射为原生控件的过程分为两步：布局消息传递，以及原生根据布局信息渲染控件树。这使得React Native实现了跨平台，相比混合应用，其原生控件渲染带来更高性能，同时保持Web开发技术栈和代码统一维护的优势。

Weex是阿里巴巴于2016年发布的跨平台移动开发框架，原理与React Native类似，主要区别在语法层面。Weex支持Vue语法和Rax语法，其中Rax的DSL基于React JSX语法创造，且JSX为必选。而React Native仅支持JSX语法。

快应用是由国内主流手机厂商共同制定的轻量级应用标准，目标对标微信小程序。它也采用JavaScript开发和原生控件渲染，但与React Native和Weex的不同点在于：快应用自身不支持Vue或React语法，使用原生JavaScript开发，框架类似微信小程序；同时，其渲染引擎集成到ROM中，应用无需打包引擎，从而安装包体积更小，实现快速分发。

QT Mobile与Flutter：自绘UI+原生

这类跨平台技术通过统一接口的渲染引擎绘制UI，不依赖系统原生控件，确保跨平台UI一致性。自绘引擎解决UI跨平台问题，其他系统能力调用仍需原生开发。优点包括：性能高，因直接调用系统API绘制；灵活、组件库易维护、UI保真度和一致性好，因不依赖原生控件，无需维护多平台组件库，且布局系统不受限。不足在于动态性较差，因通常采用AOT编译发布包，无法像基于JavaScript的框架那样动态下发代码。

Flutter属于此类技术，实现了自绘引擎和自有UI布局系统。自绘引擎并非新概念，早前的代表是QT。

QT简介：QT是跨平台C++图形用户界面应用程序开发框架，历史悠久。尽管在PC端成功，但在移动端表现不佳，原因包括社区小、资料不足、生态差；官方推广支持不够；移动端发力晚，市场被其他框架占领；C++开发效率低于Web开发栈。因此，QT在移动端未能广泛采用。

Flutter详解

Flutter是Google推出的跨平台、高性能移动应用开发框架。与QT Mobile类似，Flutter实现自绘引擎，使用自身布局和绘制系统。但Flutter在生态、技术支持和开发效率方面表现突出。

自2017年Google I/O大会首次推出后，Flutter迅速发展。2018年发布多个版本，社区活跃度飙升，GitHub星标数快速增长。与QT Mobile对比：Flutter生态繁荣，文档资源丰富，社区支持强大；Google大力推广，团队来自Chromium，更新频繁；开发效率高，支持热重载，实现毫秒级重新加载而不丢失状态，极大提升开发体验。

跨平台自绘引擎：Skia

Flutter使用Skia作为2D渲染引擎。Skia是Google的跨平台图形处理库，被Chrome和Android采用作为绘图引擎。由于Android系统已内置Skia，Flutter打包APK时无需包含Skia，但iOS未内置，因此IPA包需打包Skia，导致Android安装包小于iOS。

高性能保障

Flutter的高性能得益于两点：首先，采用Dart语言开发，Dart支持AOT编译，运行速度超过JavaScript；其次，Flutter使用自渲染引擎，布局数据由Dart直接控制，避免了JavaScript与原生间频繁同步布局信息的开销。

安装Flutter

Flutter依赖Android SDK和iOS SDK来构建双平台发布包。在macOS上搭建环境需满足最低要求：64位系统、700MB磁盘空间，并安装命令行工具如bash、git等。步骤包括下载Flutter SDK、解压、添加环境变量到PATH。

运行flutter doctor命令检查依赖，根据提示安装缺失组件。首次运行会下载依赖并编译，后续更快。更新环境变量可永久添加Flutter到PATH，具体方法因系统而异，通常修改shell配置文件如.bash_profile或.zshrc。

升级Flutter SDK使用flutter upgrade命令，同时更新SDK和项目依赖。若仅更新项目依赖，可使用flutter packages get或flutter packages upgrade。

Android Studio配置

开发Flutter应用需安装两个插件：Flutter插件支持开发工作流（运行、调试、热重载等），Dart插件提供代码分析（验证、补全等）。安装步骤：启动Android Studio，打开插件首选项，浏览仓库安装Flutter和Dart插件，重启后生效。随后可创建Flutter项目，体验热重载功能。