3.8 Slider组件原创精华

鸿蒙开发之南拳北腿

发布于 2022-6-21 20:21

9725浏览

2收藏

滑动条组件，用来快速调节设置值，如音量、亮度等。 Slider组件默认宽度为父容器宽度的100%，可自动适配横竖屏切换。Slider组件的接口、属性和事件说明如下：

/**
 * 3.8 Slider组件
 * 滑动条组件，用来快速调节设置值，如音量、亮度等。
 *
 * 接口:
 *  Slider(value:{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle})
 *    value:number 默认值0，当前进度值。
 *    min:number 默认值0，设置最小值。
 *    max:number 默认值100，设置最大值。
 *    step:number 默认值1，设置Slider滑动跳动值，当设置相应的step时，Slider为间歇滑动。
 *    style:SliderStyle 默认值Outset，设置Slider的滑块样式。
 *      SliderStyle.OutSet 滑块在滑轨上。
 *      SliderStyle.InSet 滑块在滑轨内。
 *
 * 属性:
 *  blockColor:Color 设置滑块的颜色。
 *  trackColor:Color 设置滑轨的背景颜色。
 *  selectedColor:Color 设置滑轨的已滑动颜色。
 *  showSteps:boolean 默认值false,设置当前是否显示步长刻度值。
 *  showTips:boolean 默认值false,设置滑动时是否显示气泡提示百分比。
 *
 * 事件:
 *  通用事件仅支持：OnAppear，OnDisAppear。
 *  onChange(callback: (value: number, mode: SliderChangeMode) => void）
 *    Slider滑动时触发事件回调。value：当前进度值。mode：拖动状态。
 *    SliderChangeMode.Begin 用户开始拖动滑块。
 *    SliderChangeMode.Moving 用户拖动滑块中。
 *    SliderChangeMode.End 用户结束拖动滑块。
 */
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

Slider的滑块样式有两种：滑块在滑轨上(默认)或滑轨内。先示范滑块在滑轨上的效果，默认情况下建议将滑块的颜色和滑轨的已滑动颜色设置为宇宙蓝的资源颜色，滑轨的背景颜色设置为控件背景资源颜色，可适配深色模式/浅色模式切换，且符合鸿蒙官方的用色标准。这里演示通过滑块移动调节文字大小的例子，代码如下：

  @State txtSize:number = 16
  ...此处代码省略...
      H8({text:'调节文字大小'})
      Text('鸿蒙开发之南拳北腿').height(60).fontColor($r("app.color.fgLevel1")).fontSize(this.txtSize)
      Slider({
        value: 16, // 默认值0，当前进度值
        min: 10,   // 默认值0，设置最小值
        max: 30,   // 默认值100，设置最大值
        step: 1,   // 默认值1，设置Slider滑动跳动值
        style: SliderStyle.OutSet  // 设置Slider的滑块样式
      })
      .margin({top:20})
      .blockColor($r("app.color.info"))  // 设置滑块的颜色
      .trackColor($r("app.color.controlBg"))  // 设置滑轨的背景颜色
      .selectedColor($r("app.color.info"))  // 设置滑轨的已滑动颜色
      .showSteps(false)  // 设置当前是否显示步长刻度值
      .showTips(true)  // 设置滑动时是否显示气泡提示百分比
      .onChange((value: number, mode: SliderChangeMode) => { // 滑动时触发事件回调
        this.txtSize = value
      })
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

在浅色模式/深色模式、竖屏模式/横屏模式下运行效果如下：

3.8 Slider组件-鸿蒙开发者社区

现在我们演示滑块在滑轨内的效果，将滑轨的背景颜色为透明，模拟一个进度图表的效果。代码如下：

      H8({text:'项目开发进度'})
      Column({space:8}){
        TextBody1({text:'UI设计'})
        Slider({
          value: 95,
          style: SliderStyle.InSet  // 设置Slider的滑块样式
        })
        .blockColor($r("app.color.success"))
        .trackColor('#00000000') // 背景透明
        .selectedColor($r("app.color.success"))
        .enabled(false) // 禁止拖动滑块

        TextBody1({text:'鸿蒙开发'})
        Slider({
          value: 55,
          style: SliderStyle.InSet  // 设置Slider的滑块样式
        })
        .blockColor($r("app.color.warning"))
        .trackColor('#00000000')
        .selectedColor($r("app.color.warning"))

        TextBody1({text:'Java开发'})
        Slider({
          value: 21,
          style: SliderStyle.InSet  // 设置Slider的滑块样式
        })
        .blockColor($r("app.color.danger"))
        .trackColor('#00000000')
        .selectedColor($r("app.color.danger"))
      }
      .padding(8)
      .backgroundColor($r("app.color.controlBg"))
      .alignItems(HorizontalAlign.Start)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

