HarmonyOS鸿蒙Next中ProgressType.ScaleRing类型的进度条有什么独特的属性(如scaleCount和scaleWidth)?这些属性如何影响进度条的显示?

HarmonyOS鸿蒙Next中ProgressType.ScaleRing类型的进度条有什么独特的属性(如scaleCount和scaleWidth)?这些属性如何影响进度条的显示? ProgressType.ScaleRing 类型的进度条有什么独特的属性(如 scaleCount 和 scaleWidth)?这些属性如何影响进度条的显示?

@Entry
@Component
struct Index {
  @State value: number = 0;
  private intervalID: number = -1;
  build() {
    Column({space: 10}) {
      Progress({
        value: this.value,
        type: ProgressType.ScaleRing
      })
        .style({
          scaleCount: 30,
          scaleWidth: 10
        })
        .color(Color.Red)
        .size({width: 80, height: 80})
      Progress({
        value: this.value,
        total: 100,
        type: ProgressType.Capsule
      })
        .size({width: 120, height: 50})
      Progress({
        value: this.value,
        total: 100,
        type: ProgressType.Ring
      })
        .style({strokeWidth: 10})
        .color(Color.Pink)
        .size({width: 80, height: 80})
      Progress({
        value: this.value,
        total: 100,
        type: ProgressType.Eclipse
      })
        .color(Color.Red)
        .size({width: 80, height: 80})
      Progress({
        value: this.value,
        total: 100,
        type: ProgressType.Linear
      })
        .style({strokeWidth: 10})
        .size({width: ‘100%’, height: 40})
    }
    .padding(10)
    .width(‘100%’)
    .height(‘100%’)
  }
  aboutToAppear() {
    this.intervalID = setInterval(() => {
      this.value += 1
      if (this.value > 100) {
        clearInterval(this.intervalID);
      }
      console.log("update: " + this.value)
    }, 100);
  }
}


更多关于HarmonyOS鸿蒙Next中ProgressType.ScaleRing类型的进度条有什么独特的属性(如scaleCount和scaleWidth)?这些属性如何影响进度条的显示?的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复
  1. scaleCount: 设置环形进度条总刻度数。
    默认值:120

  2. scaleWidth: 设置环形进度条刻度粗细(不支持百分比设置),刻度粗细大于进度条宽度时,为系统默认粗细。
    默认值:2.0vp

详细参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-progress-V5#scaleringstyleoptions10

更多关于HarmonyOS鸿蒙Next中ProgressType.ScaleRing类型的进度条有什么独特的属性(如scaleCount和scaleWidth)?这些属性如何影响进度条的显示?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,ProgressType.ScaleRing类型的进度条具有以下独特属性:

  1. scaleCount:该属性定义了进度条上刻度线的数量。刻度线均匀分布在环形进度条的内侧或外侧,具体位置取决于其他样式设置。scaleCount的值越大,刻度线越密集,反之则越稀疏。

  2. scaleWidth:该属性控制每个刻度线的宽度。宽度越大,刻度线越显眼,视觉上更粗;宽度越小,刻度线越细,视觉上更不明显。

这些属性直接影响进度条的视觉效果。scaleCount决定了进度条的精细程度,较多的刻度线可以使进度条看起来更详细,较少的刻度线则显得更简洁。scaleWidth则影响刻度线的突出程度,较宽的刻度线在视觉上更为突出,较窄的刻度线则较为低调。开发者可以根据具体需求调整这些属性,以达到不同的显示效果。

在HarmonyOS鸿蒙Next中,ProgressType.ScaleRing类型的进度条具有独特的scaleCountscaleWidth属性。scaleCount定义了进度条上的刻度数量,影响刻度的密集程度;scaleWidth则控制每个刻度的宽度,影响刻度的粗细。这些属性共同决定了进度条的视觉效果,scaleCount越多,刻度越密集;scaleWidth越大,刻度越粗。合理设置这些属性可以使进度条更符合设计需求,提升用户体验。

回到顶部