HarmonyOS 中 Navigation 组件的应用困境与应对策略

引言

在 HarmonyOS 移动应用开发领域，Navigation 组件扮演着关键角色，其主要功能在于实现页面及组件内部的页面跳转，同时支持在不同组件间传递跳转参数，极大地提升了对不同页面访问与复用的便捷性。通常，Navigation 作为路由导航的根视图容器，被广泛应用于页面（@Entry）的根容器构建。若开发者期望深入了解 Navigation 的具体使用方法，可参考以下链接：在哪里？在哪里！设置到底在哪里！！！HarmonyOS 移动应用开发 ------ 设置组件导航（Navigation 组件、Tabs 组件实现页面导航）_harmony navigation tabs - CSDN 博客。

基于 Navigation 组件导航的特性，华为官方精心设计了一套基于 Navigation 的路由设计方案，旨在实现多模块路由管理以及模块间的有效解耦。在此基础上，通过动态注册路由的方式，成功解决了页面加载多个 UI 组件时启动速度变慢的问题。如需深入探究该方案的详细使用方法，可查阅：《应用导航设计：裂变式路由风暴来袭》------HarmonyOS 开发项目时的 Navigation 路由奇妙使用 - CSDN 博客。

然而，需要注意的是，Navigation 以 @Entry 作为页面的根容器。当项目采用分层架构进行构建时，从软件工程的最佳实践角度出发，@Entry 页面不应包含 UI 渲染相关的逻辑与业务。但由于 Navigation 对根容器的设定，使得该页面无法从 Navigation 的页面栈中剔除，这就导致了潜在的应用开发困境。

示例

以一个常见的 APP 场景为例，假设该 APP 的 @Entry 入口页面为闪屏页。闪屏页通常仅在用户启动 APP 时进行渲染，当用户成功进入 APP 主界面后，若不慎误触返回按键，由于闪屏页作为 @Entry 页面且是 Navigation 的根容器，依据其机制无法被销毁，此时用户可能会直接被导航回闪屏页。这种情况显然违背了良好用户体验的设计原则，对用户的操作流畅性与沉浸感造成了负面影响。

解决方案

状态控制与布局组合

TypeScript 复制代码

// 状态定义
@State showSplash: boolean = true
@State mainPathStack: NavPathStack = new NavPathStack()

// 组合布局
Column() {
    if (this.showSplash) {
        SplashScreen() // 条件渲染
    } else {
        Navigation(this.mainPathStack) { // 路由容器
            Row() { 
                Button('退出').onClick(() => /*...*/)
                Button('取消').onClick(() => /*...*/)
            }.height('10%')
        }
    }
}

通过定义showSplash状态变量，明确表示当前是否显示闪屏页。
依据showSplash的状态判断，动态渲染不同的用户界面。若showSplash为真，则渲染闪屏页；若为假，则进入 Navigation 的导航容器。
将此页面作为根页面，设置提示按钮，当用户触发相关操作时，提示用户是否确定退出应用。这种设计有效避免了因误触导致闪屏页重新渲染或出现空容器的不良情况，提升了用户操作的容错性。

全局退出确认弹窗

TypeScript 复制代码

aboutToDisappear(): void {
    this.context.terminateSelf();
}

该方案通过调用params.context.terminateSelf()方法，实现直接退出应用的功能。
但由于组件生命周期中的aboutToDisappear函数无法阻止组件销毁，这与 @Entry 的onBackStress回调机制存在差异，导致无法在组件销毁时阻止并弹出提示框。因此，在实际应用中，该方法仅能在闪屏页跳转后的第一个组件被销毁时，直接关闭整个 APP。然而，这种方式在用户误触的情况下，极易引发不佳的用户体验，故在实际项目开发中并不推荐使用。