「开源鸿蒙跨平台开发先锋训练营」Day2 初探 Flutter for OpenHarmony

本文介绍了Flutter框架在开源鸿蒙（OpenHarmony）生态中的适配与应用。开源鸿蒙作为中国基础软件领域的重要突破，其生态快速发展，已吸引9500多名贡献者。将Flutter这一跨平台UI框架引入OpenHarmony，可显著提升开发效率，实现代码复用，丰富应用生态。文章详细阐述了Flutter的核心架构、Dart语言特性，并提供了Flutter for OpenHarmony环境搭建指南

JaneConan

507人浏览 · 2025-11-23 21:55:37

JaneConan · 2025-11-23 21:55:37 发布

背景与目标

开源鸿蒙生态与跨平台开发的意义

在数字化浪潮席卷全球的今天，操作系统作为数字世界的基石，其重要性不言而喻。2020 年，随着开源鸿蒙项目的正式开源，中国基础软件领域迎来了一场深刻的变革。从 "0 到 1" 的系统启动，到 "1 到 N" 的生态繁荣，五年间，开源鸿蒙以其独特的开源模式、强大的共建力量和广泛的共享机制，实现了跨越式成长。

目前，开源鸿蒙社区代码量从最初的 700 万行激增至 1.3 亿行，吸引了超过 9500 名贡献者加入，形成了覆盖金融、超高清、航天、教育、医疗、工业、交通、能源、商显等千行百业的庞大生态。这种开源开放的模式不仅加速了技术创新，更为开发者提供了广阔的发展空间。

跨平台开发作为现代软件开发的重要趋势，能够显著提高开发效率、降低维护成本，实现 "一次开发，多端部署" 的目标。对于开源鸿蒙而言，跨平台开发技术的引入将极大地丰富其应用生态，吸引更多开发者参与，加速生态的繁荣发展。

Flutter 框架在 OpenHarmony 中的适配价值

Flutter 作为 Google 推出的跨平台 UI 框架，以其高性能、高保真度和热重载等特性，在移动开发领域获得了广泛认可。将 Flutter 引入开源鸿蒙生态，具有以下重要价值：

技术栈复用：Flutter 开发者可以将现有技能直接应用到开源鸿蒙开发中，降低学习成本
开发效率提升：一套代码可同时支持 Android、iOS、Web 和 OpenHarmony 等多个平台
生态丰富：Flutter 拥有庞大的社区和丰富的第三方库，可以快速丰富开源鸿蒙应用生态
性能保障：Flutter 的自绘引擎能够保证在不同平台上的一致性能和体验

训练营 Day2 的核心学习目标

在 Day2 的学习中，我们的核心目标是：

深入理解：Flutter 框架的核心架构和工作原理
环境搭建：掌握 Flutter for OpenHarmony 的开发环境配置
实践应用：完成首个 Flutter-OH 应用的开发与调试
性能探索：了解 Flutter 应用在 OpenHarmony 上的性能表现和兼容性处理

Flutter 基础回顾

Flutter 框架特点与核心架构（Widget 机制、渲染引擎）

Flutter 框架采用分层设计，主要包含以下核心部分：

Widget 机制：Widget 是 Flutter 框架中构建用户界面的基本单位，几乎所有的界面元素都是由 Widget 构成的。Flutter 的 Widget 具有以下特点：

不可变性：Widget 一旦创建，其属性就不能再被修改，所有属性都应该被声明为final

轻量级：Widget 非常轻量，创建成本低，频繁重建不会显著影响性能

组合性：Flutter Widget 几乎完全通过组合而非继承来构建复杂 UI

描述性：Widget 是对 UI 的不可变描述，更像是一份 "蓝图" 或 "配置文件"

渲染引擎：Flutter 拥有自己的渲染引擎，不依赖平台原生控件渲染。这种设计保证了在不同平台上的一致性能和体验。

Flutter 的渲染流程主要包括：

布局阶段：确定每个 Widget 的位置和大小
绘制阶段：将 Widget 的内容绘制到画布上
合成阶段：将各个图层合成为最终的屏幕显示

Dart 语言特性与开发环境配置

Dart 是一种由 Google 开发的开源编程语言，旨在为构建高性能的移动、桌面和 Web 应用程序提供一个简单而高效的环境。Dart 具有以下特点：

