progress-bar-cj:鸿蒙系统自定义进度条组件库,支持进度轮与水平柱效果

自定义进度条归一化UI组件

分支5Tags2
文件最后提交记录最后更新时间
1 年前
1 年前
1 年前
1 年前
1 年前
1 年前
1 年前
1 年前
1 年前
1 年前
1 年前
1 年前
1 年前
1 年前

progress-bar-cj

介绍

progress-bar-cj 是一个自定义ProgressBar效果,包含进度轮和水平柱两种效果。它是一个用仓颉语言编写的适用于鸿蒙系统的三方库。

特性

  • 提供material风格的进度轮进展条;
  • 提供material风格的水平柱进展条;
  • 提供smooth风格的进度轮进展条;
  • 提供smooth风格的水平柱进展条:

源码目录

├─AppScope
├─doc            # API文档和使用手册存放目录                   
├─entry          # 示例代码文件夹                  
├─progressbar # progressbar 库源目录                  
│  └─src
│      └─main
│          ├─cangjie
│          │  └─src              # 核心实现功能代码                       
│          └─resources
├─hvigor     # 构建工具目录
├─README.md  # progress-bar-cj 介绍及使用说明

接口说明

主要类和函数接口说明详见 API

使用说明

  1. 通过 module 引入

    1. 克隆下载项目
    2. 将 progressbar 模块拷贝到应用项目下
    3. 修改自身应用 entry 下的 oh-package.json5 文件,在 dependencies 字段添加 "progressbar": "file:../progressbar"
      {
         "name": "entry",
         "version": "1.0.0",
         "description": "Please describe the basic information.",
         "main": "",
         "author": "",
         "license": "",
        "dependencies": {
            "progressbar": "file:../progressbar"
        }
      }
    
    1. 修改自身应用 entry/src/main/cangjie 下的 cjpm.toml 文件,在 [dependencies] 字段下添加 progressbar = {path = "../../../../progressbar/src/main/cangjie", version = "1.0.0"}
       [dependencies]
           [dependencies.progressbar]
               path = "../../../../progressbar/src/main/cangjie"
               version = "1.0.0"
    
    1. 在项目中使用 import progressbar.* 引用 progressbar 项目
       import progressbar.*
    
  2. 把 progress-bar-cj 作为三方库依赖引入

    1. 目标工程把 progress-bar-cj 依赖库作为 git submodule 引入
       > cd $工程根目录
       > mkdir third-party
       > cd third-party
       > git submodule add "https://gitcode.com/Cangjie-TPC/progress-bar-cj.git"
    
    1. 修改自身应用 entry/src/main/cangjie 下的 cjpm.toml 文件,添加依赖
    [dependencies]
        [dependencies.progressbar]
            path = "../../../../third-party/progress-bar-cj/progressbar/src/main/cangjie"
            version = "1.0.0"
    
    1. 在项目中使用 progressbar 组件
       import progressbar.*
    

功能示例

详见 entry

高亮引导组件示例

import progressbar.*       //导入依赖
import ohos.router.*
import ohos.base.*
import ohos.component.*
import ohos.state_manage.*
import ohos.state_macro_manage.*
import ohos.hilog.Hilog

@Entry
@Component
class MaterialProgressBarSample {
    var frameworkModel: MaterialModel = MaterialModel()

    protected override func aboutToAppear() {
        this.frameworkModel.setStyle(MaterialProgressStyle.MaterialHorizontal)
        this.frameworkModel.setProgress(30.0)
        this.frameworkModel.setSecondProgress(60.0)
        this.frameworkModel.setColor(0x009688)
        this.frameworkModel.setSecondColor(0x9fc6c2)
        this.frameworkModel.setBgColor(0xd7d7d7)
    }

    func build() {
        Column {
            Flex(FlexParams(direction: FlexDirection.Column)) {
                Text("Determinate Horizontal ProgressBar").fontSize(18).margin(2)
                Text("Framework Implementation").fontSize(14).fontColor(0x666666).margin(2)

                Flex(FlexParams(direction: FlexDirection.Column)) {
                    MaterialProgressBar(style: MaterialProgressStyle.MaterialHorizontal, modelBuild: this.frameworkModel
                    )
                }.height(20).width(100.percent).margin(2)
            }.width(100.percent).height(100.percent).padding(10)
        }.width(100.percent).height(100.percent).backgroundColor(Color.WHITE)
    }
}

约束与限制

在下述版本验证通过:

DevEco Studio (5.0.9.100) Cangjie Support Plugin 5.0.9.100 Cangjie Compiler: 0.53.18

开源协议

本项目基于 Apache License 2.0,请自由地享受和参与开源。

参与贡献

欢迎给我们提交 PR,欢迎给我们提交 Issue,欢迎参与任何形式的贡献。

项目介绍

自定义进度条归一化UI组件

定制我的领域