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

让玩家一眼知道"轮到谁了"------状态栏的交互设计

截图如下：

状态栏布局

typescript 复制代码

Row({ space: 8 }) {
  // 黑方指示
  Row({ space: 6 }) {
    Circle({ width: 16, height: 16 })
      .fill(this.currentPlayer === BLACK && this.result === GameResult.PLAYING
        ? '#1A1A1A' : '#CCCCCC')
    Text('黑方')
      .fontSize(14)
      .fontColor(this.currentPlayer === BLACK && this.result === GameResult.PLAYING
        ? '#333333' : '#999999')
  }

  Text('VS')
    .fontSize(12)
    .fontColor('#CCCCCC')

  // 白方指示
  Row({ space: 6 }) {
    Circle({ width: 16, height: 16 })
      .fill(this.currentPlayer === WHITE && this.result === GameResult.PLAYING
        ? '#FFFFFF' : '#CCCCCC')
      .border({ width: 1, color: '#999999' })
    Text('白方')
      .fontSize(14)
      .fontColor(this.currentPlayer === WHITE && this.result === GameResult.PLAYING
        ? '#333333' : '#999999')
  }

  Blank()

  Text(`第 ${this.moveCount} 手`)
    .fontSize(13)
    .fontColor('#888888')
}
.width('92%')
.padding({ top: 8, bottom: 8 })

视觉效果

复制代码

当前黑方回合：
● 黑方    VS    ○ 白方              第 3 手
↑黑色实心        ↑灰色空心             ↑手数

当前白方回合：
○ 黑方    VS    ● 白方              第 4 手
↑灰色空心        ↑白色实心

动态颜色逻辑

typescript 复制代码

this.currentPlayer === BLACK && this.result === GameResult.PLAYING
  ? '#1A1A1A' : '#CCCCCC'

两个条件：

currentPlayer === BLACK：当前是黑方回合
result === GameResult.PLAYING：游戏进行中

只有同时满足两个条件，指示器才高亮。游戏结束后双方都变灰。

Circle组件

typescript 复制代码

Circle({ width: 16, height: 16 })
  .fill('#1A1A1A')           // 填充色
  .border({ width: 1, color: '#999999' })  // 边框

黑方圆圈：深色填充，无边框
白方圆圈：白色填充，灰色边框（否则在浅色背景上看不见）

Blank()的作用

typescript 复制代码

Row({ space: 8 }) {
  // 黑方指示...
  Text('VS')...
  // 白方指示...
  Blank()  // 弹性空间
  Text(`第 ${this.moveCount} 手`)...
}

Blank()占据剩余空间，将手数推到最右侧。效果：

复制代码

● 黑方  VS  ○ 白方  ←Blank→  第 3 手

状态文字

typescript 复制代码

Text(this.getStatusText())
  .fontSize(16)
  .fontWeight(FontWeight.Medium)
  .fontColor(this.result !== GameResult.PLAYING ? '#E63946' : '#555555')
  .margin({ top: 4, bottom: 8 })

游戏中：灰色#555555
游戏结束：红色#E63946

底部按钮

typescript 复制代码

Row({ space: 16 }) {
  Button('悔棋')
    .fontColor('#555555')
    .backgroundColor('#E8E0D5')
    .borderRadius(24)
    .height(48)
    .layoutWeight(1)
    .enabled(this.moveCount > 0 && this.result === GameResult.PLAYING)
    .onClick(() => { this.undo(); })

  Button('重新开始')
    .fontColor('#FFFFFF')
    .backgroundColor('#4A90D9')
    .borderRadius(24)
    .height(48)
    .layoutWeight(1)
    .onClick(() => { this.restart(); })
}
.width('92%')

按钮状态控制

typescript 复制代码

.enabled(this.moveCount > 0 && this.result === GameResult.PLAYING)

悔棋按钮在以下情况禁用：

没有棋子（moveCount === 0）
游戏已结束

enabled(false)让按钮变灰且不可点击。

layoutWeight等分布局

typescript 复制代码

.layoutWeight(1)  // 两个按钮各占一半

两个按钮都设置layoutWeight(1)，平分剩余空间。

导航栏设计

typescript 复制代码

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等分：底部按钮平分宽度

这些细节让用户随时了解游戏状态，提升了交互体验。