如何在HarmonyOS中实现自定义组件？

Question

如何在HarmonyOS中实现自定义组件？

Answer 1

1.创建自定义组件：

• 使用 @Component 装饰器来标识自定义组件。
• 自定义组件基于 struct 实现，必须包含 build() 方法来定义组件的UI描述。

@Component
struct HelloComponent {
    @State message: string = 'Hello, World!';
    build() {
        Row() {
            Text(this.message)
                .onClick(() => {
                    this.message = 'Hello, ArkUI!';
                });
        }
    }
}

2.导出和引用自定义组件：

• 如果在其他文件中引用该组件，需要使用 export 关键字导出，并在使用的页面 import 该组件。

export default HelloComponent;

import HelloComponent from './HelloComponent';

3.在父组件中使用自定义组件：

• 可以在父组件的 build() 方法中多次创建自定义组件实例，实现组件的重用。

@Entry
@Component
struct ParentComponent {
    build() {
        Column() {
            Text('ArkUI message');
            HelloComponent({ message: 'Hello World!' });
            Divider();
            HelloComponent({ message: '你好，世界!' });
        }
    }
}

4.自定义组件的参数和样式：

• 自定义组件可以包含成员变量，并通过参数传递初始化这些变量。
• 可以定义通用样式和局部样式来控制组件的外观。

@Component
struct MyComponent {
    private countDownFrom: number = 0;
    private color: Color = Color.Blue;
    build() {
        // 组件的UI描述
    }
}