简洁易学：其语法与 JavaScript、Java 等主流语言相似，对于有其他语言基础的开发者而言，入门相对容易。

强类型系统：Dart 采用了强类型和静态类型检查，可以在编译时捕捉错误，提高代码的可靠性。

异步支持：Dart 内置对异步编程的支持，使用 Future 和 Stream 等构造能够轻松处理异步操作，非常适合网络请求和 I/O 密集型操作。

跨平台：Dart 的目标是一次编写，多处运行，开发者可以使用同一代码库为多种平台（Android、iOS、Web 等）构建应用。

开发环境配置：

安装 Flutter SDK：访问 Flutter 官网下载适合自己操作系统的 Flutter SDK
配置环境变量：将flutter/bin添加到系统的环境变量中
安装依赖：根据操作系统的不同，安装必要的依赖项
运行 Flutter Doctor：使用flutter doctor命令检查环境配置
配置 IDE：推荐使用 Visual Studio Code 或 Android Studio，并安装 Dart 和 Flutter 插件

Flutter for OpenHarmony 环境搭建

请注意这里是需要我们进行命令行工具的安装和配置

建议请参考官方文档可以避免很多互联网文章的坑

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ide-commandline-get

OpenHarmony 开发环境要求（DevEco Studio 或命令行工具）

DevEco Studio：这是华为官方提供的集成开发环境，支持 OpenHarmony 应用开发。目前推荐使用最新的 release 版本。

命令行工具：Flutter 命令行工具也做了鸿蒙化，使用起来和在 Android 上十分类似。

版本选择：当前已有适配了 HarmonyOS 的 ohos Flutter SDK，目前可使用的有 3.7.12、3.22 及 3.27 三个版本，3.32 也已经在 Beta 中。

具体请参考

https://gitcode.com/openharmony-tpc/flutter_flutter

Flutter 插件安装与项目初始化

下载鸿蒙版 Flutter（3.32.4 版本）

1. 克隆项目

项目地址：https://gitcode.com/openharmony-tpc/flutter_flutter

通过 Git 工具下载仓库代码并指定 oh-3.32.4-dev 分支：

git clone https://gitcode.com/openharmony-tpc/flutter_flutter
cd flutter_flutter
git checkout -b oh-3.32.4-dev origin/oh-3.32.4-dev

2.环境变量配置

1. 配置文件选择

对于 M4 苹果电脑（ARM64 架构），建议使用~/.zshrc配置文件：


# 编辑zsh配置文件（推荐）
open ~/.zshrc

2. 环境变量配置

在配置文件中添加以下环境变量：


export HOS_SDK_HOME=/Users/yaoshengwei/Library/OpenHarmony/Sdk

# Flutter 路径配置（请根据实际路径修改）
export PATH="$PATH:/Users/yaoshengwei/repos/GitCode/flutter_flutter/bin"

# 配置 Flutter 镜像源
export PUB_HOSTED_URL=https://mirrors.tuna.tsinghua.edu.cn/dart-pub

# 配置 OpenHarmony Ohpm 环境变量
export PATH="$PATH:/Users/yaoshengwei/command-line-tools/ohpm/bin"
# 配置 OpenHarmony Hvigorw 环境变量
export PATH="$PATH:/Users/yaoshengwei/command-line-tools/hvigor/bin"

# 解决 maven.google.com 访问超时：配置国内 Maven 镜像
export PUB_HOSTED_URL=https://mirrors.tuna.tsinghua.edu.cn/dart-pub
export FLUTTER_STORAGE_BASE_URL=https://mirrors.tuna.tsinghua.edu.cn/flutter

# 配置 Android 构建时的 Maven 镜像（关键）
export GRADLE_OPTS="-Dmaven.repo.local=~/.m2/repository -Dmaven.remote.repositories=aliyun::default::https://maven.aliyun.com/repository/public -Dgoogle.maven.repo=https://maven.aliyun.com/repository/google"

3. 验证下载

下载完成后，可以验证 Flutter 版本：

请注意！！！这里建议先配环境变量！！！

./bin/flutter --version
flutter doctor -v

4. 版本特点

Flutter 3.32.4 版本特点：

支持最新的鸿蒙系统特性
性能优化和稳定性提升
更好的开发工具集成
支持最新的 API 和组件

