ArkUI自定义组件：解锁鸿蒙开发新姿势

想象一下，你正在开发一款电商应用，商品展示列表中的每个商品项，都需要有独特的样式和交互逻辑，从图片展示、价格标签到加入购物车按钮的特效，系统组件难以直接实现如此个性化的组合。这时候，自定义组件就能派上用场，将这些元素和逻辑封装在一起，实现代码的高度复用。无论在商品列表页、搜索结果页还是推荐商品模块，都能轻松使用这个自定义组件，不仅大大减少了重复代码的编写量，还让整个项目的结构更加清晰、易于维护。

2. 从 0 到 1：创建自定义组件

掌握了自定义组件的重要性后，我们就正式进入实战环节，一步步创建属于自己的自定义组件。这个过程就像是搭建一座房子，从规划地基（目录结构）开始，到构建房屋的骨骼（基础代码结构），再到设置对外的门窗（暴露组件），每一步都至关重要。

2.1 搭建组件 “小窝”：目录结构

如果要创建非页面类的自定义组件，通常会在 pages 同级目录中，再创建一个 components 目录。在这个目录里，将存放所有自定义组件相关文件，就像一个专门的 “组件仓库” 。components 目录名并不是固定不变的，你可以根据自己的习惯设置其他名称，只要在项目中保持一致即可。

2.2 写好代码 “骨骼”：基础代码结构

在 components 目录中新建一个 ArkTS 文件，文件名就是自定义组件的名称，首字母大写，例如 MyComponent.ets 。自定义组件的基础代码如下：

@Component

struct MyComponent {

build() {

// 这里开始定义组件的UI结构

}

在这段代码中，@Component 装饰器用于将 struct 声明的数据结构标记为一个组件，使其具备组件化的能力。而 build () 函数则是定义组件的声明式 UI 描述，这是必不可少的部分，就如同房屋的框架，决定了组件的外观和基本结构。在 ArkTS 中，提供了快捷输入方式，输入 comp 后回车，即可快速生成上述自定义组件的基础代码结构，非常方便。