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%')
}
}
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()
}
}
风车图片存放位置
图片存放在 rawfile 文件夹中
调用方式
$rawfile("windmill.png")
PS
Slider步长设置成小数无效,会默认转成1。
开发环境:DevEco Studio 3.0 Release,SDK的API版本是8。
API8的ETS版,step目前只能设置成整数。暂时还不知道是不是bug,官方论坛上也有同学在提问相同的问题。