HarmonyOS-基础之开关切换案例

需求，点击按钮切换图片

代码：

@Entry // 代表组件的入口 （类装饰器）
@Component // 代表的自定义的组件 -> 组件配置路由 -> 页面
struct Index {

  // 定义响应式数据 （属性装饰器）
  @State isOn: boolean = false;
  @State count: number = 0;

  // build : 书写UI地方
  // 内部子组件只能有一个
  build() {
    // 类组件
    Column({ space: 20 }) { // 一列
      // 第一行
      Row() {
        Text(`这是第一行,count：${this.count}`).fontSize(20)
        Image(this.isOn ? $r('app.media.avatar') : $r('app.media.pig')).height(200)
      }.width('100%')
      // 第二行
      Row() {
        // Text('这是第二行')
        // Image($r('app.media.pig')).height(200)
        Button('开灯').margin({ right: 20 }).onClick(() => {
          console.log('开灯')
          this.isOn = true
          this.count ++
        })
        Button('关灯').margin({ left: 10 }).onClick(() => {
          console.log('关灯')
          this.isOn = false
          this.count --
        })
      }.width('100%').justifyContent(FlexAlign.Center)
    }.width('100%')
  }
}