摘要
作者：红目香薰
团队：坚果派
团队介绍：坚果派由坚果创建，团队拥有12个华为HDE以及若干其他领域的三十余位万粉博主运营。
Slider
滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。
接口
Slider(options?:{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean})
参数：
参数名 |
参数类型 |
必填 |
参数描述 |
value |
number |
否 |
当前进度值。 默认值：0 |
min |
number |
否 |
设置最小值。 默认值：0 |
max |
number |
否 |
设置最大值。 默认值：100 |
step |
number |
否 |
设置滑动条滑动步长。 默认值：1 |
style |
SliderStyle |
否 |
设置滑动条的滑块样式。 默认值：SliderStyle.OutSet |
direction8+ |
Axis |
否 |
设置滑动条滑动方向为水平或竖直方向。 默认值：Axis.Horizontal |
reverse8+ |
boolean |
否 |
设置滑动条取值范围是否反向。 说明：设置为false时，水平方向滑动条为从左向右滑动，竖直方向滑动条从上向下滑动，设置为true时，水平方向滑动条为从右向左滑动，竖直方向滑动条从下向上滑动。 默认值：false |
SliderStyle枚举说明
名称 |
描述 |
OutSet |
滑块在滑轨上。 |
InSet |
滑块在滑轨内。 |
属性
不支持触摸热区设置。
名称 |
参数类型 |
描述 |
blockColor |
ResourceColor |
设置滑块的颜色。 |
trackColor |
ResourceColor |
设置滑轨的背景颜色。 |
selectedColor |
ResourceColor |
设置滑轨的已滑动颜色。 |
showSteps |
boolean |
设置当前是否显示步长刻度值。 默认值：false |
showTips |
boolean |
设置滑动时是否显示气泡提示百分比。 默认值：false |
trackThickness |
Length |
设置滑轨的粗细。 |
maxLabel |
string |
设置最大标签。 |
minLabel |
string |
设置最小标签。 |
事件
通用事件仅支持：OnAppear，OnDisAppear。
名称 |
功能描述 |
onChange(callback: (value: number, mode: SliderChangeMode) => void) |
Slider滑动时触发事件回调。 value：当前进度值。 mode：拖动状态。 |
SliderChangeMode枚举说明
名称 |
值 |
描述 |
Begin |
0 |
用户开始拖动滑块。 |
Moving |
1 |
用户拖动滑块中。 |
End |
2 |
用户结束拖动滑块。 |
Click |
3 |
用户点击滑动条使滑块位置移动。 |
代码示例
@Entry
@Component
struct Index {
@State outSetValueOne: number = 40;
@State inSetValueOne: number = 40;
@State outSetValueTwo: number = 40;
@State inSetValueTwo: number = 40;
@State vOutSetValueOne: number = 40;
@State vInSetValueOne: number = 40;
@State vOutSetValueTwo: number = 40;
@State vInSetValueTwo: number = 40;
build() {
Column({ space: 8 }) {
Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
Row() {
Slider({
value: this.outSetValueOne,
min: 0,
max: 100,
style: SliderStyle.OutSet
})
.showTips(true)
.onChange((value: number, mode: SliderChangeMode) => {
this.outSetValueOne = value;
console.info('value:' + value + 'mode:' + mode.toString());
})
// toFixed(0)将滑动条返回值处理为整数精度
Text(this.outSetValueOne.toFixed(0)).fontSize(12)
}
.width('80%')
Row() {
Slider({
value: this.outSetValueTwo,
step: 10,
style: SliderStyle.OutSet
})
.showSteps(true)
.onChange((value: number, mode: SliderChangeMode) => {
this.outSetValueTwo = value;
console.info('value:' + value + 'mode:' + mode.toString());
})
Text(this.outSetValueTwo.toFixed(0)).fontSize(12)
}
.width('80%')
Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
Row() {
Slider({
value: this.inSetValueOne,
min: 0,
max: 100,
style: SliderStyle.InSet
})
.blockColor('#191970')
.trackColor('#ADD8E6')
.selectedColor('#4169E1')
.showTips(true)
.onChange((value: number, mode: SliderChangeMode) => {
this.inSetValueOne = value;
console.info('value:' + value + 'mode:' + mode.toString());
})
Text(this.inSetValueOne.toFixed(0)).fontSize(12)
}
.width('80%')
Row() {
Slider({
value: this.inSetValueTwo,
step: 10,
style: SliderStyle.InSet
})
.blockColor('#191970')
.trackColor('#ADD8E6')
.selectedColor('#4169E1')
.showSteps(true)
.onChange((value: number, mode: SliderChangeMode) => {
this.inSetValueTwo = value;
console.info('value:' + value + 'mode:' + mode.toString());
})
Text(this.inSetValueTwo.toFixed(0)).fontSize(12)
}
.width('80%')
Row() {
Column() {
Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
Row() {
Slider({
value: this.vOutSetValueOne,
style: SliderStyle.OutSet,
direction: Axis.Vertical
})
.blockColor('#191970')
.trackColor('#ADD8E6')
.selectedColor('#4169E1')
.showTips(true)
.onChange((value: number, mode: SliderChangeMode) => {
this.vOutSetValueOne = value;
console.info('value:' + value + 'mode:' + mode.toString());
})
Slider({
value: this.vOutSetValueTwo,
step: 10,
style: SliderStyle.OutSet,
direction: Axis.Vertical
})
.blockColor('#191970')
.trackColor('#ADD8E6')
.selectedColor('#4169E1')
.showSteps(true)
.onChange((value: number, mode: SliderChangeMode) => {
this.vOutSetValueTwo = value;
console.info('value:' + value + 'mode:' + mode.toString());
})
}
}.width('50%').height(300)
Column() {
Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
Row() {
Slider({
value: this.vInSetValueOne,
style: SliderStyle.InSet,
direction: Axis.Vertical,
reverse: true // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为true
})
.showTips(true)
.onChange((value: number, mode: SliderChangeMode) => {
this.vInSetValueOne = value;
console.info('value:' + value + 'mode:' + mode.toString());
})
Slider({
value: this.vInSetValueTwo,
step: 10,
style: SliderStyle.InSet,
direction: Axis.Vertical,
reverse: true
})
.showSteps(true)
.onChange((value: number, mode: SliderChangeMode) => {
this.vInSetValueTwo = value;
console.info('value:' + value + 'mode:' + mode.toString());
})
}
}.width('50%').height(300)
}
}.width('100%')
}
}
实际效果：
