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