HarmonyOS开发：循环渲染ForEach

原创

已于 2024-07-07 15:47:10 修改 · 622 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #ArkTS #华为

于 2024-07-06 14:39:01 首次发布

需求： 创建多个列表组件，并实现点赞功能
语言： ArkTS
平台： DevEco Studio
效果图：
请添加图片描述
ForEach 接口描述

ForEach(
arr: Array,
itemGenerator: (item: Object, index: number) => void,
keyGenerator?: (item: Object, index: number) => string
)

具体代码 (含注释)

//被@Observed装饰的类可以被观察到属性的变化
@Observed
class Article {
   
   
  id: string;
  title: string;
  brief: string;
  isLiked: boolean;
  likesCount: number;

  constructor(id: string, title: string, brief: string, isLiked: boolean, likesCount: number) {
   
   
    this.id = id;
    this.title = title;
    this.brief = brief;
    this.isLiked = isLiked;
    this.likesCount = likesCount;
  }
}

@Entry
@Component
struct ArticleListView {
   
   
  //状态变量
  @State articleList: Array<Article> = [
    new Article('001', '第0篇文章', '文章简介内容', false, 100),
    new Article