下载完成后就可以配置开发环境了。

首个 Flutter-OH 应用实践

1、项目初始化：

根据项目类型的不同，有两种初始化方式：

纯 Flutter APP 方式：

flutter create --platforms ohos flutterohdemo

这会自动创建 HarmonyOS 底座工程目录 ohos，与 ios 和 android 目录并列。

一个典型的 Flutter-OH 项目结构包括：

my_app/
├── lib/                 # Dart源代码目录
│   └── main.dart        # 应用入口文件
├── ohos/                # OpenHarmony平台代码目录
│   ├── entry/           # 应用入口模块
│   └── build.gradle     # 构建配置文件
├── android/             # Android平台代码目录
├── ios/                 # iOS平台代码目录
├── pubspec.yaml         # 项目依赖配置
└── flutter_ohos.yaml    # OpenHarmony特定配置

ib 目录：包含应用的主要 Dart 代码，这部分代码在所有平台上共享。

ohos 目录：包含 OpenHarmony 平台特定的代码和配置，主要是 ArkTS 代码。

pubspec.yaml：定义项目的依赖关系和元数据信息。

基础 UI 组件在 OpenHarmony 上的渲染效果

Flutter 的基础 UI 组件在 OpenHarmony 上能够很好地渲染，主要包括：

文本组件：Text、RichText等

按钮组件：ElevatedButton、TextButton、IconButton等

布局组件：Row、Column、Stack、ListView等

容器组件：Container、Padding、Center等

输入组件：TextField、Checkbox、Radio等

这些组件在 OpenHarmony 上的渲染效果与在 Android、iOS 平台上基本一致，保证了跨平台的一致性体验。

2、项目编译和运行

直接进入项目目录，并且运行项目

cd flutterohdemo 

flutter run

如果您是需要运行在真机上，首先进行签名和物理或 IP 链接

在真机上的画面

进阶方向与资源

社区资源与后续学习路径（ArkUI 与 Flutter 对比）

社区资源：

开源鸿蒙官方文档：https://docs.openharmony.cn/
Flutter for OpenHarmony GitHub：https://github.com/flutter/flutter
华为开发者联盟：https://developer.huawei.com/consumer/cn/
开源鸿蒙开发者论坛：https://developer.harmonyos.com/cn/

ArkUI 与 Flutter 对比：

特性	ArkUI	Flutter
编程语言	ArkTS/JavaScript	Dart
渲染方式	平台原生渲染	自绘引擎
性能表现	优秀	优秀
跨平台能力	主要支持 OpenHarmony、HarmonyOS	支持多平台
学习曲线	中等	中等
生态成熟度	快速发展中	非常成熟

后续学习路径：

基础阶段：掌握 Flutter 基础语法和 Widget 开发
进阶阶段：学习状态管理、路由管理等高级特性
实战阶段：完成完整的 Flutter-OH 应用开发
贡献阶段：参与开源项目，提交 PR 和 Issue

总结与展望

跨平台开发对 OpenHarmony 生态的促进作用

跨平台开发技术的引入，对 OpenHarmony 生态的发展具有重要的促进作用：

降低开发门槛：吸引更多开发者参与 OpenHarmony 生态建设
丰富应用生态：快速增加 OpenHarmony 平台上的应用数量和质量
提高开发效率：实现 "一次开发，多端部署"，降低开发和维护成本
促进技术创新：不同技术栈的融合将带来更多创新可能

开发者参与贡献的建议

作为开发者，我们可以通过以下方式参与开源鸿蒙生态的建设：

插件开发
代码贡献
参与开源项目的开发，提交 PR 和 Issue：
1. Fork 项目到自己的 GitHub 账号
2. 创建特性分支进行开发
3. 提交代码并创建 Pull Request
技术分享
1. 通过博客、文章、视频等形式分享技术经验：
2. 撰写技术博客、制作教学视频、参与技术社区讨论

4.生态推广

1.积极推广开源鸿蒙生态，吸引更多开发者参与

2.在社交媒体上分享开发经验、组织技术交流活动、参与开源社区建设

开源鸿蒙的未来充满无限可能，作为开发者，我们有幸见证并参与这一伟大的技术变革。让我们携手共进，为构建更加开放、繁荣的开源生态贡献自己的力量！