HarmonyOS应用开发实战：猫猫大作战-pauseOverlay 暂停遮罩

2026/7/29 15:30:16

前言

暂停遮罩是游戏中的通用交互——游戏进行时玩家点击暂停，弹出一个半透明遮罩覆盖游戏画面，显示暂停菜单。

一、暂停遮罩组件

@Componentexportstruct PauseOverlay{@Propscore:number;@LinkonResume:()=>void;@LinkonRestart:()=>void;@LinkonBackToMenu:()=>void;build(){Column(){Column(){Text('⏸️').fontSize(48).margin({bottom:12})Text('游戏暂停').fontSize(24).fontWeight(FontWeight.Bold).fontColor('#2C3E50').margin({bottom:8})Text(`当前得分:${this.score}`).fontSize(16).fontColor('#7F8C8D').margin({bottom:24})Button('继续游戏').width('80%').height(48).fontSize(17).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').backgroundColor('#2ECC71').borderRadius(24).margin({bottom:12}).onClick(()=>this.onResume())Button('重新开始').width('80%').height(48).fontColor('#FFFFFF').backgroundColor('#F39C12').borderRadius(24).margin({bottom:12}).onClick(()=>this.onRestart())Button('返回主菜单').width('80%').height(48).fontColor('#7F8C8D').backgroundColor('#ECF0F1').borderRadius(24).onClick(()=>this.onBackToMenu())}.width('80%').padding(32).backgroundColor('#FFFFFF').borderRadius(20).shadow({radius:20,color:'rgba(0,0,0,0.15)'})}.width('100%').height('100%').backgroundColor('rgba(44, 62, 80, 0.6)').justifyContent(FlexAlign.Center)}}

二、暂停流程

// 暂停pauseGame(){if(this.gameState===GameState.PLAYING){this.gameState=GameState.PAUSED;this.clearTimers();}}// 恢复resumeGame(){if(this.gameState===GameState.PAUSED){this.gameState=GameState.PLAYING;this.startTimers();}}// 在 build 中if(this.gameState===GameState.PAUSED){PauseOverlay({...})}