需求,点击按钮切换图片

代码:

@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%')
  }
}
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。