前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >HarmonyOS NEXT 实战系列05-案例回关粉丝

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

原创
作者头像
用户8181473
修改于 2025-03-17 09:54:19
修改于 2025-03-17 09:54:19
330
举报

需求:

提取 FansItemComp 组件进行复用,使用 @Prop 接收数据保证组件UI可动态渲染

封装 getFansAndFollowCount 方法获取互关人数且渲染

传入 onChange 方法,当子组件状态发送变更通知父组件进行列表数据更新

代码:

代码语言:txt
AI代码解释
复制

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档