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 不重新渲染