Price: $120 (USD)Slot: 5

information on narrowboat share, buying a share, owning a share, selling a share, marina details, boat share shows, boat handling courses

​ 需求： 提取 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 不重新渲染 ​