harmonyos-next - HarmonyOS NEXT开发中，在创建复杂的UI组件时，如何使用@Builder装饰器简化多参数构造函数的调用？

Question

HarmonyOS NEXT开发中，在创建复杂的UI组件时，如何使用@Builder装饰器简化多参数构造函数的调用？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

实现思路

状态管理：使用 @State 装饰器管理按钮的点击状态，确保 UI 在状态变化时自动更新。

布局结构：使用 Column 和 Row 布局组织 UI 组件。通过调用全局的 globalButtonBuilder 方法来创建按钮。

回调函数：定义按钮的点击回调函数，更新状态并记录日志。

全局 @Builder 方法：在组件外部定义全局的 globalButtonBuilder 方法，用于创建按钮组件，简化多参数构造函数的调用。

代码实现

TypeScript

import { Column, Row, Text, Button, Image, Color, FlexAlign, Resource, State } from '@ohos.arkui.component';

@Entry
@Component
struct BuilderPage {
    @State private buttonState: string = '未点击';

    build() {
        Column() {
            Row({ space: 50 }) {
                // 使用全局 @Builder 方法创建按钮
                globalButtonBuilder($r('app.media.icon_edit'), '编辑', this.handleEditClick);
                globalButtonBuilder($r('app.media.icon_send'), '发送', this.handleSendClick);
            }
            Text(this.buttonState).fontSize(20).fontColor(Color.Black).margin({ top: 20 });
        }.width('100%').height('100%').justifyContent(FlexAlign.Center);
    }

    private handleEditClick() {
        this.buttonState = '编辑按钮已点击';
        console.log('编辑按钮已点击');
    }

    private handleSendClick() {
        this.buttonState = '发送按钮已点击';
        console.log('发送按钮已点击');
    }
}

// 全局 @Builder 方法定义
@Builder
function globalButtonBuilder(icon: Resource, text: string, callback: () => void) {
    Button() {
        Row({ space: 10 }) {
            Image(icon).width(25).height(25);
            Text(text).fontColor(Color.White).fontSize(25);
        }
    }.width(120).height(50).onClick(callback).backgroundColor(Color.Blue).borderRadius(10).padding(10);
}