HormonyO实现一个评论列表点赞案例（@observed&@ObjectLink）

黎明寄波澜*

已于 2024-08-15 10:59:19 修改

阅读量211

点赞数 1

文章标签：前端 harmonyos 华为 typescript

于 2024-08-15 10:57:13 首次发布

本文链接：https://blog.csdn.net/weixin_55209970/article/details/141216733

版权

interface userInfo {
  name: string,
  desc: string,
  id: number,
  likeCount: number
}

@Observed
export class userInfoModel implements userInfo {
  name: string = ''
  desc: string = ''
  id: number = 0
  likeCount: number = 0

  constructor(model: userInfo) {
    this.name = model.name
    this.desc = model.desc
    this.id = model.id
    this.likeCount = model.likeCount
  }
}

@Component
struct getZhiItem {
  @ObjectLink item: userInfoModel
  @State HeightLight: boolean = false

  build() {


    Row({ space: 20 }) {
      Image($r('app.media.girl'))
        .width(50)
        .height(50)
        .margin({ bottom: 60 })

      Column() {
        Text(this.item.name)
          .textAlign(TextAlign.Start)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)

          .width('100%')
          .margin({ bottom: 10 })

        Text(this.item.desc)
          .width('100%')
          .margin({ bottom: 10 })

        Row() {
          Text(
            '10-21 . IP属地北京'
          ).fontColor('#ccc')
            .fontSize(14)
          Row() {
            Image($r('app.media.love'))
              .width(10)
              .fillColor(this.HeightLight ? Color.Red : '#ccc')
            Text(this.item.likeCount.toString())
              .fontColor(this.HeightLight ? Color.Red : '#ccc')
              .fontSize(14)

          }
          .margin({
            top: 10
          })
          .onClick(() => {
            if (this.HeightLight) {
              this.item.likeCount -= 1
              this.HeightLight = false

            } else {

              this.HeightLight = true
              this.item.likeCount += 1
            }

          })
        }


        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)

      }
      .layoutWeight(1)
      .width('100%')

    }
    .padding(20)
    .width('100%')
    .width('100%')

  }
}

@Entry
@Component
struct Zhihu {
  // 定义一个数据结构
  @State zhiList: userInfoModel[] = [new userInfoModel({
    name: '直接路1',
    desc: 'fgkjgilkfdjg',
    id: 1,
    likeCount: 10
  }), new userInfoModel({
    name: '直接路2',
    desc: 'fgkjgilkfdjg2',
    id: 2,
    likeCount: 20
  }), new userInfoModel({
    name: '直接路3',
    desc: 'fgkjgilkfdjg',
    id: 3,
    likeCount: 30
  }), new userInfoModel({
    name: '直接路4',
    desc: 'fgkjgilkfdjg',
    id: 4,
    likeCount: 40
  })]

  build() {
    Column() {
      Row() {

        Row() {
          Image($r('app.media.ic_public_back'))
            .width(16)
            .height(16)

        }
        .width(30)
        .height(30)
        .backgroundColor('#f4f4f4')
        .borderRadius(15)
        .justifyContent(FlexAlign.Center)
        .margin({
          left: 20
        })


        Text('评论回复')
          .layoutWeight(1)
          .textAlign(TextAlign.Center)
          .margin({
            right: 50
          })

      }
      .width('100%')
      .height(50)
      .border({
        color: '#f4f5f6',
        width: {
          bottom: 1
        }
      })


      Row({ space: 20 }) {
        Image($r('app.media.girl'))
          .width(50)
          .height(50)
          .margin({ bottom: 60 })

        Column() {
          Text('周杰伦')
            .textAlign(TextAlign.Start)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)

            .width('100%')
            .margin({ bottom: 10 })

          Text('sdjfjsdhfl都说了风寒咳嗽绝代风华立卡说法收到货覅接收方式是否可见阿萨法')
          Row() {
            Text(
              '10-21 . IP属地北京'
            ).fontColor('#ccc')
              .fontSize(14)
            Row() {
              Image($r('app.media.love'))
                .width(10)
                .fillColor('#ccc')
              Text('100')
                .fontColor('#ccc')
                .fontSize(14)

            }
            .margin({
              top: 10
            })
          }


          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)

        }
        .layoutWeight(1)
        .width('100%')

      }
      .padding(20)
      .width('100%')
      .width('100%')

      Divider().strokeWidth(10).width('100%')
      List() {

        ForEach(this.zhiList, (item: userInfoModel, index) => {
          ListItem() {
            getZhiItem({
              item: item
            })
          }

        })
      }

    }
    .height('100%')
    .width('100%')
  }
}

重点：

此处的item在ForEach中已经不具备响应式能力若想使用响应式就须得使用