鸿蒙应用开发从入门到实战（十三）：ArkUI组件Slider&Progress
大家好，我是潘Sir，持续分享IT技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注！ArkUI提供了丰富的系统组件，用于制作鸿蒙原生应用APP的UI，本文主要讲解滑块Slider和进度条Progress组件的使用。
一、滑块Slider
1.1 概述
滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。
1.2 参数
Slider组件的参数定义如下
Slider(options?: {value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean})从API version 9开始，该接口支持在ArkTS卡片中使用。
参数说明：
参数名参数类型必填参数描述valuenumber否当前进度值。默认值：0minnumber否设置最小值。默认值：0maxnumber否设置最大值。默认值：100说明：min >= max异常情况，min取默认值0，max取默认值100。value不在范围之内，取min/max，靠近min取min，靠近max取max。stepnumber否设置Slider滑动步长。默认值：1取值范围：说明：设置小于0或百分比的值时，按默认值显示。styleSliderStyle否设置Slider的滑块与滑轨显示样式。默认值：SliderStyle.OutSetdirectionAxis否设置滑动条滑动方向为水平或竖直方向。默认值：Axis.Horizontalreverseboolean否设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。默认值：falseSliderStyle枚举说明
名称描述OutSet滑块在滑轨上。InSet滑块在滑轨内。1.3 常用属性
支持除触摸热区以外的通用属性设置。
名称参数类型描述blockColorResourceColor设置滑块的颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。trackColorResourceColor设置滑轨的背景颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。selectedColorResourceColor设置滑轨的已滑动部分颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。showStepsboolean设置当前是否显示步长刻度值。默认值：false从API version 9开始，该接口支持在ArkTS卡片中使用。showTipsboolean设置滑动时是否显示百分比气泡提示。默认值：false从API version 9开始，该接口支持在ArkTS卡片中使用。说明：当direction的属性值为Axis.Horizontal时，tip显示在滑块正上方。值为Axis.Vertical时，tip显示在滑块正左边。tip的绘制区域为Slider自身节点的overlay。Slider不设置边距，或者边距比较小时，tip会被截断。trackThicknessLength设置滑轨的粗细。默认值：当参数style的值设置SliderStyle.OutSet 时为 4.0vp，SliderStyle.InSet时为20.0vp。从APIversion9开始，该接口支持在ArkTS卡片中使用。说明：设置为小于0的值时，按默认值显示。1.4 事件
通用事件仅支持挂载卸载事件：OnAppear，OnDisAppear。
名称功能描述onChange(callback: (value: number, mode: SliderChangeMode) => void)Slider滑动时触发事件回调。value：当前滑动进度值。若返回值有小数，可使用number.toFixed()方法将数据处理为预期的精度。mode：拖动状态。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：Begin和End状态当手势点击时都会触发，Moving和Click状态当value值发生变换时触发。当连贯动作为拖动动作时，不触发Click状态。value值的变化范围为对应步长steps数组。SliderChangeMode枚举说明
名称值描述Begin0手势/鼠标接触或者按下滑块。Moving1正在拖动滑块过程中。End2手势/鼠标离开滑块。Click3点击滑动条使滑块位置移动。1.5 案例
component目录下新建slider目录，新建SliderPage.ets文件
@Entry
@Component
struct SliderPage {
@State imgWidth: number = 10
build() {
Column({ space: 150 }) {
Slider({
min: 100,
max: 300,
value: this.imgWidth,
step: 10,
})
.width('90%')
.blockColor('#36D')
.trackThickness(5)
.showTips(true)
.onChange((value,mode)=>{
console.log(value.toString());
console.log(mode.toString());
})
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}二、进度条Progress
2.1 概述
Progress为进度条组件，用于显示各种进度。
2.2 参数
Progress组件的参数定义如下
Progress(options: {value: number, total?: number, type?: ProgressType})
[*]value
value属性用于设置当前进度值。
[*]total
total属性用于设置总值。
[*]type
type属性用于设置进度条类型，可通过ProgressType枚举类型进行设置，可选的枚举值如下
名称描述效果ProgressType.Linear线性样式ProgressType.Ring环形无刻度样式ProgressType.Eclipse月食样式ProgressType.ScaleRing环形有刻度样式ProgressType.Capsule胶囊样式示例代码：
component目录下新建progress目录，新建ProgressParameter.ets文件
@Entry
@Component
struct ProgressParameter {
@State value: number = 30;
@State total: number = 100;
build() {
Column({ space: 50 }) {
Progress({ value: this.value, total: this.total, type: ProgressType.Linear })
Progress({ value: this.value, total: this.total, type: ProgressType.Ring })
Progress({ value: this.value, total: this.total, type: ProgressType.Eclipse })
Progress({ value: this.value, total: this.total, type: ProgressType.ScaleRing })
Progress({ value: this.value, total: this.total, type: ProgressType.Capsule })
.width(50)
.height(200)
//分隔线
Divider()
Row({ space: 50 }) {
Button('进度-1')
.onClick(() => {
if (this.value > 0) {
this.value--;
}
})
Button('进度+1')
.onClick(() => {
if (this.value < this.total) {
this.value++;
}
})
}
}.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}2.3 常用属性
2.3.1 进度条样式
可通过style()调整进度条的样式，例如进度条的宽度，该方法的参数类型定义如下
style({strokeWidth?: string|number|Resource,scaleCount?: number,scaleWidth?: string|number|Resource})
[*]strokeWidth
strokeWidth属性用于设置进度条的宽度，默认值为4vp。该属性可用于Linear、Ring、ScaleRing三种类型，效果如下
[*]scaleCount
scaleCount属性用于设置ScaleRing的刻度数，默认值为120。效果如下
[*]scaleWidth
scaleCount属性用于设置ScaleRing的刻度线的宽度，默认值为2vp。效果如下
示例代码：
在progress目录下新建ProgressAttributePage.ets文件
@Entry
@Component
// 进度条progress样式 style（）
struct ProgressAttributePage {
build() {
Column({ space: 50 }) {
// strokeWidth属性用于设置进度条的宽度，默认值为4vp
// scaleCount属性用于设置ScaleRing的刻度数，默认值为120
// scaleCount属性用于设置ScaleRing的刻度线的宽度，默认值为2vp
Progress({ value: 30, total: 100, type: ProgressType.Linear })
.style({
strokeWidth: 20
})
Progress({ value: 30, total: 100, type: ProgressType.Ring })
.style({
strokeWidth: 20
})
Progress({ value: 30, total: 100, type: ProgressType.ScaleRing })
.style({
strokeWidth: 10,
scaleWidth: 3,
scaleCount: 30
})
}.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}2.3.2 进度条颜色
进度条的颜色可通过color()和backgroundColor()方法进行设置，其中color()用于设置前景色，backgroundColor()用于设置背景色，例如
示例代码：
在progress目录下新建ProgressColor.ets文件
@Entry
@Component
// 进度条progress颜色
struct ProgressColor {
build() {
Column({ space: 50 }) {
// 进度条的颜色可通过color()和backgroundColor()方法进行设置，
// 其中color()用于设置前景色，backgroundColor()用于设置背景色
Progress({ value: 30, total: 100, type: ProgressType.Linear })
.color(Color.Green)
.backgroundColor("#26008000")
Progress({ value: 30, total: 100, type: ProgressType.Ring })
.color(Color.Green)
.backgroundColor("#26008000")
Progress({ value: 30, total: 100, type: ProgressType.Eclipse })
.color(Color.Green)
.backgroundColor("#26008000")
Progress({ value: 30, total: 100, type: ProgressType.ScaleRing })
.color(Color.Green)
.backgroundColor("#26008000")
Progress({ value: 30, total: 100, type: ProgressType.Capsule })
.width(200)
.color(Color.Green)
.backgroundColor("#26008000")
}.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 感谢分享，学习下。 东西不错很实用谢谢分享 过来提前占个楼 喜欢鼓捣这些软件，现在用得少，谢谢分享！ 感谢分享，学习下。 这个好，看起来很实用
页:
[1]