【HarmonyOS】ArkUI - 自定义组件

Tyhoo Wu

已于 2024-03-04 15:43:03 修改

阅读量1.7k

点赞数 17

CC 4.0 BY-SA版权

分类专栏： HarmonyOS 文章标签：鸿蒙 harmonyos 鸿蒙系统华为 arkts arkui

于 2024-02-21 20:47:03 首次发布

本文链接：https://blog.csdn.net/cnwutianhao/article/details/136220283

文章讲述了如何在HarmonyOSArkUI中通过创建自定义组件（如Header）提高代码复用性，以及如何利用自定义构建函数(@Builder)和样式抽取(@Styles)来优化列表布局的代码结构。作者还提到了如何使用@Extend抽取组件特有属性，以提升代码整洁度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以【HarmonyOS】ArkUI - 列表布局（List）那一篇文章的2024春节档电影新片票房榜列表例子为例：

@Entry
@Component
struct Index {
  ...

  build() {
    Column({ space: 8 }) {
      // 标题部分
      Row() {
        ...
      }

      // 电影列表部分
      List() {
        ForEach(
            ...
        )
      }
    }
  }
}

这是整体的代码结构，省略了细节部分。整个页面是一个从上到下的列式布局，所以我们使用了 Column 容器。然后页面分成了两部分，第一部分是顶部的标题，第二部分是电影列表，由于每一行的内容基本相似，所以我们使用 ForEach 在内部循环渲染电影对应的卡片。

一、创建自定义组件

以上面的标题部分为例，我们知道标题部分其实是一个标准化的功能，也就是说不仅这个页面需要这样的标题，其他页面也需要。比如产品在设计UE时，通常来说会把列表页面和列表详情页的标题部分设置成相似的。如果在每个页面里都写类似的标题代码，复用性会很差，所以为了解决这个问题我们可以把标题部分封装到自定义组件里。

@Component
struct Header {
  build() {
    // 标题部分
    Row() {
      ...
    }
  }
}

我们定义了一个结构体 Header，代表页面的头部。然后加上 @Component 装饰器，这样一个组件就声明出来了。紧接着，可以把标题部分的代码抽取到 builde() { } 里，这样一个可复用的标题的功能就封装好了。

将来在电影列表页面里，我需要写标题，不需要在重新写标题代码了，直接引用这个 Header 组件就行了：

@Entry
@Component
struct Index {
  ...

  build() {
    Column({ space: 8 }) {
      // 标题部分
      Header()

      // 电影列表部分
      List() {
        ForEach(
            ...
        )
      }
    }
  }
}

定义在页面内部的自定义组件完整代码如下：

@Component
struct Header {
  private title: string

  build() {
    Row() {
      Text(this.title)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
    }
  }
}

@Entry
@Component
struct