鸿蒙界面开发——组件（9）：进度条Progress 滑动条Slider

进度条 (Progress)

Progress(options: {value: number, total?: number, type?: ProgressType})

其中，value用于设置初始进度值，total用于设置进度总长度，type用于设置Progress样式。
Progress有5种可选类型，通过ProgressType可以设置进度条样式，ProgressType类型包括：

`ProgressType.Linear（线性样式）、
 ProgressType.Ring（环形无刻度样式）、
 ProgressType.ScaleRing（环形有刻度样式）、
 ProgressType.Eclipse（圆形样式）
 ProgressType.Capsule（胶囊样式）。`

线性样式进度条（默认类型）
从API version9开始，组件高度大于宽度时，自适应垂直显示；组件高度等于宽度时，保持水平显示。

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

环形无刻度样式进度条

// 从左往右，1号环形进度条，默认前景色为蓝色渐变，默认strokeWidth进度条宽度为2.0vp
Progress({ value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100)
// 从左往右，2号环形进度条
Progress({ value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100)
    .color(Color.Grey)    // 进度条前景色为灰色
    .style({ strokeWidth: 15})    // 设置strokeWidth进度条宽度为15.0vp

在这里插入图片描述

环形有刻度样式进度条

Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
    .backgroundColor(Color.Black)
    .style({ scaleCount: 20, scaleWidth: 5 })    // 设置环形有刻度进度条总刻度数为20，刻度宽度为5vp
Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
    .backgroundColor(Color.Black)
    .style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 5 })    // 设置环形有刻度进度条宽度15，总刻度数为20，刻度宽度为5vp
Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
    .backgroundColor(Color.Black)
    .style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 3 })    // 设置环形有刻度进度条宽度15，总刻

在这里插入图片描述

圆形样式进度条

// 从左往右，1号圆形进度条，默认前景色为蓝色
Progress({ value: 10, total: 150, type: ProgressType.Eclipse }).width(100).height(100)
// 从左往右，2号圆形进度条，指定前景色为灰色
Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).width(100).height(100)

在这里插入图片描述

胶囊样式进度条

说明
头尾两端圆弧处的进度展示效果与ProgressType.Eclipse样式相同；
中段处的进度展示效果为矩形状长条，与ProgressType.Linear线性样式相似；
组件高度大于宽度的时候自适应垂直显示。

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).color(Color.Blue).background

在这里插入图片描述
拓展

Progress属性

.value(value: number)设置当前进度值。设置小于0的数值时置为0，设置大于total的数值时置为total。非法数值不生效。
.color(value: ResourceColor | LinearGradient)
.backgroundColor(value: ResourceColor)
.style(value: ProgressStyleOptions | CapsuleStyleOptions | RingStyleOptions | LinearStyleOptions | ScaleRingStyleOptions | EclipseStyleOptions)设置组件的样式。

ProgressStyleOptions:

	strokeWidth	| Length	否	设置进度条宽度（不支持百分比设置）。默认值：4.0vp
	scaleCount	| number	否	设置环形进度条总刻度数。默认值：120
	scaleWidth	| Length	否	设置环形进度条刻度粗细（不支持百分比设置），刻度粗细大于进度条宽度时，为系统默认粗细。默认值：2.0vp
	enableSmoothEffect	| boolean	否	进度平滑动效的开关。开启平滑动效后设置进度，进度会从当前值渐变至设定值，否则进度从当前值突变至设定值。默认值：true

可参考：here有很多有意思的效果实现

contentModifier(modifier:ContentModifier)定制progress内容区的方法。
privacySensitive(isPrivacySensitiveMode: Optional)设置隐私敏感。

Progress事件

@Entry
@Component
struct ProgressCase1 { 
  @State progressValue: number = 0    // 设置进度条初始值为0
  build() {
    Column() {
      Column() {
        Progress({value:0, total:100, type:ProgressType.Capsule})
        .width(200)
        .height(50)
        .value(this.progressValue)//设置进度条的当前值，参数value表示初始值
        
        Row().width('100%').height(5)
        Button("进度条+5")
          .onClick(()=>{
            this.progressValue += 5 //更新进度条的值
            if (this.progressValue > 100){
              this.progressValue = 0
            }
          })
      }
    }.width('100%').height('100%')
  }
}

