Flutter 鸿蒙化实战：simple_circular_progress_bar 适配 OpenHarmony

前言

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

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

本篇是系列文章之一，主角是 simple_circular_progress_bar —— 环形进度条组件。

simple_circular_progress_bar 是什么

simple_circular_progress_bar（原库 1.0.2）是轻量的环形/圆形进度条组件，纯 UI、解耦业务，通过参数即可高度定制：

1. 尺寸与值：size、maxValue、value；
2. 样式：progressStrokeWidth、backStrokeWidth、progressColors、backColor；
3. 角度：startAngle 起始角度定制。

纯 Dart 实现，适配成本低，鸿蒙版全部属性可用。

适配情况

Flutter 框架版本	TAG 名称	分支名
3.7	1.0.2-ohos-1.0.1	master
3.22	1.0.2-ohos-1.0.1	master
3.27	1.0.2-ohos-1.0.1	master
3.35	1.0.2-ohos-1.0.1	master

快速接入

在 pubspec.yaml 中添加 git 依赖：

dependencies:
  simple_circular_progress_bar:
    git:
      url: https://gitcode.com/CPF-Flutter/fluttertpc_simple_circular_progress_bar.git
      # 按你的 Flutter 框架版本，从上方映射表选择对应 TAG
      ref: 1.0.2-ohos-1.0.1

执行：

flutter pub get

使用示例

import 'package:flutter/material.dart';
import 'package:simple_circular_progress_bar/simple_circular_progress_bar.dart';

SimpleCircularProgressBar(
  maxValue: 100,
  value: 60,
  size: 120.0,
  progressStrokeWidth: 8,
  backStrokeWidth: 8,
  progressColors: [Colors.blue],
  backColor: Colors.grey.shade200,
  startAngle: -90,
  trackColor: Colors.transparent,
  child: const Center(
    child: Text('60%'),
  ),
)

API 支持一览

API	说明	ohos 支持
size	组件尺寸	yes
maxValue / value	最大值 / 当前值	yes
progressStrokeWidth	进度条宽度	yes
backStrokeWidth	底环宽度	yes
progressColors	进度颜色	yes
startAngle	起始角度	yes

[!TIP] ohos Support 为 yes 表示鸿蒙平台支持该能力，使用方式与 iOS / Android 保持一致。

仓库地址

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

系列预告

截至目前，CPF-Flutter 社区已完成 250+ 个 Flutter 三方库的 OpenHarmony 平台适配，覆盖权限管理、UI 组件、设备信息、位置服务、媒体处理、网络、支付等多个领域，完整的适配清单（含每个库的版本映射表）见：

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

本系列后续会陆续挑选高频库展开讲解，比如 WebView（flutter_webview_plugin）、传感器（motion_sensors）、应用设置（open_app_settings）等。

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