HarmonyOS NEXT 实战系列03-案例粉丝列表

这个案例当中涉及到知识内容：

1. 对象类型使用 Interface 约束

2. 华为内容的资源类型 Resource

3. 定义数组类型的数据 FansItem[]

4. 使用 ForEach 完成循环渲染

5. 使用 @Extend 扩展组件属性方法

具体代码如下：

interface FansItem {
avatar: Resource
name: string
title: string
isFollow: boolean
}

@Entry
@Component
struct TestPage {
playerList: 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
},
]

build() {
List() {
ForEach(this.playerList, (item: FansItem) => {
ListItem() {
Row({ space: 15 }) {
Image($r('app.media.flower'))
.width(48)
.aspectRatio(1)
.borderRadius(24)
Column() {
Text(item.name)
Text(item.title)
.fontColor('#999999')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
.layoutWeight(1)
.alignItems(HorizontalAlign.Start)

        if (item.isFollow) {
          Button('已关注')
            .customButton()
            .backgroundColor('#acacac')
        } else {
          Button('回关')
            .customButton()
            .backgroundColor('#ffaa00')
        }
      }
      .width('100%')
      .height(80)
    }
  })
}
.padding(15)
.width('100%')
.height('100%')
.margin({ top: 50 })

        

          
        
        
        

          

          AI 代码解读
        
      
      

}
}

@Extend(Button)
function customButton() {
.fontSize(12)
.padding(0)
.size({ width: 60, height: 30 })
}

这个界面不涉及到动态交互，下一篇我们将会涉及到
————————————————

                        版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

        

          
        
        
        

          

          AI 代码解读
        
      
      

原文链接：https://blog.csdn.net/zsgzsgzsgzsgzsg/article/details/146183315