在鸿蒙系统上运行你的第一个 Flutter 应用：Hello World！

从 Android 到 iOS，再到如今的 HarmonyOS，Flutter 正在不断拓展它的边界。当你在鸿蒙模拟器上看到那句熟悉的 “Hello World!”，你不仅仅是在运行一个程序，而是在见证一种新的跨平台开发范式正在成型。

●VON

822人浏览 · 2025-11-30 14:22:55

●VON · 2025-11-30 14:22:55 发布

在这里插入图片描述

个人首页： VON
鸿蒙系列专栏：鸿蒙开发小型案例总结
综合案例：鸿蒙综合案例开发
鸿蒙6.0：从0开始的开源鸿蒙6.0.0
鸿蒙5.0：鸿蒙5.0零基础入门到项目实战
Electron适配开源鸿蒙专栏：Electron for OpenHarmony
本文章所属专栏：Flutter for OpenHarmony

Hello World！

🌐 在鸿蒙系统上运行你的第一个 Flutter 应用：Hello World！

在这里插入图片描述

🌐 在鸿蒙系统上运行你的第一个 Flutter 应用：Hello World！

“Hello, World!” 是每一个程序员的起点。
当这行简单的文字出现在 鸿蒙系统的屏幕上，它不仅代表了技术的融合，更象征着跨平台开发的新篇章。

本文将带你一步步完成一个最基础的 Flutter 应用，并成功部署到 华为 HarmonyOS 模拟器 上——即使你在使用非 Android/iOS 设备，也能体验 Flutter 的强大与优雅。

🎯 目标：让“Hello World!”在鸿蒙上显示

我们今天的目标非常明确：

创建一个极简的 Flutter 应用
使用华为官方支持的 @ohos/flutter_ohos 插件
在 HarmonyOS 模拟器中成功运行并看到界面

最终效果如下图所示：

在这里插入图片描述

✅ 看到了吗？这是 Flutter 在鸿蒙生态中的第一次“问候”。

🛠️ 项目代码详解

import 'package:flutter/material.dart';

void main() {
  runApp(const HelloWorldApp());
}

class HelloWorldApp extends StatelessWidget {
  const HelloWorldApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const HelloWorldScreen(),
    );
  }
}

class HelloWorldScreen extends StatelessWidget {
  const HelloWorldScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Hello World App'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            Text(
              'Hello World!',
              style: TextStyle(
                fontSize: 32,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这里的名字也别忘了修改一下

在这里插入图片描述

💡 代码亮点解析：

组件	作用
`main()`	Dart 入口函数，启动应用
`runApp()`	将根 Widget 注入 UI 树
`MaterialApp`	提供 Material Design 风格的基础框架
`ThemeData`	设置主题色（蓝色种子色），启用 Material 3
`Scaffold`	构建标准页面结构（AppBar + Body）
`Text`	显示文本，自定义字体大小和粗细
`Center` + `Column`	垂直居中布局

🌟 这段代码完全符合 Flutter 的声明式编程思想：描述“应该是什么样子”，而不是“如何一步步画出来”。

🧪 如何在鸿蒙模拟器上运行？

第一步：准备环境

你需要以下工具：

DevEco Studio（华为官方 IDE）
HarmonyOS 模拟器（支持 API 9 或以上）
已配置好的 Flutter for HarmonyOS 项目模板

⚠️ 注意：这不是普通的 flutter create 项目！必须使用华为提供的 Flutter for HarmonyOS 模板创建。

第二步：创建项目

打开 DevEco Studio
新建项目 → 选择 “Flutter for HarmonyOS”
填写包名（如 com.example.helloworld）
点击下一步，等待初始化完成

第三步：替换代码

将上述 main.dart 内容复制粘贴到 lib/main.dart 中，保存。

第四步：构建与运行

点击顶部菜单栏的 ▶️ 运行按钮
选择目标设备：HarmonyOS 模拟器
等待编译、打包、安装完成

🔁 如果提示依赖缺失，请确保已执行：

ohpm install

🖼️ 最终效果展示

当应用启动后，你会看到：

蓝色顶部导航栏，标题为 “Hello World App”
白色背景页
居中显示的大号黑色文字：“Hello World!”

在这里插入图片描述

✅ 成功！你已经完成了 Flutter 在鸿蒙系统上的首次落地。

🤔 为什么能在鸿蒙上运行 Flutter？

这是通过 @ohos/flutter_ohos 实现的，这是一个由华为维护的插件，它做了几件关键事情：

桥接 Flutter 引擎与鸿蒙原生系统
将 Dart 代码编译成可在鸿蒙运行的字节码（.abc 文件）
提供适配层，让 Flutter Widget 能渲染到鸿蒙 UI 框架上

虽然目前仍处于实验阶段，但它证明了 Flutter 可以作为跨平台解决方案之一，覆盖更多操作系统。

⚠️ 常见问题与解决方案

问题	原因	解决方法
启动失败，报 `cannot find record ... flutter_ohos`	缺少依赖	执行 `ohpm install`
页面空白或白屏	构建缓存损坏	清理 `build/` 和 `.arkui-x/` 目录后重试
文本不居中	样式未生效	检查 `TextStyle` 是否被正确应用
模拟器卡顿	资源不足	关闭其他程序，提升模拟器内存