【练习】使用DevEco Studio编写点赞案例

效果展示

效果说明

如果当前处于未点赞状态，那么点击将点赞数+1，并且颜色变为粉色；如果当前已经处于点赞状态，那么点击点赞按钮，点赞数-1，并且颜色恢复为最初的颜色。

知识点

点击交互事件onClick

http://t.csdnimg.cn/KkxaHhttp://t.csdnimg.cn/KkxaH

状态变量

http://t.csdnimg.cn/KkxaHhttp://t.csdnimg.cn/KkxaH

代码展示

@Entry
@Component
struct Index {
  @State num: number = 8888;
  @State color: string = "#777"
  @State isLike: boolean = false

  build() {
    Column() {
      Column() {
        Image($r("app.media.eyes"))
          .width("100%")
          .borderRadius({ topLeft: 15, topRight: 15 })
        Column({ space: 10 }) {
          Text("考眼力又来了你能看到几只鸭子？")
          Row() {
            Image($r("app.media.avatar"))
              .margin({ right: 5 })
              .width(30)
            Text("视野联航眼睛")
              .fontColor("#777")
              .fontSize(14)
              .layoutWeight(1)
            Image($r("app.media.ic_love"))
              .width(20)
              .fillColor(this.color)
              .onClick(() => {
                this.isLike = !this.isLike
                if (this.isLike) {
                  this.num++
                  this.color = "#F57792"
                } else {
                  this.num--
                  this.color = "#777"
                }
                console.log(this.isLike.toString(), this.color)
              })
            Text(this.num.toString())
              .fontColor(this.color)
              .fontSize(14)
          }
          .width("100%")
        }
        .padding(10)
      }
      .borderRadius(15)
      .width(200)
      .backgroundColor("#fff")

    }
    .padding(20)
    .height("100%")
    .width("100%")
    .backgroundColor("#ccc")
  }
}