HarmonyOS 小游戏《对战五子棋》开发第34篇 - ArkTS中复用UI的方法

把重复的UI代码提取成方法——Builder是ArkUI的组件函数什么是BuilderBuilder是ArkTS的装饰器用于定义可复用的UI构建方法。它类似于轻量级组件——不需要声明struct但可以包含完整的UI代码。本项目的Builder使用AIBattlePage使用了4个Builder方法BuilderlevelSelectView(){/* 关卡选择视图 */}BuilderlevelCard(item:LevelConfig){/* 关卡卡片 */}BuildergameView(){/* 游戏对战视图 */}BuilderresultDialog(){/* 结果弹窗 */}Builder的调用build(){Stack(){Column(){// 导航栏...if(this.inGame){this.gameView()// 调用Builder方法}else{this.levelSelectView()// 调用Builder方法}}if(this.inGamethis.showResultDialog){this.resultDialog()// 调用Builder方法}}}Builder方法可以用this.xxx()在build()中调用就像普通方法一样。Builder vs 自定义组件特性BuilderComponent struct声明方式方法struct参数传递方法参数Prop/Link状态管理共享宿主组件状态独立状态复用性仅限当前组件跨文件复用适合场景组件内UI拆分独立可复用组件为什么AIBattlePage用BuilderAIBattlePage有两个主要视图选关、游戏和一个弹窗如果全部写在build()中会非常冗长。用Builder拆分后build(){Stack(){Column(){// 导航栏共用Row(){...}// 根据状态选择视图if(this.inGame){this.gameView()// 100行UI代码被封装}else{this.levelSelectView()// 50行UI代码被封装}}if(this.inGamethis.showResultDialog){this.resultDialog()// 80行UI代码被封装}}}build()方法变得简洁清晰。Builder方法内部访问状态BuildergameView(){Column(){// 直接访问宿主组件的StateText(this.getStatusText())if(this.aiThinking){LoadingProgress()}ChessBoardView({boardData:this.boardData,onCellClick:(row:number,col:number){this.onCellClick(row,col);}})}}Builder方法可以直接访问宿主组件的所有成员变量和方法——不需要参数传递。Builder带参数BuilderlevelCard(item:LevelConfig){Button(){Row({space:16}){Text(item.icon).backgroundColor(item.color)Column(){Text(第${item.level}关)Text(item.name)Text(item.desc)}}}.enabled(item.levelthis.unlockedLevel)// 仍可访问宿主状态}参数item是LevelConfig类型在ForEach中传入ForEach(this.levels,(item:LevelConfig){this.levelCard(item)// 传参调用},(item:LevelConfig)item.level.toString())Builder的嵌套调用BuilderlevelSelectView(){Column({space:16}){Text(选择关卡)ForEach(this.levels,(item:LevelConfig){this.levelCard(item)// Builder调用Builder},(item:LevelConfig)item.level.toString())}}Builder方法可以调用其他Builder方法——形成UI的模块化组合。ChessBoardView为什么不用BuilderChessBoardView是独立组件Component export struct不是Builder——因为它需要跨文件复用被TwoPlayerPage和AIBattlePage共用。选择原则仅在当前组件内使用的UI片段 → Builder需要跨组件/跨文件复用 → Component struct总结Builder是ArkUI中组织UI代码的重要工具代码拆分将冗长的build()方法分解为逻辑单元状态共享直接访问宿主组件的状态参数传递支持方法参数嵌套调用Builder可以调用Builder适用场景组件内的UI复用不需要跨文件合理使用Builder可以让复杂的UI代码保持清晰和可维护。