HarmonyOS鸿蒙Next中Navigation实现类似闪屏的效果

【解决方案】

完整的Navigation实现闪屏页方式可以参考demo：Navigation实现闪屏页。

• 方案一：通过隐藏导航页和重写返回键的方法，实现不返回开屏页。
  1. 开屏页通过导航页Navigation容器组件实现；
  2. Navigation启动时，通过this.pathStack.pushPathByName直接跳转到MainPage界面；
  3. 添加路由拦截，当路由目标页面名称为navBar（Navigation首页名字）时，就跳转到MainPage界面；
  4. 设置Navigation属性hideNavBar为true，隐藏返回导航页。

示例代码如下：

// MainPage.ets
@Component
struct MainPage {
  pageName: string = '';
  pathStack: NavPathStack | undefined = undefined;

  build() {
    NavDestination() {
      Column() {
        Text('this is MainPage').fontSize(24)
        Button(`push Page`).width('80%').margin({ top: 10, bottom: 10 })
          .onClick(() => {
            this.pathStack?.pushPathByName('Page', '');
          })
        Button(`pop`).width('80%').margin({ top: 10, bottom: 10 })
          .onClick(() => {
            this.pathStack?.pop();
          })
      }
    }.title('MainPage')
    .onReady((context: NavDestinationContext) => {
      this.pageName = context.pathInfo.name;
      this.pathStack = context.pathStack;
    })
  }
}

// Page.ets
@Component
struct Page {
  pageName: string = '';
  pathStack: NavPathStack | undefined = undefined;

  build() {
    NavDestination() {
      Column() {
        Text('this is Page').fontSize(24)
        Button(`pop`).width('80%').margin({ top: 10, bottom: 10 })
          .onClick(() => {
            this.pathStack?.pop();
          })
      }
    }.title('Page')
    .onReady((context: NavDestinationContext) => {
      this.pageName = context.pathInfo.name;
      this.pathStack = context.pathStack;
    })
  }
}

// Index.ets（即启动页）
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  pathStack: NavPathStack = new NavPathStack();
  @State hideNavBar: boolean = false

  aboutToAppear(): void {
    setTimeout(() => {
      this.pathStack.pushPathByName('MainPage', undefined, false);
      this.hideNavBar = true
      // 添加路由拦截功能
      this.pathStack.setInterception({
        willShow: (from: NavDestinationContext | NavBar, to: NavDestinationContext | NavBar,
          operation: NavigationOperation, isAnimated: boolean) => {
          // 如果返回到首页，就跳转为MainPage页面
          if (to == 'navBar') {
            promptAction.showToast({ message: '无法返回到首页' })
            this.pathStack.pushPathByName('MainPage', undefined, false);
          }
        }
      })
    }, 2000)
  }

  @Builder
  pagesMap(name: string, param: number) {
    if (name == 'MainPage') {
      MainPage()
    } else if (name == 'Page') {
      Page()
    }
  }

  build() {
    Navigation(this.pathStack) {
      Text('欢迎进入APP').fontSize(30)
    }.title('启动页')
    .hideNavBar(this.hideNavBar)
    .navDestination(this.pagesMap)
  }
}

• 方案二：通过销毁作为开屏页的NavDestination页面，实现不返回开屏页。
  1. 首页使用Navigation作为根容器，闪屏页使用NavDestination作为根容器；
  2. 在首页的aboutToAppear回调中跳转到闪屏页；
  3. 闪屏页在定时器setTimeout回调中通过removeByName销毁自身。

示例代码如下：

// Index.ets
@Entry
@Component
struct Index {
  @Provide('navPathStack') navPathStack: NavPathStack = new NavPathStack();

  @Builder
  pageMap(name: string) {
    if (name === "Splash") {
      Splash()
    }
  }

  aboutToAppear(): void {
    this.navPathStack.pushPathByName("Splash", "")
  }

  build() {
    Navigation(this.navPathStack) {
      Column() {
        Text('首页')
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }
    .hideToolBar(true)
    .navDestination(this.pageMap)
  }
}

// Splash.ets
@Component
export struct Splash {
  @Consume('navPathStack') navPathStack: NavPathStack;

  aboutToAppear(): void {
    setTimeout(() => {
      this.navPathStack.removeByName("Splash")
    }, 2000)
  }

  build() {
    NavDestination() {
      Column() {
        Text('闪屏页')
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }
    .hideTitleBar(true)
  }
}

【背景知识】

• Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用。其主要用于实现页面间以及组件内部的页面跳转。removeByName方法可以将指定的NavDestination页面删除。
• NavDestination是Navigation的子页面的根容器，onBackPressed方法可以重写返回键逻辑。