HarmonyOS应用开发实战：猫猫大作战-ArkUI 的条件渲染机制、`@State` 触发重渲、状态机思维

前言前 9 篇我们拆完了主菜单的静态元素——标题、按钮、规则卡片、徽章、布局容器。但一个完整游戏不是「一页到底」它要在主菜单 → 游戏页 → 暂停遮罩 → 结束页四种状态间切换。在 React/Vue 里你习惯useState 条件渲染在 HarmonyOS ArkUI 里这套机制叫「Stateif/else状态驱动渲染」。本篇以「猫猫大作战」的GameState枚举 if/else页面切换为锚点把 ArkUI 的条件渲染机制、State触发重渲、状态机思维讲透。读完本篇你将能独立写出四态切换游戏页、状态遮罩条件盖、枚举状态机三种状态驱动套路。提示本系列不讲 ArkTS 基础语法与环境搭建假设你已跟完第 1–9 篇。一、场景拆解游戏四态切换打开entry/src/main/ets/pages/Index.ets的build()// 来源entry/src/main/ets/pages/Index.ets build() build() { Stack() { if (this.gameState GameState.IDLE) { MainMenuView() // 待机主菜单 } else if (this.gameState GameState.PLAYING || this.gameState GameState.PAUSED) { GameView() // 游戏/暂停游戏页 if (this.gameState GameState.PAUSED) { PauseOverlay() // 暂停叠遮罩 } } else if (this.gameState GameState.GAME_OVER) { GameOverView() // 结束结算页 } } .width(100%).height(100%) }四态切换矩阵GameState显示视图触发方式IDLEMainMenuView启动/重置回主菜单PLAYINGGameView点「开始游戏」PAUSEDGameView PauseOverlay点「暂停」GAME_OVERGameOverView猫咪堆到第 2 行关键观察if/else直接写在build()的Stack() {}内部——这是 ArkUI 的条件渲染语法不是普通 JS if。改this.gameState就触发对应分支重渲。二、GameState 状态枚举打开entry/src/main/ets/components/GameTypes.ets// 来源entry/src/main/ets/components/GameTypes.ets export enum GameState { IDLE, // 0 待机 PLAYING, // 1 游玩中 PAUSED, // 2 暂停 GAME_OVER // 3 结束 }状态机四要素枚举单源所有状态用一个enum集中定义别散到多个 boolean。正交态四态互斥只能居其一不能用isPlaying isPaused组合。命名达意IDLE/PLAYING/PAUSED/GAME_OVER一眼知态别用STATE_1/STATE_2。枚举值递增默认 0/1/2/3按业务时序排列便于比较。提示别用 boolean 替代 enum。如果用isIdle/isPlaying/isPaused/isGameOver四 boolean会出现「全 false」或「多 true」的非法态。enum 互斥保证单一态。三、State 触发条件渲染// 来源entry/src/main/ets/pages/Index.ets Entry Component struct Index { State gameState: GameState GameState.IDLE State score: number 0 // ... 其他 state build() { Stack() { if (this.gameState GameState.IDLE) { MainMenuView() } else if (this.gameState GameState.PLAYING || this.gameState GameState.PAUSED) { GameView() if (this.gameState GameState.PAUSED) { PauseOverlay() } } else if (this.gameState GameState.GAME_OVER) { GameOverView() } } .width(100%).height(100%) } }3.1 State 改变即重渲this.gameState GameState.PLAYING // 触发 Stack 重渲ArkUI 的State监视机制变量被重新赋值 → 触发依赖此变量的所有 UI 重渲。build()里if/else读this.gameState所以改它就重渲对应分支。3.2 if/else 条件渲染 vs .visibilityArkUI 有两种「条件显示」// 方式 1if/else 条件渲染推荐 Stack() { if (this.gameState GameState.IDLE) { MainMenuView() } } // 方式 2.visibility 显隐不推荐 Stack() { MainMenuView().visibility(this.gameState GameState.IDLE ? Visibility.Visible : Visibility.None) }关键差异维度if/else 条件渲染.visibility 显隐不显示时不创建组件创建但隐藏性能高不渲染低仍布局计算状态保留不保留重建保留不重建适用切页、状态遮罩频繁显隐的小元素实战经验切页用if/else频闪显隐用.visibility。游戏页和主菜单切换用if/else——切走时整页销毁不占资源但 HUD 里一个「红点提示」频显隐用.visibility避免频重建。3.3 if/else 写在 build() 内的合法位build() { Stack() { if (cond) { // ✅ 容器内部合法 Text(A) } else { Text(B) } } if (cond) { // ❌ 容器外部非法Entry build 根必须是单容器 Text(A) } }规则Entry的build()根必须是单容器Stack/Column/Rowif/else必须写在容器内部。四、状态切换的触发点4.1 启动游戏IDLE → PLAYING// 来源entry/src/main/ets/pages/Index.ets startGame() startGame() { this.gameState GameState.PLAYING this.score 0 this.combo { count: 0, multiplier: 1, lastMergeTime: 0 } this.cats [] this.gameTime 0 this.spawnTimer 0 this.startTimers() // 启动 setInterval 主循环 }点主菜单「开始游戏」按钮 →startGame()→ 重置所有 state 启动定时器 →gameState PLAYING触发重渲到 GameView。4.2 暂停游戏PLAYING → PAUSEDpauseGame() { if (this.gameState GameState.PLAYING) { this.gameState GameState.PAUSED this.clearTimers() // 停定时器 } }点游戏页「暂停」按钮 →pauseGame()→ 停定时器 →gameState PAUSED触发重渲GameView 仍在但 PauseOverlay 叠上。4.3 恢复游戏PAUSED → PLAYINGresumeGame() { if (this.gameState GameState.PAUSED) { this.gameState GameState.PLAYING this.startTimers() // 重启定时器 } }点遮罩「继续游戏」按钮 →resumeGame()→ 重启定时器 →gameState PLAYING触发重渲PauseOverlay 销毁。4.4 游戏结束PLAYING → GAME_OVER// 来源entry/src/main/ets/pages/Index.ets 主循环内 if (this.cats.some(cat cat.y 1 cat.level 0)) { this.endGame() } endGame() { this.gameState GameState.GAME_OVER this.clearTimers() if (this.score this.highScore) { this.highScore this.score this.isNewHigh true // 持久化 highScore本系列第 134 篇会讲 } }主循环检测猫咪堆到第 2 行 →endGame()→ 停定时器 更新最高分 →gameState GAME_OVER触发重渲到 GameOverView。4.5 重回主菜单GAME_OVER → IDLEbackToMenu() { this.gameState GameState.IDLE this.clearTimers() }点结束页「回主菜单」按钮 →backToMenu()→gameState IDLE触发重渲到 MainMenuView。五、嵌套 if 的复合状态Stack() { if (this.gameState GameState.PLAYING || this.gameState GameState.PAUSED) { GameView() if (this.gameState GameState.PAUSED) { PauseOverlay() // 嵌套 if暂停遮罩只叠在 PAUSED 态 } } }关键设计GameView在PLAYING和PAUSED两态都显示——暂停时游戏页不销毁只叠遮罩。这样恢复游戏时游戏页状态棋盘、猫咪、得分完整保留。反例如果每态独立 if// ❌ 错暂停时 GameView 销毁恢复时重建状态丢失 Stack() { if (this.gameState GameState.PLAYING) { GameView() } else if (this.gameState GameState.PAUSED) { GameView() // 重建 PauseOverlay() } }嵌套 if 原则共享态用||合并外层 if差异态用嵌套 if。六、状态机的完整代码6.1 状态定义GameTypes.etsexport enum GameState { IDLE, PLAYING, PAUSED, GAME_OVER }6.2 页面组件Index.etsEntry Component struct Index { State gameState: GameState GameState.IDLE State score: number 0 State highScore: number 0 State combo: ComboInfo { count: 0, multiplier: 1, lastMergeTime: 0 } State cats: Cat[] [] State gameTime: number 0 State isNewHigh: boolean false // ... 其他 state build() { Stack() { if (this.gameState GameState.IDLE) { MainMenuView() } else if (this.gameState GameState.PLAYING || this.gameState GameState.PAUSED) { GameView() if (this.gameState GameState.PAUSED) { PauseOverlay() } } else if (this.gameState GameState.GAME_OVER) { GameOverView() } } .width(100%).height(100%) } startGame() { this.gameState GameState.PLAYING this.score 0 this.combo { count: 0, multiplier: 1, lastMergeTime: 0 } this.cats [] this.gameTime 0 this.spawnTimer 0 this.startTimers() } pauseGame() { if (this.gameState GameState.PLAYING) { this.gameState GameState.PAUSED this.clearTimers() } } resumeGame() { if (this.gameState GameState.PAUSED) { this.gameState GameState.PLAYING this.startTimers() } } endGame() { this.gameState GameState.GAME_OVER this.clearTimers() if (this.score this.highScore) { this.highScore this.score this.isNewHigh true } } backToMenu() { this.gameState GameState.IDLE this.clearTimers() } }七、调试技巧状态切换怎么追console.info打点每个状态切换方法加console.info(state -, this.gameState)追态机轨迹。Watch监听加State Watch(onStateChange) gameState回调里打日志。本系列第 39 篇会专讲。预览器看销毁if/else 切走时组件销毁预览器组件树会刷新——切错态对应分支不重建就追。真机看遮罩遮罩透明度在预览器可能差异以真机为准。八、性能与最佳实践if/else比.visibility高效不显示就不创建切页用 if/else。共享态用||合并暂停和游玩共享 GameView避免重建丢失状态。enum 替代 boolean互斥态用 enum避免多 boolean 的非法组合。状态切换方法前置校验pauseGame内if (gameState PLAYING)防止从 IDLE 误调暂停。总结本篇我们从游戏四态切换切入掌握 ArkUI 的if/else条件渲染、State触发重渲、enum 状态机三大要点并给出了五态切换方法 嵌套 if 复合状态的完整代码。核心要点enum 互斥态if/else 切页不 visibility共享态用 || 合并保留状态切换方法前置校验。下一篇我们将进入游戏页拆解顶部 HUD 的得分栏 Column 结构。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源「猫猫大作战」项目源码本仓库entry/src/main/ets/pages/Index.ets状态管理概述 — HarmonyOS 官方文档ArkUI 渲染控制语法Stack API 参考开源鸿蒙跨平台社区HarmonyOS 开发者官方文档首页系列索引本仓库articles/INDEX.md