HarmonyOS NEXT 实战系列05-案例回关粉丝

需求：

提取 FansItemComp 组件进行复用，使用 @Prop 接收数据保证组件UI可动态渲染
封装 getFansAndFollowCount 方法获取互关人数且渲染
传入 onChange 方法，当子组件状态发送变更通知父组件进行列表数据更新
代码：

interface FansItem {
avatar: Resource
name: string
title: string
isFollow: boolean
}

@Entry
@Component
struct TestPage {
@State fansList: FansItem[] = [
{
name: '华为终端',
avatar: $r('app.media.flower'),
title: '2024,二百万粉阿华继续冲压！！！',
isFollow: false
},
{
name: '黑马程序员',
avatar: $r('app.media.flower'),
title: '领取课程源码+资料，关注黑马程序员公众，回复：领取资源02',
isFollow: true
},
{
name: '央视新闻',
avatar: $r('app.media.flower'),
title: '中央广播电视总台央视新闻官方账号',
isFollow: false
},
]

getFansAndFollowCount() {
return this.fansList.filter(item => item.isFollow)
.length
}

build() {
List() {
ListItem() {
Text(互关 ${this.getFansAndFollowCount()} 人)
.height(40)
}

  ForEach(this.fansList, (item: FansItem, i) => {
    ListItem() {
      FansItemComp({
        item,
        onChange: (newItem) => {
          this.fansList.splice(i, 1 , newItem)
        }
      })
    }
  }, (item: FansItem) => item.name)
}
.padding(15)
.width('100%')
.height('100%')
.margin({ top: 50 })

}
}

@Component
struct FansItemComp {
@Prop @Require item: FansItem
onChange: (item: FansItem) => void = () => {}

build() {
Row({ space: 15 }) {
Image($r('app.media.flower'))
.width(48)
.aspectRatio(1)
.borderRadius(24)
Column() {
Text(this.item.name)
Text(this.item.title)
.fontColor('#999999')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
.layoutWeight(1)
.alignItems(HorizontalAlign.Start)

  if (this.item.isFollow) {
    Button('已关注')
      .customButton()
      .backgroundColor('#acacac')
      .onClick(() => {
        this.item.isFollow = false
        this.onChange(this.item)
      })
  } else {
    Button('回关')
      .customButton()
      .backgroundColor('#ffaa00')
      .onClick(() => {
        this.item.isFollow = true
        this.onChange(this.item)
      })
  }
}
.width('100%')
.height(80)

}
}

@Extend(Button)
function customButton() {
.fontSize(12)
.padding(0)
.size({ width: 60, height: 30 })
}

注意：

${变量名} 字符串模版语法
子组件也可以接收函数
ForEach 第3个参数是唯一标识（默认是对象转成字符串），保证标识不变该 Item 不重新渲染
————————————————

                        版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/zsgzsgzsgzsgzsg/article/details/146184981