ArkUI自定义组件：解锁界面开发新姿势-优快云博客

自定义组件允许开发者将一组相关的 UI 元素和功能封装在一起，形成一个独立的、可复用的模块。通过自定义组件，我们可以将复杂的界面逻辑抽象出来，使得代码结构更加清晰，易于维护和扩展。同时，自定义组件还能够提高开发效率，减少重复代码的编写。当我们在多个页面或项目中需要使用相同的 UI 元素或功能时，只需创建一次自定义组件，然后在需要的地方进行复用即可。

自定义组件对于提升开发效率和代码质量具有不可忽视的重要性。在接下来的内容中，我们将深入探讨 ArkUI 自定义组件的基本结构，帮助大家更好地掌握这一强大的功能。

二、ArkUI 自定义组件初相识

在 ArkUI 的世界里，组件是构成用户界面的基本单元，就如同搭建积木时的一块块积木。其中，由框架直接提供的组件，像常见的文本组件（Text）、按钮组件（Button）、容器组件（如 Row、Column）等，被称为系统组件。这些系统组件是构建界面的基础元素，开发者可以直接使用它们来快速搭建出简单的界面结构。例如，使用 Text 组件来显示文字信息，用 Button 组件来创建可点击的按钮，通过 Row 和 Column 组件来组织和排列其他组件的位置。

而自定义组件，则是开发者根据具体业务需求，自行创建的具有特定功能和样式的组件。它就像是开发者根据自己的创意，将已有的积木进行重新组合和加工，创造出的独特积木块。与系统组件相比，自定义组件具有更强的针对性和灵活性。系统组件虽然功能通用，但在面对复杂多变的业务场景时，可能无法完全满足需求。比如，在一个电商应用中，需要一个具有特定样式和交互逻辑的商品展示卡片，系统组件无法直接提供这样的功能，这时就需要开发者创建自定义组件来实现。

自定义组件在实际开发中具有诸多显著优势，首先是提高代码复用性。假设在一个大型应用中，有多个页面都需要用到相同的 UI 元素，如一个特定样式的导航栏。如果每次都重复编写相同的代码来实现这个导航栏，不仅会导致代码量大幅增加，而且后期维护和修改也会变得异常困难。而通过将导航栏封装成一个自定义组件，只需要编写一次代码，然后在各个需要的页面中进行复用即可。这样不仅减少了代码的重复编写，还提高了代码的可维护性，当需要修改导航栏的样式或功能时，只需要在自定义组件中进行修改，所有使用该组件的页面都会自动更新。

其次，自定义组件有助于增强业务逻辑与 UI 的分离。在开发过程中，将业务逻辑和 UI 展示分离是一种良好的编程实践。自定义组件可以将相关的 UI 元素和业务逻辑封装在一起，使得代码结构更加清晰。例如，在一个用户登录功能中，可以将登录表单、验证逻辑以及提交按钮等相关元素封装成一个自定义的登录组件。这样，在主页面中只需要引入这个自定义组件，而不需要关心其内部的具体实现细节，从而降低了主页面的复杂度，提高了代码的可读性和可维护性。

另外，自定义组件还为后续版本演进提供了便利。随着业务的发展和需求的变化，应用程序需要不断进行更新和升级。如果使用自定义组件，在进行版本演进时，可以更加方便地对组件进行修改和扩展，而不会影响到其他部分的代码。比如，当需要为电商应用的商品展示卡片添加新的功能时，只需要在商品展示自定义组件中进行修改，而不会对应用的其他页面和功能造成影响。

总之，自定义组件在 ArkUI 开发中扮演着至关重要的角色，它为开发者提供了更高的灵活性和可扩展性，能够帮助开发者更加高效地构建出高质量的用户界面。

三、自定义组件的基础结构剖析

了解了自定义组件的概念和优势后，接下来深入剖析 ArkUI 自定义组件的基本结构。一个完整的自定义组件通常由以下几个关键部分组成：struct 关键字、@Component 装饰器、build () 函数以及 @Entry 装饰器。这些部分相互协作，共同构成了自定义组件的基础框架，下面我们将逐一进行详细讲解。

（一）struct 关键字

在 ArkUI 中，自定义组件是基于 struct（结构体）来实现的。struct 关键字用于定义一个新的数据类型，它可以包含多个成员变量和成员函数。在自定义组件的场景下，struct + 自定义组件名 + {…} 的组合构成了自定义组件的基本结构。例如，我们要创建一个简单的自定义按钮组件，可以这样定义：

struct CustomButton {

// 这里可以定义组件的成员变量，比如按钮的文本、颜色等

private buttonText: string;

private buttonColor: Color;

// 这里可以定义组件的成员函数，比如按钮的点击处理函数

clickHandler() {

// 处理按钮点击后的逻辑

}

需要注意的是，自定义组件的 struct 不能有继承关系，这是为了保证组件结构的简单性和独立性，避免因继承带来的复杂性和潜在问题。同时，对于 struct 的实例化，可以省略 new 关键字，这使得代码更加简洁。例如，在使用上述 CustomButton 组件时，可以直接这样写：

@Entry

@Component

struct ParentComponent {

build() {

Column() {

CustomButton({ buttonText: '点击我', buttonColor: Color.Blue })

}

（二）@Component 装饰器

@Component 装饰器是赋予 struct 组件化能力的关键。它仅能修饰 struct 关键字声明的数据结构，当一个 struct 被 @Component 装饰后，就具备了组件化的能力，能够在界面中作为一个独立的组件使用。被修饰的 struct 需要实现 build 方法，通过链式调用的方式来描述组件的 UI 结构。例如：

@Component

struct CustomButton {

@State private buttonText: string = '默认文本';

@State private buttonColor: Color = Color.Gray;

build() {

Button(this.buttonText)

.backgroundColor(this.buttonColor)

.onClick(() => {

// 按钮点击后的逻辑

})

}

这里的 CustomButton 组件通过 @Component 装饰器，将其内部的 UI 结构（一个具有特定文本和颜色，且能响应点击事件的按钮）封装起来，使其可以在其他组件中复用。同时，一个 struct 只能被一个 @Component 装饰，这是为了保证组件定义的唯一性和规范性。从 API version 9 开始，该装饰器支持在 ArkTS 卡片中使用，进一步拓展了其应用场景。

（三）build () 函数

build () 函数在自定义组件中扮演着至关重要的角色，它用于定义自定义组件的声明式 UI 描述。简单来说，组件最终在界面上呈现的样子，就是由 build () 函数中的代码来决定的。自定义组件必须定义 build () 函数，否则无法正常渲染。

在 @Entry 装饰的自定义组件中，其 build () 函数下的根节点唯一且必要，并且必须为容器组件，例如 Row、Column、Stack 等。这是因为根容器组件能够容纳其他子组件，为整个组件的布局提供基础结构。同时，ForEach 禁止作为根节点，这是为了避免一些潜在的布局和数据绑定问题。例如：

@Entry

@Component