【鸿蒙开发】系统组件Slider

Slider组件

Slider滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。

接口：

Slider(options?: {value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean})

参数：

参数名	参数类型	必填	参数描述
value	number	否	当前进度值。 默认值：参数min
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] 说明： 设置小于0或百分比的值时，按默认值显示。
style	SliderStyle	否	设置Slider的滑块与滑轨显示样式。 默认值：SliderStyle.OutSet
direction8+	Axis	否	设置滑动条滑动方向为水平或竖直方向。 默认值：Axis.Horizontal
reverse8+	boolean	否	设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。 默认值：false

SliderStyle：

名称	描述
OutSet	滑块在滑轨上。
InSet	滑块在滑轨内。

属性：

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

名称	参数类型	描述
blockColor	ResourceColor	设置滑块的颜色。 从API version 9开始，该接口支持在ArkTS卡片中使用。
trackColor	ResourceColor	设置滑轨的背景颜色。 从API version 9开始，该接口支持在ArkTS卡片中使用。
selectedColor	ResourceColor	设置滑轨的已滑动部分颜色。 从API version 9开始，该接口支持在ArkTS卡片中使用。
showSteps	boolean	设置当前是否显示步长刻度值。 默认值：false 从API version 9开始，该接口支持在ArkTS卡片中使用。
showTips	boolean	设置滑动时是否显示百分比气泡提示。 默认值：false 从API version 9开始，该接口支持在ArkTS卡片中使用。 说明： 当direction的属性值为Axis.Horizontal时，tip显示在滑块正上方。值为Axis.Vertical时，tip显示在滑块正左边。 tip的绘制区域为Slider自身节点的overlay。 Slider不设置边距，或者边距比较小时，tip会被截断。
trackThickness	Length	设置滑轨的粗细。 默认值：当参数style的值设置SliderStyle.OutSet 时为 4.0vp，SliderStyle.InSet时为20.0vp。 从APIversion9开始，该接口支持在ArkTS卡片中使用。 说明： 设置为小于0的值时，按默认值显示。

Progress组件

Progress进度条组件，用于显示内容加载或操作处理等进度。

接口：

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

创建进度组件，用于显示内容加载或操作处理进度。

参数:

参数名	参数类型	必填	参数描述
value	number	是	指定当前进度值。设置小于0的数值时置为0，设置大于total的数值时置为total。 从API version 9开始，该接口支持在ArkTS卡片中使用。
total	number	否	指定进度总长。 默认值：100 从API version 9开始，该接口支持在ArkTS卡片中使用。
type8+	ProgressType	否	指定进度条类型。 默认值：ProgressType.Linear 从API version 9开始，该接口支持在ArkTS卡片中使用。
styledeprecated	ProgressStyle	否	指定进度条样式。 该参数从API version8开始废弃，建议使用type替代。 默认值：ProgressStyle.Linear

ProgressType：

名称	描述
Linear	线性样式。从API version9开始，高度大于宽度的时候自适应垂直显示。
Ring8+	环形无刻度样式，环形圆环逐渐显示至完全填充效果。
Eclipse8+	圆形样式，显示类似月圆月缺的进度展示效果，从月牙逐渐变化至满月。
ScaleRing8+	环形有刻度样式，显示类似时钟刻度形式的进度展示效果。从API version9开始，刻度外圈出现重叠的时候自动转换为环形无刻度进度条。
Capsule8+	胶囊样式，头尾两端圆弧处的进度展示效果与Eclipse相同；中段处的进度展示效果与Linear相同。高度大于宽度的时候自适应垂直显示。

ProgressStyle：

名称	描述
Linear	线性样式。
Ring	环形无刻度样式，环形圆环逐渐显示至完全填充效果。
Eclipse	圆形样式，显示类似月圆月缺的进度展示效果，从月牙逐渐变化至满月。
ScaleRing	环形有刻度样式，显示类似时钟刻度形式的进度展示效果。
Capsule	胶囊样式，头尾两端圆弧处的进度展示效果与Eclipse相同；中段处的进度展示效果与Linear相同。高度大于宽度的时候自适应垂直显示。

属性:

名称	参数类型	描述
value	number	设置当前进度值。设置小于0的数值时置为0，设置大于total的数值时置为total。非法数值不生效。 从API version 9开始，该接口支持在ArkTS卡片中使用。
color	ResourceColor	设置进度条前景色。 默认值：'#ff007dff' 从API version 9开始，该接口支持在ArkTS卡片中使用。
backgroundColor	ResourceColor	设置进度条底色。 默认值：'#19182431' 从API version 9开始，该接口支持在ArkTS卡片中使用。
style8+	{ strokeWidth?: Length, scaleCount?: number, scaleWidth?: Length }	定义组件的样式。 - strokeWidth: 设置进度条宽度（不支持百分比设置）。从API version9开始，环形进度条设置宽度大于等于半径时，默认修改宽度至半径值的二分之一。 默认值：4.0Vp - scaleCount: 设置环形进度条总刻度数。 默认值：120 - scaleWidth: 设置环形进度条刻度粗细（不支持百分比设置），刻度粗细大于进度条宽度时，为系统默认粗细。 默认值：2.0Vp 从API version 9开始，该接口支持在ArkTS卡片中使用。

示例

@Entry
@Component
struct APage {
  build() {
    Column() {
      Slider({
        value: 50,
        min: 0,
        max: 100,
        step: 10,
        style: SliderStyle.InSet,
        direction: Axis.Horizontal,
        reverse: false
      })

      Progress({
        value: 10,
        total: 100,
        type: ProgressType.ScaleRing
      })
        .style({
          strokeWidth: 100,
          scaleCount: 20,
          scaleWidth: 2
        })
    }
    .width("100%")
    .height("100%")
  }
}