HarmonyOS应用开发实战：猫猫大作战-Stack 叠层布局实现全屏覆盖遮罩、暂停/恢复交互控制

前言

在游戏应用中，暂停遮罩是常见的交互模式——玩家点击暂停按钮时，游戏画面被半透明遮罩覆盖，并显示暂停菜单。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