企业官网建设流程全解析

前言

@Builder是 ArkUI 中用于自定义 UI 构建函数的装饰器。在「猫猫大作战」中，@Builder用于封装按钮样式、游戏面板、猫咪卡片等可复用的 UI 片段。

一、@Builder 基础

@Builder MainMenuButton(text: string, onClick: () => void) { Button(text) .width('80%').height(48) .fontSize(17).fontWeight(FontWeight.Bold) .fontColor('#FFFFFF') .backgroundColor('#2ECC71') .borderRadius(24) .onClick(() => onClick()) } // 使用 Column() { MainMenuButton('开始游戏', () => this.startGame()) MainMenuButton('游戏设置', () => this.openSettings()) MainMenuButton('排行榜', () => this.showRank()) }

二、@Builder 参数

@Builder ScoreDisplay(score: number, label: string, color: string) { Column() { Text(label).fontSize(12).fontColor('#95A5A6') Text(`${score}`) .fontSize(28).fontWeight(FontWeight.Bold) .fontColor(color) } .alignItems(HorizontalAlign.Center) }

三、@Builder vs @Component

四、游戏中的应用

// 游戏 HUD 组件化 @Builder GameHUD(score: number, combo: number, time: number) { Row() { ScoreDisplay(score, '得分', '#E74C3C') ScoreDisplay(combo, '连击', '#F39C12') ScoreDisplay(time, '时间', '#95A5A6') } .width('100%') .padding(16) .justifyContent(FlexAlign.SpaceEvenly) }

五、最佳实践

1. 参数化：将颜色、大小等可变的属性作为参数传入
2. 单一职责：每个 @Builder 只封装一个 UI 功能
3. 与 @Component 配合：小片段用 @Builder，大模块用 @Component

总结

@Builder装饰自定义 UI 函数，参数化复用布局片段。核心要点：可传参的 UI 函数、 适合按钮/面板等小片段、 与 @Component 配合使用。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• @Builder 官方文档
• 第 103 篇：stat-item
• 第 105 篇：wrapBuilder
• 第 106 篇：@Styles