[Hongmeng Software Development] Progress Bar Progress

Article directory

Preface
1. Progress bar Progress
- 1.1 Create a progress bar
- 1.2 Progress bar style
- - Progress bar style
  - ProgressType.Linear (linear style)
  - ProgressType.Ring (Ring scaleless style)
  - ProgressType.ScaleRing (Ring with scale style)
  - ProgressType.Eclipse (circle style)
  - ProgressType.Capsule (capsule style)
2. Scenario examples
Summarize

Foreword

Progress is a progress bar display component, and the displayed content is usually the current progress of a certain target operation. Please refer to Progress for specific usage.
Text is a text component, usually used to display the user’s view, such as displaying the text of an article. For specific usage, please refer to Text.
Span can only display text content as a child component of the Text component. You can add multiple spans to a text to display a piece of information, such as product instructions, commitment letters, etc.

1. Progress bar Progress

1.1 Create progress bar

Progress is created by calling the interface. The interface calling form is as follows:

Progress(options: {<!-- -->value: number, total?: number, type?: ProgressType})

This interface is used to create a type-style progress bar, where value is used to set the initial progress value, total is used to set the total length of the progress, and type determines the Progress style.

For example:

Progress({<!-- --> value: 24, total: 100, type: ProgressType.Linear }) // Create a linear progress bar with a total progress length of 100 and an initial progress value of 24

1.2 Progress bar style

Progress bar style

Progress has 5 optional types. When creating, specify the Progress type for the type option by setting the ProgressType enumeration type. They are: 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).

ProgressType.Linear (linear style)

Linear style progress bar (default type)
illustrate
Starting from API version 9, when the height of the component is greater than the width, it will be displayed adaptively vertically, and when it is equal, it will still be displayed horizontally.

Progress({<!-- --> value: 20, total: 100, type: ProgressType.Linear }).width(200).height(50)
Progress({<!-- --> value: 20, total: 100, type: ProgressType.Linear }).width(50).height(200)

ProgressType.Ring (Ring without scale style)

Circular scaleless style progress bar

// From left to right, circular progress bar No. 1, the default foreground color is blue, and the default strokeWidth progress bar width is 2.0vp
Progress({<!-- --> value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100)
// From left to right, circular progress bar No. 2
Progress({<!-- --> value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100)
    .color(Color.Grey) //The foreground color of the progress bar is gray
    .style({<!-- --> strokeWidth: 15}) //Set the strokeWidth progress bar width to 15.0vp

Among them: the strokeWidth parameter of .style is the width of the ring

ProgressType.ScaleRing (Ring with scale style)

Circular scaled style progress bar

Progress({<!-- --> value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
    .backgroundColor(Color.Black)
    .style({<!-- --> scaleCount: 20, scaleWidth: 5 }) // Set the total number of scales of the circular scaled progress bar to 20 and the scale width to 5vp
Progress({<!-- --> value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
    .backgroundColor(Color.Black)
    .style({<!-- --> strokeWidth: 15, scaleCount: 20, scaleWidth: 5 }) // Set the width of the circular scaled progress bar to 15, the total number of scales to 20, and the scale width to 5vp
Progress({<!-- --> value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
    .backgroundColor(Color.Black)
    .style({<!-- --> strokeWidth: 15, scaleCount: 20, scaleWidth: 3 }) //Set the width of the circular scaled progress bar to 15, and the total number of scales to 20.

The scaleCount parameter is the number of scales, and scaleWidth is the width of the scales.

ProgressType.Eclipse (circular style)

circular style progress bar

// From left to right, circular progress bar No. 1, the default foreground color is blue
Progress({<!-- --> value: 110, total: 150, type: ProgressType.Eclipse }).width(100).height(100)
// From left to right, circular progress bar No. 2, the specified foreground color is gray
Progress({<!-- --> value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).width(100).height(100)

ProgressType.Capsule (capsule style)

Capsule style progress bar
illustrate
1. The progress display effect at the arcs at the head and tail ends is the same as the ProgressType.Eclipse style;

2. The progress display effect in the middle is a rectangular strip, similar to the ProgressType.Linear linear style;

3. Adaptive vertical display when the height of the component is greater than the width.

Progress({<!-- --> value: 10, total: 150, type: ProgressType.Capsule }).width(100).height(50)
Progress({<!-- --> value: 20, total: 150, type: ProgressType.Capsule }).width(50).height(100).color(Color.Grey)
Progress({<!-- --> value: 50, total: 150, type: ProgressType.Capsule }).width(50).height(100).backgroundColor(Color.Black)

2. Scenario example

Update the current progress value, such as an app installation progress bar. You can add progressValue by clicking the Button, and set the progressValue to the Progress component with the .value() attribute. The progress bar component will trigger a refresh and update the current progress.

@Entry
@Component
struct ProgressCase1 {<!-- -->
  @State progressValue: number = 0 //Set the initial value of the progress bar to 0
  build() {<!-- -->
    Column() {<!-- -->
      Column() {<!-- -->
        Progress({<!-- -->value:0, total:100, type:ProgressType.Capsule}).width(200).height(50)
          .style({<!-- -->strokeWidth:50}).value(this.progressValue)
        Row().width('100%').height(5)
        Button("Progress bar + 5")
          .onClick(()=>{<!-- -->
            this.progressValue + = 5
            if (this.progressValue > 100){<!-- -->
              this.progressValue = 0
            }
          })
      }
    }.width('100%').height('100%')
  }
}

The function of @State is to notify the corresponding properties to update when the value is updated.

Summary

This lesson mainly introduces the use of the Progress component, which allows you to build a beautiful Hongmeng software interface so that users will no longer be bored waiting.