# ohos_material_progress_bar

**Repository Path**: openharmony-sig/ohos_material_progress_bar

## Basic Information

- **Project Name**: ohos_material_progress_bar
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 17
- **Created**: 2022-04-16
- **Last Updated**: 2025-05-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MaterialProgressBar

## 简介
> MaterialProgressBar是一个自定义ProgressBar效果。本库基于[
materialish-progress](https://github.com/nico2sh/materialish-progress)、[
MaterialProgressBar](https://github.com/zhanghai/MaterialProgressBar)、[
SmoothProgressBar](https://github.com/castorflex/SmoothProgressBar) 原库进行适配，使其可以运行在 OpenHarmony，并沿用其现有用法和特性。

自定义进度条样式：

<img src="./gifs/customStyle.gif" width="200"/>

颜色设置和动态进度：

<img src="./gifs/color.gif" width="200"/>

进度轮样式效果:

<img src="./gifs/radient.gif" width="200"/>

进度轮效果:

<img src="./gifs/progressBar.gif" width="200"/>

## 下载安装
```shell
ohpm install @ohos/materialprogressbar
```
OpenHarmony ohpm 环境配置等更多内容，请参考[如何安装 OpenHarmony ohpm 包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.md)


## 使用说明

通过MaterialProgressBar实现多种ProgressBar效果，分别是：

```js
 enum MaterialProgressStyle{
   MaterialCircular,
   MaterialHorizontal,
   SmoothCircular,
   SmoothHorizontal

}
```
导入并使用

 ```
import { MaterialProgressBar , MaterialProgressStyle} from "@ohos/materialprogressbar"

...

build() {
    Scroll() {
     Flex({ direction: FlexDirection.Column }) {
          MaterialProgressBar({ style: MaterialProgressStyle.MaterialHorizontal,
            modelBuild: {
              color: '#009688',
              secondColor: '#9fc6c2',
              secondProgress: 60,
              bgColor: "#b3ddd9"
            } })
        }.width('100%')
        .height(20)
        .margin(2)
    }
 }
 ```
 更多详细用法请参考开源库sample页面的实现

## 接口说明

属性设置：通过MaterialModel类对象设置UI属性来自定义所需风格

| **属性**                             | **必填** | **说明**                                                     |
| ------------------------------------ | :------: | ------------------------------------------------------------ |
| mStyle:  MaterialProgressStyle       |    是    | 枚举样式类型， MaterialCircular、MaterialHorizontal、SmoothCircular、SmoothHorizontal |
| modelBuild.radius:  number           |    否    | MaterialCircular样式的半径大小、默认50                       |
| modelBuild.progress:  number         |    否    | 进度值，默认30                                               |
| modelBuild.color:  Color             |    否    | 进度条颜色，默认”#029789”                                    |
| modelBuild.secondProgress:  number   |    否    | 二级进度值，默认0                                            |
| modelBuild.secondColor:  Color       |    否    | 二级进度颜色值，值为null时不显示，默认为null                 |
| modelBuild.bgColor:  Color           |    否    | 进度条的背景颜色，值为null 时不显示，默认为null              |
| modelBuild.strokeWidth:  number      |    否    | 进度条线宽，默认值为 8                                       |
| modelBuild.indeterminate:  boolean   |    否    | 是否开启角度旋转效果。默认false                              |
| modelBuild.active:  boolean          |    否    | 是否开启进度变化效果。默认false                              |
| modelBuild.isPocket:  boolean        |    是    | Pocket进度条样式，默认值为false                              |
| modelBuild.colors:  []               |    否    | 进度条颜色，默认值为[0x3e802f, 0xb23424, 0x427fed, 0xf4b400] |
| modelBuild.isReversed:  boolean      |    是    | 相反方向运动，默认值为false                                  |
| modelBuild. isMirror:  boolean       |    是    | 镜像运动，默认值为false                                      |
| modelBuild. isGradients:  boolean    |    是    | 渐变色，默认值为false                                        |
| modelBuild.speed:  number            |    否    | 进度条运动速度，默认值为1.0                                  |
| modelBuild.strokeWidth:  number      |    否    | 进度条线宽，默认值为4                                        |
| modelBuild.separatorLength:  number  |    否    | 进度条间距，默认值为4                                        |
| modelBuild.curve:Curve.FastOutSlowIn |    否    | 进度条运动模式，默认值为Curve.FastOutSlowIn                  |
| modelBuild.isStop:  boolean          |    是    | 进度条是否停止运动，默认值为false                            |

## 约束与限制

在下述版本验证通过：
- DevEco Studio: NEXT Beta1-5.0.3.806, SDK: API12 Release(5.0.0.66)

## 目录结构
````
|---- MaterialProgressBar  
|     |---- entry  # 示例代码文件夹
|     |---- library  # LiveEventBus库文件夹
|           |---- index.ets  # 对外接口
|           └─main
|               ├─ets
|               │  └─components
|               │      |─ComWheel.ets  # Material效果实现
|               │      └─material
|               │          ├─core  # ProgressBar自定义核心代码
|               │          ├─smooth  # Smooth效果的相关代码
|               │          ├─MaterialProgressStyle.ets  # 样式定义
|               │          └─MaterialProgressBar.ets  # ProgressBar入口
|
|---- README.md  # 安装使用方法      
|---- README_zh.md  # 安装使用方法                    
````

## 贡献代码
使用过程中发现任何问题都可以提 [Issue]( https://gitee.com/openharmony-sig/MaterialProgressBar/issues) 给组件，当然，也非常欢迎发 [PR]( https://gitee.com/openharmony-sig/MaterialProgressBar/pulls)共建 。

## 开源协议
本项目基于 [Apache License 2.0]( https://gitee.com/openharmony-sig/MaterialProgressBar/blob/master/LICENSE) ，请自由地享受和参与开源。