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

​