风扇控制-鸿蒙ArkTS

shihui2003

已于 2024-06-08 20:25:34 修改

阅读量36

点赞数

分类专栏：鸿蒙与物联网文章标签： harmonyos 服务器华为

于 2024-06-08 19:50:57 首次发布

本文链接：https://blog.csdn.net/shihui2003/article/details/139550464

版权

鸿蒙与物联网专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在鸿蒙系统中使用ArkTS语言实现风扇的正转、暂停、反转和调速控制功能。内容包括定时器、组件属性和滑动条的运用，并展示了运行效果图。

摘要由CSDN通过智能技术生成

1.功能
可实现风扇的正转、暂停、反转和调速控制。
2.相关知识
学习定时器、组件属性、滑动条的使用。
3.运行效果图
可控风扇
4.源码
@Entry
@Component
struct MainPage {
@State angleA: number = 0
@State intervalId: number = -123456;
@State dir: number = 1;
@State N: number = 1
@State lightState: boolean = false
@State focus:number=1
startTimer(): void {
this.intervalId = setInterval(() => {
if (this.dir == 1) this.angleA = this.angleA;
if (this.dir == 0) this.angleA = this.angleA + this.N;
if (this.dir == 2) this.angleA = this.angleA - this.N;
}, 10);
}

build() {
Column({ space: 5 }) {
Image($rawfile(“fan.png”))
.width(‘200vp’)
.height(‘200vp’)
.margin({ top: 30 })
.rotate({ // 中心旋转
x: 0, y: 0, z: 1,
angle: this.angleA,
})
.onAppear(() => {
this.startTimer()
})
Row() {
Text(“正转”).fontSize(‘30fp’).fontColor(this.focus0?‘#ff0000’: ‘#ff0b0c0b’)
.width(‘20%’).onClick(() => {
this.dir = 0
this.focus=0
})
Text(“停止”).fontSize(‘30fp’).fontColor(this.focus1?‘#ff0000’:‘#ff0b0c0b’)
.width(‘20%’).onClick(() => {
this.dir = 1
this.focus=1
})
Text(“反转”).fontSize(‘30fp’).fontColor(this.focus==2?‘#ff0000’:‘#ff0b0c0b’)
.width(‘20%’).onClick(() => {
this.dir = 2
this.focus=2
})
}.justifyContent(FlexAlign.SpaceEvenly)

  Row() {
    Text("0").fontSize(20)
    Slider({
      value: this.N,
      min: 0,
      max: 10,
      step: 1,
      style: SliderStyle.OutSet,
      direction: Axis.Horizontal,
      reverse: false
    })
      .width('80%')
      .height(40)
      .backgroundColor("#ffcbcbcf")
      .blockColor(Color.Red)// 设置滑块颜色
      .trackColor(Color.Pink)// 设置滑轨颜色
      .selectedColor(Color.Red)// 设置滑轨的已滑动颜色
      .trackThickness(6)// 设置滚动条宽度
      .onChange((value: number) => {
        this.N = value
      })
    Text("10").fontSize(20)
  }
}.backgroundColor("#ccff33").height('100%').width('100%')

}
}