前言

在游戏应用中，暂停遮罩是常见的交互模式——玩家点击暂停按钮时，游戏画面被半透明遮罩覆盖，并显示暂停菜单。HarmonyOS 的 Stack 组件天然适合实现这种叠层覆盖效果。

本文以「猫猫大作战」的暂停遮罩为锚点，讲解 Stack 叠层布局实现全屏覆盖遮罩、暂停/恢复交互控制。

提示：本系列不讲 ArkTS 基础语法与环境搭建，假设你已跟完第 1–92 篇。本篇是阶段三第 93 篇。

一、Stack 叠层实现遮罩

1.1 暂停遮罩

@Entry
@Component
struct Index {
  @State gameState: GameState = GameState.IDLE;

  build() {
    Stack() {
      // 底层：游戏面板
      this.GameView()

      // 叠层：暂停遮罩（条件渲染）
      if (this.gameState === GameState.PAUSED) {
        this.PauseOverlay()
      }
    }
    .width('100%')
    .height('100%')
  }

  @Builder
  PauseOverlay() {
    Column() {
      // 半透明背景
      Column() {
        Text('⏸ 游戏暂停')
          .fontSize(28).fontColor('#FFF').fontWeight(FontWeight.Bold)
        Button('继续游戏')
          .width(200).height(48).backgroundColor('#2ECC71')
          .onClick(() => { this.gameState = GameState.PLAYING })
        Button('返回主菜单')
          .width(200).height(48).backgroundColor('#95A5A6').margin({ top: 12 })
          .onClick(() => { this.gameState = GameState.IDLE })
      }
    }
    .width('100%').height('100%')
    .backgroundColor('rgba(0,0,0,0.6)')  // 半透明遮罩
  }
}

二、总结

Stack 组件实现全屏覆盖遮罩的核心是使用 if/else 条件渲染叠层组件，配合半透明背景色实现遮罩效果。

核心要点：

• Stack 叠层布局，覆盖层通过条件渲染控制显隐
• 半透明背景 rgba(0,0,0,0.6) 实现遮罩效果
• 暂停遮罩覆盖游戏画面，阻止底层交互

下一篇预告：第 94 篇将深入 AlertDialog——确认对话框的使用与自定义。

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

相关资源：

• Stack 组件参考
• 开源鸿蒙跨平台社区
• 第 92 篇：DotIndicator
• 第 94 篇：AlertDialog