Flutter 鸿蒙化实战：rive 适配 OpenHarmony，Rive 动画

m0_738185822026-10-12 9:14

Flutter 鸿蒙化实战：rive 适配 OpenHarmony

前言

随着鸿蒙生态的快速发展，越来越多的 Flutter 应用需要适配 OpenHarmony 平台。但生态早期，大量常用三方库只有 Android / iOS 实现，鸿蒙侧只能自己造轮子。

为了解决这个问题，CPF-Flutter 社区 对一批高频使用的 Flutter 三方库做了 OpenHarmony 平台适配，统一托管在 GitCode 的 CPF-Flutter 组织下，全部通过 TAG 版本隔离、配套门禁编译验证，开箱即用。

本篇是系列文章之一，主角是 rive ------ Rive 动画插件。

rive 是什么

rive（原库 0.13.20）用于播放 Rive 设计工具导出的动画：

加载：RiveAnimation.asset / network / file / direct 多种加载方式；
播放：artboard、fit、alignment 配置。

Rive 动画轻量流畅，适合做炫酷交互动效。

适配情况

Flutter 框架版本	TAG 名称
3.22	0.13.20-ohos-1.0.0
3.27	0.13.20-ohos-1.0.0
3.35	0.13.20-ohos-1.0.0

快速接入

在 pubspec.yaml 中添加 git 依赖：

yaml 复制代码

dependencies:
  rive:
    git:
      url: https://gitcode.com/CPF-Flutter/fluttertpc_Rive-flutter.git
      # 按你的 Flutter 框架版本，从上方映射表选择对应 TAG
      ref: 0.13.20-ohos-1.0.0

执行：

bash 复制代码

flutter pub get

使用示例

dart 复制代码

import 'package:rive/rive.dart';

RiveAnimation.asset(
  'assets/anim.riv',
  fit: BoxFit.cover,
)

API 支持一览

API	说明
RiveAnimation.asset	从资产加载
RiveAnimation.network	从网络加载
RiveAnimation.file / direct	从文件 / 直接数据加载
artboard / fit / alignment	画板 / 适配 / 对齐

$TIP$ 本库鸿蒙版与上游 API 对齐，接入方式与 iOS / Android 一致。

仓库地址

OpenHarmony 适配仓库：https://gitcode.com/CPF-Flutter/fluttertpc_Rive-flutter
使用问题反馈：请到 CPF-Flutter 社区 Issues 提交问题（社区统一收集跟进）；本仓库 Issues 区亦可。

系列预告

截至目前，CPF-Flutter 社区已完成 250+ 个 Flutter 三方库的 OpenHarmony 平台适配，完整的适配清单（含每个库的版本映射表）见：

适配总览文档：https://gitcode.com/CPF-Flutter/docs/blob/main/ThirdpartyLibrarites.md
仓库组织：https://gitcode.com/CPF-Flutter

本系列后续会陆续挑选高频库展开讲解，比如高德地图（amap_flutter_map）、声网音视频（agora_rtc_engine）、支付宝（alipay_kit）等。

如果你的 Flutter 应用正在计划适配鸿蒙，欢迎关注 CPF-Flutter 组织，也欢迎参与共建。