From 0e85d3715c8c89deca063d14c9ae4f9a1f7733ea Mon Sep 17 00:00:00 2001 From: luoying_ace Date: Tue, 11 Oct 2022 07:22:32 +0000 Subject: [PATCH] update zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md. Signed-off-by: luoying_ace --- .../arkui-ts/ts-basic-components-slider.md | 211 +++++++++++------- 1 file changed, 128 insertions(+), 83 deletions(-) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md index 0aa1c8aced..80ff26bdd4 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md @@ -1,6 +1,6 @@ # Slider -滑动条组件，用来快速调节设置值，如音量、亮度等。 +滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。 > **说明：** > @@ -23,10 +23,10 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty | value | number | 否 | 当前进度值。
默认值：0 | | min | number | 否 | 设置最小值。
默认值：0 | | max | number | 否 | 设置最大值。
默认值：100 | -| step | number | 否 | 设置Slider滑动跳动值，当设置相应的step时，Slider为间歇滑动。
默认值：1 | -| style | SliderStyle | 否 | 设置Slider的滑块样式。
默认值：SliderStyle.OutSet | +| step | number | 否 | 设置Slider滑动步长。
默认值：1 | +| style | SliderStyle | 否 | 设置Slider的滑块与滑轨显示样式。
默认值：SliderStyle.OutSet | | direction8+ | [Axis](ts-appendix-enums.md#axis) | 否 | 设置滑动条滑动方向为水平或竖直方向。
默认值：Axis.Horizontal | -| reverse8+ | boolean | 否 | 设置滑动条取值范围是否反向。
默认值：false | +| reverse8+ | boolean | 否 | 设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。
默认值：false | ## SliderStyle枚举说明 @@ -38,34 +38,34 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty ## 属性 -不支持触摸热区设置。 +支持除触摸热区以外的通用属性设置。 | 名称 | 参数类型 | 描述 | | -------- | -------- | -------- | | blockColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑块的颜色。 | | trackColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑轨的背景颜色。 | -| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑轨的已滑动颜色。 | +| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑轨的已滑动部分颜色。 | | showSteps | boolean | 设置当前是否显示步长刻度值。
默认值：false | -| showTips | boolean | 设置滑动时是否显示气泡提示百分比。
默认值：false | +| showTips | boolean | 设置滑动时是否显示百分比气泡提示。
默认值：false | | trackThickness | [Length](ts-types.md#length) | 设置滑轨的粗细。 | ## 事件 -通用事件仅支持：OnAppear，OnDisAppear。 +通用事件仅支持挂载卸载事件：OnAppear，OnDisAppear。 | 名称 | 功能描述 | | -------- | -------- | -| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Slider滑动时触发事件回调。
value：当前进度值。若返回值有小数，可使用Math.toFixed()将数据处理为想要的精度。
mode：拖动状态。 | +| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Slider滑动时触发事件回调。
value：当前滑动进度值。若返回值有小数，可使用Math.toFixed()方法将数据处理为预期的精度。
mode：拖动状态。 | ## SliderChangeMode枚举说明 | 名称 | 值 | 描述 | | -------- | -------- | -------- | -| Begin | 0 | 用户开始拖动滑块。 | -| Moving | 1 | 用户拖动滑块中。 | -| End | 2 | 用户结束拖动滑块。 | -| Click | 3 | 用户点击滑动条使滑块位置移动。 | +| Begin | 0 | 开始拖动滑块。 | +| Moving | 1 | 正在拖动滑块过程中。 | +| End | 2 | 结束拖动滑块。 | +| Click | 3 | 点击滑动条使滑块位置移动。 | ## 示例 @@ -75,105 +75,150 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty @Entry @Component struct SliderExample { - @State outSetValue: number = 40 - @State inSetValue: number = 40 - @State outVerticalSetValue: number = 40 - @State inVerticalSetValue: number = 40 + @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: 5 }) { - Text('slider out set').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column({ space: 8 }) { + Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) Row() { Slider({ - value: this.outSetValue, + value: this.outSetValueOne, min: 0, max: 100, - step: 1, style: SliderStyle.OutSet }) - .blockColor(Color.Blue) - .trackColor(Color.Gray) - .selectedColor(Color.Blue) - .showSteps(true) - .showTips(true) - .onChange((value: number, mode: SliderChangeMode) => { - this.outSetValue = value - console.info('value:' + value + 'mode:' + mode.toString()) + .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 }) - Text(this.outSetValue.toFixed(0)).fontSize(16) + .showSteps(true) + .onChange((value: number, mode: SliderChangeMode) => { + this.outSetValueTwo = value; + console.info('value:' + value + 'mode:' + mode.toString()); + }) + Text(this.outSetValueTwo.toFixed(0)).fontSize(12) } - .padding({ top: 50 }) .width('80%') - Text('slider in set').fontSize(9).fontColor(0xCCCCCC).width('90%') + Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) Row() { Slider({ - value: this.inSetValue, + value: this.inSetValueOne, min: 0, max: 100, - step: 1, style: SliderStyle.InSet }) - .blockColor(0xCCCCCC) - .trackColor(Color.Black) - .selectedColor(0xCCCCCC) - .showSteps(false) - .showTips(false) - .onChange((value: number, mode: SliderChangeMode) => { - this.inSetValue = value - console.info('value:' + value + 'mode:' + mode.toString()) - }) - Text(this.inSetValue.toFixed(0)).fontSize(16) + .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() { - Column() { - Text('slider out direction set').fontSize(9).fontColor(0xCCCCCC).width('50%') - Slider({ - value: this.outVerticalSetValue, - min: 0, - max: 100, - step: 1, - style: SliderStyle.OutSet, - direction: Axis.Vertical - }) - .blockColor(Color.Blue) - .trackColor(Color.Gray) - .selectedColor(Color.Blue) + Slider({ + value: this.inSetValueTwo, + step: 10, + style: SliderStyle.InSet + }) + .blockColor('#191970') + .trackColor('#ADD8E6') + .selectedColor('#4169E1') .showSteps(true) - .showTips(true) .onChange((value: number, mode: SliderChangeMode) => { - this.outVerticalSetValue = value - console.info('value:' + value + 'mode:' + mode.toString()) + this.inSetValueTwo = value; + console.info('value:' + value + 'mode:' + mode.toString()); }) - Text(this.outVerticalSetValue.toFixed(0)).fontSize(16) + 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('slider in direction set').fontSize(9).fontColor(0xCCCCCC).width('50%') - Slider({ - value: this.inVerticalSetValue, - min: 0, - max: 100, - step: 1, - style: SliderStyle.InSet, - direction: Axis.Vertical - }) - .blockColor(0xCCCCCC) - .trackColor(Color.Black) - .selectedColor(0xCCCCCC) - .showSteps(false) - .showTips(false) - .onChange((value: number, mode: SliderChangeMode) => { - this.inVerticalSetValue = value - console.info('value:' + value + 'mode:' + mode.toString()) - }) - Text(this.inVerticalSetValue.toFixed(0)).fontSize(16) + 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%').margin({ top: 5 }) + }.width('100%') } } ``` -- GitLab