开启鸿蒙开发之旅：ForEach渲染控制

最新推荐文章于 2025-06-19 13:39:42 发布

原创

最新推荐文章于 2025-06-19 13:39:42 发布 · 734 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #前端 #鸿蒙 #javascript

在前一篇文章中，我们已经完成了“提醒事项”首页的静态页面，其中卡片区域和列表区域是用多个Row实现的，相信大家已经发现了，代码中有很多重复的地方。今天，我将使用ForEach来简化这部分代码。

一、ForEach简介

ForEach是鸿蒙开发中的一种循环渲染机制，用于在列表或集合中遍历数据，并生成对应的UI组件。通过ForEach，我们可以轻松实现列表的动态渲染，提高开发效率。

二、ForEach的使用方法

1、准备数据源

首先，我们需要准备一个数据源，例如一个数组或List。还是以首页的卡片为例：

interface card {
  icon: string
  num: number
  bgColor: string
  iconNum: boolean
}

以上我们定义了一个接口

@State cardData: card[] = [
    {
      icon: 'app.media.ic_date',
      num: 4,
      bgColor: '#007AFF',
      iconNum: true
    },
    {
      icon: 'app.media.ic_date2',
      num: 4,
      bgColor: '#ff3a2f',
      iconNum: false
    },
    {
      icon: 'app.media.ic_box',
      num: 6,
      bgColor: '#000',
      iconNum: false
    },
    {
      icon: 'app.media.ic_qizi',
      num: 0,
      bgColor: '#ff9501',
      iconNum: false
    },
    {
      icon: 'app.media.ic_ok',
      num: 0,
      bgColor: '#596772',
      iconNum: false
    }
  ]

然后根据实际需要设置了变量cardData.

2、在布局文件中添加ForEach

在布局文件中，我们可以使用以下语法添加ForEach：

 ForEach(this.cardData, (item: card, index) => {
            Row() {
              Column({ space: FlexAlign.SpaceBetween }) {
                Stack() {
                  Row() {
                    Image($r(item.icon))
                      .width(index == 2 ? 20 : 30)
                  }
                  .width(40)
                  .height(40)