Flutter × 鸿蒙实战30讲（7）：资源管理：如何在 OpenHarmony 中加载 Flutter 的 assets 与字体

作者：烟云任平生
发布时间：2025年12月7日
标签：#Flutter #OpenHarmony #资源管理 #assets #CSDN

一、问题背景

Flutter 应用通常依赖 assets/ 目录下的图片、JSON、字体等资源。
当以 Web 形式嵌入 OpenHarmony 时，这些资源需被正确托管，否则会 404。

本篇教你两种方案：本地离线加载 与 远程 CDN 加载，并重点讲解 离线方案（适用于无网环境）。

二、方案1：远程加载（开发调试推荐）

• 执行 flutter run -d web-server --web-port=8080
• OpenHarmony 的 Web 组件加载 http://<IP>:8080
• 所有 assets 自动由 Flutter Dev Server 提供

✅ 优点：热重载、调试方便
❌ 缺点：依赖网络，无法用于正式分发

三、方案2：本地离线加载（生产推荐）

步骤1：构建 Flutter Web 资源

flutter build web --release
生成目录：build/web/，包含：

index.html
assets/（你的图片、字体等）
flutter_service_worker.js（可删除，鸿蒙暂不支持 Service Worker）
步骤2：将资源放入 OpenHarmony 项目
将整个 build/web 文件夹复制到：
entry/src/main/resources/rawfile/flutter_app/
📁 最终路径示例：resources/rawfile/flutter_app/index.html
步骤3：在 ArkTS 中加载本地 HTML
// MainPage.ets
Web({
  src: 'common/html/flutter_app/index.html',
  controller: this.controller
})
.width('100%')
.layoutWeight(1)
⚠️ 注意：路径前缀为 common/html/，对应 rawfile 目录。
四、自定义字体支持
若 Flutter 使用了自定义字体（如 fonts/myfont.ttf）：

确保 pubspec.yaml 正确声明
fonts:
  - family: MyFont
    fonts:
      - asset: assets/fonts/myfont.ttf
    构建后，字体文件会自动复制到 build/web/assets/fonts/
本地离线加载时，路径不变，无需额外配置
✅ 验证方法：在 Flutter 中使用 Text("测试", style: TextStyle(fontFamily: 'MyFont'))，观察是否生效。

五、性能优化建议
删除未使用的语言包（build/web/assets/ 下的 *.json）
压缩图片资源（使用 flutter pub run flutter_image_compress）
合并 CSS/JS（Flutter Web 默认已做

🔜 下一篇预告：《第8讲：打包与分发：生成 .hap 包并部署到鸿蒙真机》

💡 小技巧：可通过 ohos:resource 引用 rawfile 资源，但 Web 组件仅支持 common/html/ 前缀。