HarmonyOS 鸿蒙Next 渐变色线性进度条的简单小组件

发布于 1周前 作者 nodeper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 渐变色线性进度条的简单小组件 目前Progress进度条组件仅支持环形进度条的颜色渐变，下面是我在开发时做的一个条形进度条小组件，使用时输入进度条高度，索引及颜色的即可。

因为需求本身也不复杂，所以实现方式比较简单，也留下很多可扩展的地方，可以根据大家的需求自行修改。

如果有不足的地方，欢迎各位大佬积极讨论和指导。

@Component
export struct ProgressWidget {
  @Prop progressHeight: number = 8
  //索引
  @Prop progressIndex: number = 1
  @Prop progressTotal: number = 10

  //起始颜色
  @Prop progressStartingColor: ResourceColor = Color.Green
  //终止颜色
  @Prop progressEndingColor: ResourceColor = Color.Blue

  build() {
    Stack() {
      Row()
        .border({
          radius: 3
        })
        .height(this.progressHeight)
        .width('100%')
        .backgroundColor(Color.Gray)
        .position({
          x: 0,
          y: 0
        })
      Row()
        .border({
          radius: 3,
        })
        .linearGradient({
          direction: GradientDirection.Left,
          repeating: false,
          colors: [[this.progressStartingColor, 0.0], [this.progressEndingColor, 1.0]]
        })
        .height(this.progressHeight)
        .width(1 >= (this.progressIndex / this.progressTotal) ?
          `${((this.progressIndex / this.progressTotal) *100 ).toFixed(1)}%`: '100%')
        .animation({
          duration: 100,
          curve: Curve.Linear
        })
        .position({
          x: 0,
          y: 0
        })
    }.align(Alignment.Start)
  }
}

更多关于HarmonyOS 鸿蒙Next 渐变色线性进度条的简单小组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
1 回复

更多关于HarmonyOS 鸿蒙Next 渐变色线性进度条的简单小组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）系统中实现一个渐变色线性进度条的小组件，可以通过使用ArkUI（ArkUI是鸿蒙的声明式前端框架）的组件和样式来完成。以下是一个简要的实现方法：

  1. 定义布局文件：在.hml文件中，使用<progress>组件来创建进度条，并通过style属性设置其样式。

    <div class="container">
    <progress class="progress-bar" value="{{progressValue}}" max="100"></progress>
</div>

  2. 定义样式文件：在.css文件中，为<progress>组件设置渐变色背景。

    .container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.progress-bar {
    width: 300px;
    height: 20px;
    background-image: linear-gradient(to right, #ff7e5f, #feb47b);
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar::-webkit-progress-value {
    background-image: linear-gradient(to right, #ff4e50, #f9d423);
    border-radius: 10px 0 0 10px;
}

  3. 在JavaScript中管理进度值：在.js文件中，通过绑定变量progressValue来动态更新进度条的进度。

    export default {
    data: {
        progressValue: 50 // 初始进度值
    }
}

以上代码创建了一个简单的渐变色线性进度条小组件。如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html

回到顶部