美文网首页
鸿蒙开发-Observed及ObjectLink使用

鸿蒙开发-Observed及ObjectLink使用

作者: 激扬飞雪 | 来源:发表于2024-05-22 00:01 被阅读0次
    @Entry
@Component
struct LinkCase {
  @State message: string = 'Hello World'
  @State foodList: Food[] = [
    new Food({
      id: 1,
      name: '鱼香肉丝',
      price: 18.2,
      num: 10
    }),
  new Food({
      id: 2,
      name: '醋溜丸子',
      price: 12.2,
      num: 39
    }),
    new Food({
      id: 3,
      name: '杂粮煎饼',
      price: 12.2,
      num: 12
    }),
  ]

  build() {
    Row() {
      Column() {
        ForEach(this.foodList, (item: Food, index: number) => {
          FoodItem({item: item})
        })
        ButtonBottom({myFoodList: $foodList})
      }
      .width('100%')
    }
    .height('100%')
  }
}


@Component
struct FoodItem {
  @ObjectLink
  item: Food
  build() {
    Row() {
      Text(this.item.name).textStyle()
      Text(this.item.price.toString()).textStyle()
      Row() {
        Text('-').actionStyle()
          .onClick(() => {
            this.item.num--
          })
          .visibility(this.item.num <= 0 ? Visibility.Hidden: Visibility.Visible)
        Text(this.item.num.toString())
          .textStyle()
          .visibility(this.item.num <= 0 ? Visibility.Hidden: Visibility.Visible)
        Text('+').actionStyle()
          .onClick(() => {
            this.item.num++
          })
      }
        .layoutWeight(1)

    }
    .width('100%')
    .padding({
      top: 10,
      bottom: 10
    })
  }
}

@Extend(Text)
function actionStyle() {
  .width(40)
  .height(40)
  .backgroundColor(Color.Gray)
  .borderRadius(20)
  .textAlign(TextAlign.Center)
  .fontColor(Color.White)
  .fontSize(20)
}
@Extend(Text)
function textStyle() {
  .layoutWeight(1).textAlign(TextAlign.Center).fontSize(20)
}

@Component
struct ButtonBottom {
  @Link
  myFoodList: Food[]
  build() {
    Button('更改数量')
      .onClick(() => {
        // this.myFoodList.forEach((item: Food) => {
        //   item.num++
        // })
        this.myFoodList = this.myFoodList.map((item: Food) => {
          item.num++
          return item
        })
      })
  }
}
interface IFood {
  id: number
  name: string
  price: number
  num: number
}

@Observed
class Food implements IFood{
  id: number
  name: string
  price: number
  num: number

  constructor(food: IFood) {
    this.id = food.id
    this.name = food.name
    this.price = food.price
    this.num = food.num
  }
}
    image.png 
    @Entry
@Component
struct ZhihuComment {
  @State message: string = 'Hello World'
  @State replyList:  ReplyItem[] = [
    new 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
    }),
    new ReplyItem({
      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
    }),
    new ReplyItem({
      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
    })
    ,
    new ReplyItem({
      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
    })
    ,
    new ReplyItem({
      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
    })
    ,
    new ReplyItem({
      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
    })
    ,
    new ReplyItem({
      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
    })
    ,
    new ReplyItem({
      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 {
  @ObjectLink
  item: 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);
            if (this.item.likeFlag) {
              this.item.likeFlag = false
              this.item.likeNum = this.item.likeNum - 1
            } else {
              this.item.likeFlag = true
              this.item.likeNum = this.item.likeNum + 1
            }
          })
        }
          .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 ReplyClass {
  id: number
  icon: string
  name: string
  content: string
  publicTime: string
  area: string
  likeNum: number
  likeFlag?:boolean = false
}
@Observed
class ReplyItem extends ReplyClass{
  constructor(replyClass: ReplyClass) {
    super()
    this.id = replyClass.id
    this.icon = replyClass.icon
    this.name = replyClass.name
    this.content = replyClass.content
    this.publicTime = replyClass.publicTime
    this.area = replyClass.area
    this.likeNum = replyClass.likeNum
    this.likeFlag = replyClass.likeFlag
  }
}
    image.png

    相关文章

      网友评论

          本文标题：鸿蒙开发-Observed及ObjectLink使用

          本文链接：https://www.haomeiwen.com/subject/llgafjtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|鸿蒙开发-Observed及ObjectLink使用|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！