灯的控制-鸿蒙ArkTS

最新推荐文章于 2025-12-22 21:11:19 发布

shihui2003

最新推荐文章于 2025-12-22 21:11:19 发布

阅读量395

点赞数 1

CC 4.0 BY-SA版权

文章标签： harmonyos 华为

本文链接：https://blog.youkuaiyun.com/shihui2003/article/details/139550694

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

2 篇文章

订阅专栏

这篇博客介绍了如何在鸿蒙系统中使用ArkTS语言实现灯的控制，包括开关灯和调节亮度。内容涵盖了组件属性和滑动条的使用，并提供了运行效果图和源码供参考。

1.功能
可实现灯的开灯、关灯和亮度调节。
2.相关知识
学习组件属性、滑动条的使用。
3.运行效果图
可控灯

4.源码
@Entry
@Component
struct MainPage {
@State lightState:boolean=false
@State lightValue:number=50
build() {
Column({ space: 5 }) {
Stack(){
Image( $r("app.media.lightOff")).width('100vp').height('170vp').margin({top:30}) Image(this.lightState?$ r(“app.media.lightOn”):$r(“app.media.lightOff”))
.width(‘100vp’).height(‘170vp’).margin({top:30}).opacity(this.lightValue/100)
}

  Text(this.lightState?'关灯':'开灯').fontSize(26).fontColor(0x000000)
    .onClick(()=>{this.lightState=!this.lightState})
  Row() {
    Text("0").fontSize(20)
    Slider({
      value: this.lightValue, min: 0,max: 100,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.lightValue = value})
    Text("100").fontSize(20)
  }
}.width('100%').height('100%')

}
}