Flutter for OpenHarmony 实战: mango_shop 资源文件管理与鸿蒙适配

作者：爱吃大芒果

个人主页 爱吃大芒果

本文所属专栏Flutter

更多专栏
Ascend C 算子开发教程（进阶）
鸿蒙集成
OpenAgents
openJiuwen
从0到1自学C++

---

资源文件管理概述

在跨平台应用开发中，资源文件（如图片、字体等）的管理是一个重要环节。对于 Flutter for OpenHarmony 项目，需要同时考虑 Flutter 框架的资源管理方式和 OpenHarmony 平台的资源适配要求。

本文将以 mango_shop 项目为例，详细介绍 Flutter for OpenHarmony 环境下的资源文件管理与鸿蒙适配方案。

Flutter 项目资源管理

1. 资源文件结构

mango_shop 项目的 Flutter 资源文件主要存放在 lib/assets/ 目录下，包含以下类型的资源：

• 导航栏图标：如 ic_public_home_normal.png、ic_public_home_active.png 等
• 商品图片：如 可乐.png、坚果.png、苹果.png 等
• 其他图片：如轮播图资源等
  

2. 资源配置

在 pubspec.yaml 文件中，通过 assets 配置项声明了资源目录：

flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - lib/assets/

这种配置方式会将 lib/assets/ 目录下的所有资源文件包含到应用中。

3. 资源使用

在 Flutter 代码中，通过 Image.asset() 方法加载图片资源：

Widget icon = Image.asset(
  iconPath,
  width: 30,
  height: 30,
);

其中 iconPath 是资源文件的相对路径，如 lib/assets/ic_public_home_normal.png。

OpenHarmony 平台资源适配

1. OpenHarmony 资源目录结构

OpenHarmony 平台的资源文件结构遵循其应用开发规范，主要分为以下部分：

ohos/
├── AppScope/           # 应用全局配置
│   └── resources/      # 应用全局资源
│       └── base/
│           ├── element/  # 字符串、颜色等资源
│           └── media/    # 图片资源
└── entry/              # 应用入口模块
    └── src/main/
        └── resources/   # 模块资源
            ├── base/
            │   ├── element/  # 字符串、颜色等资源
            │   ├── media/    # 图片资源
            │   └── profile/  # 页面配置资源
            ├── en_US/        # 英文资源
            ├── rawfile/      # 原始文件
            └── zh_CN/        # 中文资源

2. Flutter 资源到 OpenHarmony 的适配

2.1 自动适配机制

Flutter for OpenHarmony 提供了资源自动适配机制，当构建应用时，Flutter 会将 pubspec.yaml 中声明的资源文件自动打包到 OpenHarmony 应用的 rawfile 目录中。

具体来说，构建过程会：

1. 读取 pubspec.yaml 中的资源配置
2. 将资源文件复制到 ohos/entry/src/main/resources/rawfile/flutter_assets/ 目录
3. 在运行时，Flutter 框架会从该目录加载资源

2.2 手动适配建议

对于需要在 OpenHarmony 原生代码中使用的资源，建议进行手动适配：

1. 图标资源：将应用图标等需要在 OpenHarmony 原生界面使用的图标，复制到 ohos/entry/src/main/resources/base/media/ 目录
2. 字符串资源：将需要国际化的字符串，添加到对应的 string.json 文件中
3. 颜色资源：将主题颜色等，添加到 color.json 文件中

3. 资源使用差异

3.1 Flutter 中使用资源

// 加载图片
Image.asset('lib/assets/苹果.png');

// 使用 Material 图标
Icon(Icons.shopping_cart);

3.2 OpenHarmony 原生代码中使用资源

// 加载图片
Image('$r('app.media.icon')');

// 使用字符串资源
Text('$r('app.string.app_name')');

// 使用颜色资源
Text('Hello', {
  style: {
    color: '$r('app.color.primary_color')'
  }
});

资源文件管理最佳实践

1. 资源命名规范

为了便于管理和跨平台适配，建议采用以下命名规范：

• 图片资源：使用小写字母、数字和下划线，如 home_icon.png
• 图标资源：添加功能前缀，如 ic_nav_home.png
• 多分辨率资源：遵循 Flutter 的分辨率感知图片命名规范，如 icon@2x.png、icon@3x.png

2. 资源目录组织

建议按功能模块组织资源目录：

lib/
└── assets/
    ├── icons/          # 图标资源
    ├── images/         # 图片资源
    ├── fonts/          # 字体资源
    └── animations/     # 动画资源

