灯的控制-鸿蒙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{(}^{\prime }100v{p}^{\prime }).height{(}^{\prime }170v{p}^{\prime }).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%')

}
}