HarmonyOS NEXT Practical: Progress Bar

Objective: To achieve visualization of progress. Knowledge points: Progress： Progress bar component, used to display the progress of content loading or operation processing. Set progress bar style Progress has 5 optional types, and you can set the progress bar style through ProgressType. ProgressType types include: ProgressType.Linear (linear style) ProgressType.Ring (ring without scale style), ProgressType.ScaleRing (ring with scale style), ProgressType.Eclipse (circular style), and ProgressType Capsule (capsule style). interface Progress(options: ProgressOptions) Create a progress bar component. ProgressOptionsobject value： Specify the current progress value. When setting a value less than 0, set it to 0; when setting a value greater than total, set it to total. Default value: 0 total： Specify the total length of the progress. When setting a value less than or equal to 0, set it to 100. Default value: 100 type： Specify the type of progress bar. Default value: ProgressType.Linear Progress attribute value(value: number) //Set the current progress value. When setting a value less than 0, set it to 0; when setting a value greater than total, set it to total. Illegal values are not valid. Default value: 0 color(value: ResourceColor | LinearGradient) //Set the foreground color of the progress bar. style(value: ProgressStyleOptions | CapsuleStyleOptions | RingStyleOptions | LinearStyleOptions | ScaleRingStyleOptions | EclipseStyleOptions)//Set the style of the component. contentModifier(modifier:ContentModifier)//On the progress component, customize the content area method. modifier: Content modifier, developers need to customize the class to implement the ContentModifier interface. privacySensitive(isPrivacySensitiveMode: Optional)//Set privacy sensitive, reset progress to zero in privacy mode, and text will be masked. Explanation: Setting null is insensitive. Card framework support is required. ProgressConfiguration property Value: Current progress value. When the set value is less than 0, set it to 0. When the set value is greater than total, set it to total. Default value: 0, value range: [0, total] Total: The total length of the progress. Value range: [0, +∞] CommonProgressStyleOptions property enableSmoothEffect： The switch for smooth progress and dynamic effects. After enabling the smooth motion effect, the progress will gradually change from the current value to the set value. Otherwise, the progress will suddenly change from the current value to the set value. Default value: true ProgressStyleOptions property StrokeWidth: Set the width of the progress bar (percentage setting is not supported). Default value: 4.0vp ScaleCount: Set the total degree of the circular progress bar. Default value: 120, value range: [2, min (width, height)/scaleWidth/2/π]. If it is not within the value range, the style will display as a circular progress bar without a scale. ScaleWidth: Set the thickness of the circular progress bar scale (percentage setting is not supported). When the scale thickness is greater than the width of the progress bar, it is the system default thickness. Default value: 2.0vp Actual combat:ProgressBarDemoPage @Entry @Component struct ProgressBarDemoPage { @State isStart: boolean = false @State value: number = 0 timer: number = 0 build() { Column({ space: 20 }) { Text('进度条Demo') Text(`当前进度：${this.value}%`) Progress({ value: this.value, total: 100, type: ProgressType.Linear }) .style({ strokeWidth: 10, enableSmoothEffect: true }) Row({ space: 20 }) { Column({ space: 10 }) { SymbolGlyph(this.isStart ? $r('sys.symbol.pause') : $r('sys.symbol.play_fill')) .fontSize(30) .renderingStrategy(SymbolRenderingStrategy.SINGLE) .fontColor([Color.Black]) Text(this.isStart ? '暂停' : '开始') } .onClick(() => { this.isStart = !this.isStart this.updateProgress() }) Column({ space: 10 }) { SymbolGlyph($r('sys.symbol.arrow_counterclockwise')) .fontSize(30) .renderingStrategy(SymbolRenderingStrategy.SINGLE) .fontColor([Color.Black]) Text('重置') } .onClick(() => { clearInterval(this.timer); // 关闭定时器 this.value = 0 }) } } .height('100%') .width('100%') .padding({ top: 10, right: 20, left: 20 }) } updateProgress() { if (this.isStart) { this.timer = setInterval(() => { this.value = this.value + 1; if (this.value === 100) { clearInterval(this.timer); // 关闭定时器 } }, 100) } else { clearInterval(this.timer); // 关闭定时器 } } }

Mar 28, 2025 - 09:50

Objective: To achieve visualization of progress.

Knowledge points:
Progress： Progress bar component, used to display the progress of content loading or operation processing.

