鸿蒙开发-参数传递

@Entry
@Component
struct ZhihuComment {
  @State message: string = 'Hello World'
  @State replyList:  ReplyItem[] = [
    {
      id: 0,
      icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
      name: '张三' + 0,
      content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + 0,
      publicTime: '10-01',
      area: '北京',
      likeNum: 100 + 0
    },
    {
      id: 1,
      icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
      name: '张三' + 1,
      content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + 1,
      publicTime: '10-01',
      area: '北京',
      likeNum: 100 + 1
    },
    {
      id: 2,
      icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
      name: '张三' + 2,
      content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + 2,
      publicTime: '10-01',
      area: '北京',
      likeNum: 100 + 2
    }
    ,
    {
      id: 2,
      icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
      name: '张三' + 2,
      content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + 2,
      publicTime: '10-01',
      area: '北京',
      likeNum: 100 + 2
    }
    ,
    {
      id: 2,
      icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
      name: '张三' + 2,
      content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + 2,
      publicTime: '10-01',
      area: '北京',
      likeNum: 100 + 2
    }
    ,
    {
      id: 2,
      icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
      name: '张三' + 2,
      content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + 2,
      publicTime: '10-01',
      area: '北京',
      likeNum: 100 + 2
    }
    ,
    {
      id: 2,
      icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
      name: '张三' + 2,
      content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + 2,
      publicTime: '10-01',
      area: '北京',
      likeNum: 100 + 2
    }
    ,
    {
      id: 2,
      icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
      name: '张三' + 2,
      content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + 2,
      publicTime: '10-01',
      area: '北京',
      likeNum: 100 + 2
    }
  ]

  changeLike(item: ReplyItem) {
    if (item.likeFlag) {
      item.likeFlag = false
      item.likeNum = item.likeNum - 1
    } else {
      item.likeFlag = true
      item.likeNum = item.likeNum + 1
    }

    const index = this.replyList.findIndex((obj) => obj.id == item.id)
    AlertDialog.show({message: 'test' + index + " " + item.likeNum})
    this.replyList[index] = {...item}
  }
  aboutToAppear() {
    // for (let i = 0; i < 10; i++) {
    //   this.replyList.push({
    //     id: i,
    //     icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
    //     name: '张三' + i,
    //     content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + i,
    //     publicTime: '10-01',
    //     area: '北京',
    //     likeNum: 100 + i
    //   })
    // }
  }
  build() {
    Stack({alignContent: Alignment.Bottom}) {
      Scroll() {
        Column() {
          ZhiHuHeader()
          // ZhihuItem({item: {
          //   id: 1,
          //   icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
          //   name: '张三',
          //   content: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
          //   publicTime: '10-10',
          //   area: '上海',
          //   likeNum: 100
          // }})
          Divider()
            .width('100%')
            .color('#f4f4f4')
            .strokeWidth(8)
            .margin({
              top: 10
            })
          Row(){
            Text('回复')
              .textAlign(TextAlign.Start)
              .fontWeight(400)
              .fontSize(16)
              .fontColor('#333333')
          }
          .width('100%')
          .margin({
            left: 15,
            top: 15
          })
          ForEach(this.replyList, (item: ReplyItem, index: number) => {
            ZhihuItem({item: item, changeLike: (obj: ReplyItem) => {
              this.changeLike(obj)
            }})
          })

        }

      }.padding({
        bottom: 60
      })
      .align(Alignment.Top)
      .alignSelf(ItemAlign.Start)
      ReplyAdd({addReply: (item: ReplyItem) => {
        this.replyList.unshift(item)
      }})
    }
    .height('100%')

  }
}

@Component
struct ReplyAdd {
  @State content: string = ""
  addReply: (item: ReplyItem) => void = () => {}
  build() {
    Row() {
      TextInput({
        placeholder: '回复~',
        text: this.content
      }).layoutWeight(1)
        .onChange((value) => {
          this.content = value
        })
      Text('发布')
        .margin({
          left: 10
        }).fontColor(Color.Blue)
        .onClick(() => {
          const  replyItem: ReplyItem = {
            id: Date.now(),
            icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
            name: '李四',
            area: '北京',
            content: this.content,
            publicTime: `${new  Date().getMonth() + 1}-${new Date().getDate()}`,
            likeNum: 0,
            likeFlag: false
          }
          this.addReply(replyItem);
        })
    }
    .padding({
      left: 10,
      right: 10
    })
    .width('100%')
    .height(60)
    .backgroundColor(Color.White)
    .border({
      color: '#f4f5f6',
      width: {
        top: 1
      }
    })
  }
}

@Component
struct ZhiHuHeader {
  build() {
    Row(){
      Row() {
        Image($r('app.media.back'))
          .width(12)
          .height(12)
          .fillColor('#848484')
      }
      .width(24)
      .aspectRatio(1)
      .backgroundColor('#f4f4f4')
      .borderRadius(20)
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Center)
      .margin({
        left:15
      })

      Text('评论回复')
        .layoutWeight(1)
        .textAlign(TextAlign.Center)
        .fontSize(18)
        .padding({
          right: 39
        })
        .fontWeight(400)
    }
    .width('100%')
    .alignItems(VerticalAlign.Center)
    .border({
      color: '#f4f4f4',
      width: {
        bottom:1
      }
    })
    .height(50)

  }
}

@Component
struct ZhihuItem {
  item: Partial<ReplyItem> = {}
  changeLike: (item: ReplyItem) => void = () => {}
  build() {
    Row() {
      Image(this.item.icon)
        .width(50)
        .height(50)
        .borderRadius(25)

      Column() {
        Text(this.item.name)
          .fontSize(20)
          .fontColor('#333333')
          .fontWeight(400)

        Text(this.item.content)
          .fontSize(14)
          .fontColor('#666666')
          .margin({
            top: 10
          })
          .lineHeight(18)
          .maxLines(2)
          .textOverflow({
            overflow: TextOverflow.Ellipsis
          })

        Row() {
          Row() {
            Text(this.item.publicTime)
              .fontSize(12)
              .fontColor('#999999')
            Text(`IP属地${this.item.area}`)
              .fontSize(12)
              .fontColor('#999999')
              .margin({
                left: 5
              })
          }
          .layoutWeight(1)
          Row() {
            Image($r('app.media.like'))
              .width(20)
              .height(20)
            Text(this.item.likeNum.toString())
              .fontColor('#999999')
              .fontSize(12)
              .margin({
                left: 5
              })
          }.onClick(() => {
            this.changeLike(this.item as ReplyItem);
          })
        }
          .width('100%')
        .margin({
          top: 20
        })
      }
      .alignItems(HorizontalAlign.Start)
      .layoutWeight(1)

      .margin({
        left: 15
      })
    }
    .alignItems(VerticalAlign.Top)
    .width('100%')
    .padding({
      left: 15,
      right: 15,
      top: 15
    })
  }
}

class ReplyItem {
  id: number
  icon: string
  name: string
  content: string
  publicTime: string
  area: string
  likeNum: number
  likeFlag?:boolean = false
}

image.png