运行效果如下：

3.8 Slider组件-鸿蒙开发者社区

本节完整代码：

import {H8, TextBody1} from './index'

/**
 * 3.8 Slider组件
 * 滑动条组件，用来快速调节设置值，如音量、亮度等。
 *
 * 接口:
 *  Slider(value:{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle})
 *    value:number 默认值0，当前进度值。
 *    min:number 默认值0，设置最小值。
 *    max:number 默认值100，设置最大值
 *    step:number 默认值1，设置Slider滑动跳动值，当设置相应的step时，Slider为间歇滑动。
 *    style:SliderStyle 默认值Outset，设置Slider的滑块样式。
 *      SliderStyle.OutSet 滑块在滑轨上。
 *      SliderStyle.InSet 滑块在滑轨内。
 *
 * 属性:
 *  blockColor:Color 设置滑块的颜色。
 *  trackColor:Color 设置滑轨的背景颜色。
 *  selectedColor:Color 设置滑轨的已滑动颜色。
 *  showSteps:boolean 默认值false,设置当前是否显示步长刻度值。
 *  showTips:boolean 默认值false,设置滑动时是否显示气泡提示百分比。
 *
 * 事件:
 *  通用事件仅支持：OnAppear，OnDisAppear。
 *  onChange(callback: (value: number, mode: SliderChangeMode) => void）
 *    Slider滑动时触发事件回调。value：当前进度值。mode：拖动状态。
 *    SliderChangeMode.Begin 用户开始拖动滑块。
 *    SliderChangeMode.Moving 用户拖动滑块中。
 *    SliderChangeMode.End 用户结束拖动滑块。
 */
@Entry
@Component
struct SliderSample {
  @State txtSize:number = 16
  build() {
    Column({space:8}) {
      // 返回首页
      Row({space:8}){
        Image($r("app.media.ic_back")).width(24).height(24)

        Navigator({ target: 'pages/index', type: NavigationType.Back }) {
          H8({text:'返回'})
        }
      }

      H8({text:'调节文字大小'})
      Text('鸿蒙开发之南拳北腿').height(60).fontColor($r("app.color.fgLevel1")).fontSize(this.txtSize)
      Slider({
        value: 16, // 默认值0，当前进度值
        min: 10,   // 默认值0，设置最小值
        max: 30,   // 默认值100，设置最大值
        step: 1,   // 默认值1，设置Slider滑动跳动值
        style: SliderStyle.OutSet  // 设置Slider的滑块样式
      })
      .margin({top:20})
      .blockColor($r("app.color.info"))  // 设置滑块的颜色
      .trackColor($r("app.color.controlBg"))  // 设置滑轨的背景颜色
      .selectedColor($r("app.color.info"))  // 设置滑轨的已滑动颜色
      .showSteps(false)  // 设置当前是否显示步长刻度值
      .showTips(true)  // 设置滑动时是否显示气泡提示百分比
      .onChange((value: number, mode: SliderChangeMode) => { // 滑动时触发事件回调
        this.txtSize = value
      })

      H8({text:'项目开发进度'})
      Column({space:8}){
        TextBody1({text:'UI设计'})
        Slider({
          value: 95,
          style: SliderStyle.InSet  // 设置Slider的滑块样式
        })
        .blockColor($r("app.color.success"))
        .trackColor('#00000000') // 背景透明
        .selectedColor($r("app.color.success"))
        .enabled(false) // 禁止拖动滑块

        TextBody1({text:'鸿蒙开发'})
        Slider({
          value: 55,
          style: SliderStyle.InSet
        })
        .blockColor($r("app.color.warning"))
        .trackColor('#00000000')
        .selectedColor($r("app.color.warning"))
        .enabled(false)

        TextBody1({text:'Java开发'})
        Slider({
          value: 21,
          style: SliderStyle.InSet  // 设置Slider的滑块样式
        })
        .blockColor($r("app.color.danger"))
        .trackColor('#00000000')
        .selectedColor($r("app.color.danger"))
        .enabled(false)
      }
      .padding(8)
      .backgroundColor($r("app.color.controlBg"))
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .height('100%')
    .padding({top: $r("app.float.spaceTop"), bottom:$r("app.float.spaceBottom"), left:$r("app.float.spaceLeft"), right: $r("app.float.spaceRight")})
    .backgroundColor($r("app.color.appBg"))
    .alignItems(HorizontalAlign.Start)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.