Set progress bar style
Progress has 5 optional types, and you can set the progress bar style through ProgressType. ProgressType types include: ProgressType.Linear (linear style) ProgressType.Ring (ring without scale style), ProgressType.ScaleRing (ring with scale style), ProgressType.Eclipse (circular style), and ProgressType Capsule (capsule style).

interface

Progress(options: ProgressOptions)

Create a progress bar component.

ProgressOptionsobject
value： Specify the current progress value. When setting a value less than 0, set it to 0; when setting a value greater than total, set it to total. Default value: 0
total： Specify the total length of the progress. When setting a value less than or equal to 0, set it to 100. Default value: 100
type： Specify the type of progress bar. Default value: ProgressType.Linear

Progress attribute

value(value: number) //Set the current progress value. When setting a value less than 0, set it to 0; when setting a value greater than total, set it to total. Illegal values are not valid. Default value: 0
color(value: ResourceColor | LinearGradient) //Set the foreground color of the progress bar.
style(value: ProgressStyleOptions | CapsuleStyleOptions | RingStyleOptions | LinearStyleOptions | ScaleRingStyleOptions | EclipseStyleOptions)//Set the style of the component.
contentModifier(modifier:ContentModifier)//On the progress component, customize the content area method. modifier:  Content modifier, developers need to customize the class to implement the ContentModifier interface.
privacySensitive(isPrivacySensitiveMode: Optional)//Set privacy sensitive, reset progress to zero in privacy mode, and text will be masked. Explanation: Setting null is insensitive. Card framework support is required.

ProgressConfiguration property

Value: Current progress value. When the set value is less than 0, set it to 0. When the set value is greater than total, set it to total. Default value: 0, value range: [0, total]
Total: The total length of the progress. Value range: [0, +∞]

CommonProgressStyleOptions property
enableSmoothEffect： The switch for smooth progress and dynamic effects. After enabling the smooth motion effect, the progress will gradually change from the current value to the set value. Otherwise, the progress will suddenly change from the current value to the set value. Default value: true

ProgressStyleOptions property

StrokeWidth: Set the width of the progress bar (percentage setting is not supported). Default value: 4.0vp
ScaleCount: Set the total degree of the circular progress bar. Default value: 120, value range: [2, min (width, height)/scaleWidth/2/π]. If it is not within the value range, the style will display as a circular progress bar without a scale.
ScaleWidth: Set the thickness of the circular progress bar scale (percentage setting is not supported). When the scale thickness is greater than the width of the progress bar, it is the system default thickness. Default value: 2.0vp

Actual combat:ProgressBarDemoPage

@Entry
@Component
struct ProgressBarDemoPage {
  @State isStart: boolean = false
  @State value: number = 0
  timer: number = 0

  build() {
    Column({ space: 20 }) {
      Text('进度条Demo')

      Text(`当前进度：${this.value}%`)

      Progress({ value: this.value, total: 100, type: ProgressType.Linear })
        .style({ strokeWidth: 10, enableSmoothEffect: true })

      Row({ space: 20 }) {
        Column({ space: 10 }) {
          SymbolGlyph(this.isStart ? $r('sys.symbol.pause') : $r('sys.symbol.play_fill'))
            .fontSize(30)
            .renderingStrategy(SymbolRenderingStrategy.SINGLE)
            .fontColor([Color.Black])
          Text(this.isStart ? '暂停' : '开始')
        }
        .onClick(() => {
          this.isStart = !this.isStart
          this.updateProgress()
        })

        Column({ space: 10 }) {
          SymbolGlyph($r('sys.symbol.arrow_counterclockwise'))
            .fontSize(30)
            .renderingStrategy(SymbolRenderingStrategy.SINGLE)
            .fontColor([Color.Black])
          Text('重置')
        }
        .onClick(() => {
          clearInterval(this.timer); // 关闭定时器
          this.value = 0
        })
      }
    }
    .height('100%')
    .width('100%')
    .padding({ top: 10, right: 20, left: 20 })
  }

  updateProgress() {
    if (this.isStart) {
      this.timer = setInterval(() => {
        this.value = this.value + 1;
        if (this.value === 100) {
          clearInterval(this.timer); // 关闭定时器
        }
      }, 100)
    } else {
      clearInterval(this.timer); // 关闭定时器
    }
  }
}