SliderETS（鸿蒙Demo）_slider_structer

---

Slider组件

滑动条组件的基本使用

• 设置属性
• 添加事件 onChange
• 控制文本框显示

效果

代码

index.ets

@Entry
@Component
struct Index {
  @State value: number = 10

  build() {
    Row() {
      Column() {
        Text("数值：" + this.value.toFixed(0))
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .margin({ top: 50 })
        Slider({
          value: this.value,
          min: 0,
          max: 20,
          step: 2,
          style: SliderStyle.InSet,
          direction: Axis.Vertical,
          reverse: true
        })
          .showSteps(true)
          .showTips(true)
          .blockColor(Color.Red)
          .trackColor(Color.Grey)
          .selectedColor(Color.Orange)
          .trackThickness(50)
          .margin({ top: 50 })
          .onChange((value) => {
            this.value = value
          })
      }
      .width('100%')
    }
    .height('80%')
  }
}
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

API参考

Slider-ETS API参考

---

风车功能实现

实现功能：使用滑动条，控制风车的速度和大小。
组件：Image、Text、Slider。
效果如下：

基本构成

按照ETS的风格，页面只有一个文件。

• index.ets

Previewer展示效果

代码

index.ets

@Entry
@Component
struct Index {
  @State private angle: number = 0
  @State private imageSize: number = 1.0
  @State private speed: number = 5
  @State private interval: number = 0

  @Builder
  DescribeText(text: string) {
    Column() {
      Text(text)
        .margin({ top: 30 })
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
    }
  }

  build() {
    Row() {
      Column() {
        Image($rawfile("windmill.png"))
          .objectFit(ImageFit.Contain)
          .height(150)
          .width(150)
          .rotate({ x: 0, y: 0, z: 1, angle: this.angle })
          .scale({ x: this.imageSize, y: this.imageSize })

        this.DescribeText('速度：' + this.speed.toFixed(1))

        Slider({
          value: this.speed,
          min: 1,
          max: 10,
          step: 1,
          style: SliderStyle.InSet
        })
          .showTips(true)
          .blockColor(Color.Pink)
          .onChange((value: number) => {
            this.speed = value
          })

        this.DescribeText('缩放大小：' + this.imageSize.toFixed(1))

        Slider({
          value: this.imageSize,
          min: 0.5,
          max: 2.5,
          step: 0.1,
          style: SliderStyle.InSet
        })
          .showTips(true)
          .blockColor(Color.Pink)
          .onChange((value: number) => {
            this.imageSize = value
          })

      }
      .width('100%')
    }
    .height('100%')
  }

  speedChange() {
    var that = this;
    that.angle = 0;
    this.interval = setInterval(function () {
      that.angle += that.speed
    }, 15)
  }

  onPageShow() {
    clearInterval(this.interval)
    this.speedChange()
  }
}
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

风车图片存放位置

图片存放在 rawfile 文件夹中
调用方式

$rawfile("windmill.png")
1

PS

Slider步长设置成小数无效，会默认转成1。
开发环境：DevEco Studio 3.0 Release，SDK的API版本是8。
API8的ETS版，step目前只能设置成整数。暂时还不知道是不是bug，官方论坛上也有同学在提问相同的问题。