进度条 (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.0vpscaleCount | number 否 设置环形进度条总刻度数。默认值：120scaleWidth | Length 否 设置环形进度条刻度粗细（不支持百分比设置），刻度粗细大于进度条宽度时，为系统默认粗细。默认值：2.0vpenableSmoothEffect | boolean 否 进度平滑动效的开关。开启平滑动效后设置进度，进度会从当前值渐变至设定值，否则进度从当前值突变至设定值。默认值：true
可参考：here有很多有意思的效果实现
contentModifier(modifier:ContentModifier)定制progress内容区的方法。
privacySensitive(isPrivacySensitiveMode: Optional)设置隐私敏感。
Progress事件
@Entry
@Component
struct ProgressCase1 { @State progressValue: number = 0 // 设置进度条初始值为0build() {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状态。