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

Mar 19, 2025 - 11:19

需求：

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