进度条Slider

在这里插入图片描述

Slider也叫可滑动进度条，可滑动修改值。例如修改音量、屏幕亮度等。——按钮与选择
进度条组件Progress，用于显示内容加载或操作处理等进度。——信息&展示

Slider(options?: SliderOptions)

value number 否当前进度值。默认值：与参数min的取值一致。从API version 10开始，该参数支持$$双向绑定变量。
min number 否设置最小值。默认值：0
max number 否设置最大值。默认值：100
说明：min >= max异常情况，min取默认值0，max取默认值100。value不在[min, max]范围之内，取min或者max，靠近min取min，靠近max取max。
step number 否设置Slider滑动步长。默认值：1取值范围：[0.01, max - min]说明：若设置的step值小于0或大于max值时，则按默认值显示。
style SliderStyle 否设置Slider的滑块与滑轨显示样式。默认值：SliderStyle.OutSet
- OutSet 滑块在滑轨上。
- InSet 滑块在滑轨内。
- NONE 无滑块
direction Axis 否设置滑动条滑动方向为水平或竖直方向。默认值：Axis.Horizontal
reverse boolean 否设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。默认值：false

Slider属性

支持除触摸热区以外的通用属性。

blockColor(value: ResourceColor)设置滑块的颜色。
当滑块形状设置为SliderBlockType.DEFAULT时，blockColor可设置默认圆形滑块颜色。
当滑块形状设置为SliderBlockType.IMAGE时，滑块无填充，设置blockColor不生效。
当滑块形状设置为SliderBlockType.SHAPE时，blockColor可设置自定义形状的填充颜色。
trackColor(value: ResourceColor | LinearGradient)设置滑轨的背景颜色。
selectedColor(value: ResourceColor)设置滑轨的已滑动部分颜色。
showSteps(value: boolean) 设置当前是否显示步长刻度值。
showTips(value: boolean, content?: ResourceStr)设置滑动时是否显示气泡提示。here
trackThickness(value: Length)设置滑轨的粗细。设置为小于等于0的值时，取默认值。
blockBorderColor 设置滑块描边颜色。
blockBorderWidth
stepColor 设置刻度颜色。
trackBorderRadius设置底板圆角半径。
selectedBorderRadius设置已滑动部分（高亮）圆角半径。
blockSize(value: SizeOptions) 设置滑块大小。
默认值：当参数style的值设置为SliderStyle.OutSet时为{width: 16, height: 16}，当参数style的值设置为SliderStyle.InSet时为{width: 12, height: 12}，当参数style的值设置为SliderStyle.NONE时为，此字段不生效。
当设置的blockSize的宽高值不相等时，取较小值的尺寸，当设置的宽高值中有一个或两个都小于等于0的时候，取默认值。
blockStyle(value: SliderBlockStyle)设置滑块形状参数。
SliderBlockType 对象说明：

type SliderBlockType 是设置滑块形状。默认值：SliderBlockType.DEFAULT，使用圆形滑块。
- SliderBlockType枚举说明：
- DEFAULT 使用默认滑块（圆形）。
- IMAGE 使用图片资源作为滑块。
- SHAPE 使用自定义形状作为滑块。
image ResourceStr 否设置滑块图片资源。图片显示区域大小由blockSize属性控制，请勿输入尺寸过大的图片。
shape Circle | Ellipse | Path | Rect 否设置滑块使用的自定义形状。

stepSize 设置刻度大小（直径）。当值为0时，刻度点不显示，当值小于0时，取默认值。
sliderInteractionMode 设置用户与滑动条组件交互方式。默认值：SliderInteraction.SLIDE_AND_CLICK。
minResponsiveDistance设置滑动响应的最小距离。
contentModifier定制Slider内容区的方法。
slideRange设置有效滑动区间。

Slider事件

onChange(callback: (value: number, mode: SliderChangeMode) => void)

Slider拖动或点击时触发事件回调。

Begin和End状态当手势点击时都会触发，Moving和Click状态当value值发生变化时触发。

当连贯动作为拖动动作时，不触发Click状态。