HarmonyOS 小游戏《对战五子棋》开发第30篇 - TwoPlayerPage双人对战（二）：状态栏与玩家指示器

让玩家一眼知道轮到谁了——状态栏的交互设计截图如下状态栏布局Row({space:8}){// 黑方指示Row({space:6}){Circle({width:16,height:16}).fill(this.currentPlayerBLACKthis.resultGameResult.PLAYING?#1A1A1A:#CCCCCC)Text(黑方).fontSize(14).fontColor(this.currentPlayerBLACKthis.resultGameResult.PLAYING?#333333:#999999)}Text(VS).fontSize(12).fontColor(#CCCCCC)// 白方指示Row({space:6}){Circle({width:16,height:16}).fill(this.currentPlayerWHITEthis.resultGameResult.PLAYING?#FFFFFF:#CCCCCC).border({width:1,color:#999999})Text(白方).fontSize(14).fontColor(this.currentPlayerWHITEthis.resultGameResult.PLAYING?#333333:#999999)}Blank()Text(第${this.moveCount}手).fontSize(13).fontColor(#888888)}.width(92%).padding({top:8,bottom:8})视觉效果当前黑方回合 ● 黑方 VS ○ 白方 第 3 手 ↑黑色实心 ↑灰色空心 ↑手数 当前白方回合 ○ 黑方 VS ● 白方 第 4 手 ↑灰色空心 ↑白色实心动态颜色逻辑this.currentPlayerBLACKthis.resultGameResult.PLAYING?#1A1A1A:#CCCCCC两个条件currentPlayer BLACK当前是黑方回合result GameResult.PLAYING游戏进行中只有同时满足两个条件指示器才高亮。游戏结束后双方都变灰。Circle组件Circle({width:16,height:16}).fill(#1A1A1A)// 填充色.border({width:1,color:#999999})// 边框黑方圆圈深色填充无边框白方圆圈白色填充灰色边框否则在浅色背景上看不见Blank()的作用Row({space:8}){// 黑方指示...Text(VS)...// 白方指示...Blank()// 弹性空间Text(第${this.moveCount}手)...}Blank()占据剩余空间将手数推到最右侧。效果● 黑方 VS ○ 白方 ←Blank→ 第 3 手状态文字Text(this.getStatusText()).fontSize(16).fontWeight(FontWeight.Medium).fontColor(this.result!GameResult.PLAYING?#E63946:#555555).margin({top:4,bottom:8})游戏中灰色#555555游戏结束红色#E63946底部按钮Row({space:16}){Button(悔棋).fontColor(#555555).backgroundColor(#E8E0D5).borderRadius(24).height(48).layoutWeight(1).enabled(this.moveCount0this.resultGameResult.PLAYING).onClick((){this.undo();})Button(重新开始).fontColor(#FFFFFF).backgroundColor(#4A90D9).borderRadius(24).height(48).layoutWeight(1).onClick((){this.restart();})}.width(92%)按钮状态控制.enabled(this.moveCount0this.resultGameResult.PLAYING)悔棋按钮在以下情况禁用没有棋子moveCount 0游戏已结束enabled(false)让按钮变灰且不可点击。layoutWeight等分布局.layoutWeight(1)// 两个按钮各占一半两个按钮都设置layoutWeight(1)平分剩余空间。导航栏设计Row(){Text(←).fontSize(24).onClick((){router.back();}).padding(8)Text(双人对战).fontSize(20).fontWeight(FontWeight.Bold).layoutWeight(1).textAlign(TextAlign.Center)Text( )// 占位.fontSize(24).padding(8)}.height(56)三段式导航栏返回箭头 居中标题 右侧占位。总结状态栏设计要点动态指示器圆圈颜色随当前玩家变化条件高亮只有游戏中才高亮当前玩家Blank弹性空间将手数推到右侧按钮状态悔棋按钮根据条件禁用layoutWeight等分底部按钮平分宽度这些细节让用户随时了解游戏状态提升了交互体验。