3. 字体资源管理

对于需要在应用中使用的自定义字体，建议：

1. 在 pubspec.yaml 中配置字体资源：

flutter:
  fonts:
    - family: CustomFont
      fonts:
        - asset: lib/assets/fonts/CustomFont-Regular.ttf
        - asset: lib/assets/fonts/CustomFont-Bold.ttf
          weight: 700

2. 在代码中使用字体：

Text(
  'Hello World',
  style: TextStyle(
    fontFamily: 'CustomFont',
    fontSize: 16,
    fontWeight: FontWeight.bold,
  ),
);

4. 资源优化策略

1. 图片压缩：对图片资源进行压缩，减少应用体积
2. 资源懒加载：对于较大的资源，采用懒加载方式
3. 资源缓存：合理使用 Flutter 的图片缓存机制
4. SVG 图标：对于简单图标，考虑使用 SVG 格式，减少资源文件数量

OpenHarmony 平台特殊适配

1. 资源限制与要求

OpenHarmony 平台对资源文件有一些特殊限制和要求：

• 资源文件大小：单个资源文件不宜过大，建议图片文件不超过 2MB
• 资源文件格式：支持 PNG、JPG、SVG 等常见图片格式
• 资源国际化：需要为不同语言和地区提供对应的资源文件

2. 多设备适配

OpenHarmony 支持多种设备类型，需要考虑资源在不同设备上的适配：

• 分辨率适配：提供不同分辨率的图片资源
• 屏幕尺寸适配：确保资源在不同屏幕尺寸的设备上显示正常
• 方向适配：考虑横屏和竖屏模式下的资源显示

3. 性能优化

在 OpenHarmony 平台上，资源使用的性能优化建议：

• 资源预加载：对于首屏需要的资源，进行预加载
• 资源缓存：合理使用缓存，减少重复加载
• 资源释放：在不需要使用资源时，及时释放相关内存

实例分析：mango_shop 项目资源适配

1. 现有资源分析

mango_shop 项目目前的资源管理方式：

• 优点：资源组织简单直接，便于开发
• 不足：
  • 资源命名不够规范，部分使用中文文件名
  • 资源目录结构不够清晰，所有资源混放在一个目录
  • 缺少字体资源配置
  • 缺少多分辨率适配

2. 优化建议

2.1 资源目录重构

建议重构为以下结构：

lib/
└── assets/
    ├── icons/
    │   ├── navigation/      # 导航栏图标
    │   └── common/          # 通用图标
    ├── images/
    │   ├── products/        # 商品图片
    │   ├── banners/         # 轮播图
    │   └── others/          # 其他图片
    └── fonts/               # 字体资源

2.2 资源命名优化

• 将中文文件名改为英文，如 可乐.png → cola.png
• 统一图标命名规范，如 ic_nav_home_normal.png
• 添加分辨率后缀，如 product@2x.png

2.3 pubspec.yaml 配置优化

flutter:
  uses-material-design: true

  assets:
    - lib/assets/icons/
    - lib/assets/images/
  
  fonts:
    - family: MangoFont
      fonts:
        - asset: lib/assets/fonts/MangoFont-Regular.ttf
        - asset: lib/assets/fonts/MangoFont-Bold.ttf
          weight: 700

2.4 OpenHarmony 适配增强

• 在 ohos/entry/src/main/resources/base/media/ 目录添加 OpenHarmony 原生需要的图标
• 在 ohos/entry/src/main/resources/base/element/ 目录添加颜色和字符串资源
• 确保资源文件符合 OpenHarmony 的命名规范和大小限制

总结

Flutter for OpenHarmony 环境下的资源文件管理需要同时考虑 Flutter 框架的资源管理方式和 OpenHarmony 平台的适配要求。通过合理的资源组织、规范的命名和适当的适配策略，可以确保资源在不同平台上都能正常显示和使用。

对于 mango_shop 项目，建议按照本文提出的最佳实践进行资源管理优化，以提高开发效率和应用性能。同时，随着 Flutter for OpenHarmony 的不断发展，资源适配机制也会不断完善，开发者应关注最新的适配方案和工具。

通过科学的资源管理和适配，可以让 mango_shop 应用在各个平台上都呈现出最佳的视觉效果，为用户提供一致、流畅的购物体验。

---

欢迎加入开源鸿蒙跨平台社区：开源鸿蒙跨平台开发者社区