HarmonyOS鸿蒙Next中如何解决navigation初始页进栈无转场动画问题

可以在分栏模式下右侧使用NavDestination作为占位页，后续push的页面就有动画了。

import { common } from '@kit.AbilityKit';

@Entry
@Component
struct StartPage {
  pathStack: NavPathStack = new NavPathStack();

  aboutToAppear() {
    this.pathStack.pushPathByName('DefaultPage', '', false);
    // 设置Navigation页面跳转拦截回调
    this.pathStack.setInterception({
      willShow: (from: NavDestinationContext | 'navBar', to: NavDestinationContext | 'navBar',
        operation: NavigationOperation, animated: boolean) => {
        console.info(`${from} ${to} ${operation} ${animated}`);
        // 如果要返回到首页，就push到占位页
        if (to === 'navBar') {
          this.pathStack.pushPathByName('DefaultPage', '', false);
        }
      }
    });
  }

  @Builder
  pageMap(name: string) {
    if (name === 'DefaultPage') {
      DefaultPage();
    } else if (name === 'PageA') {
      PageA();
    }
  }

  build() {
    Navigation(this.pathStack) {
      Column() {
        Button('click')
          .onClick(() => {
            this.pathStack.pushPathByName('PageA', null, true);
          });
      }.justifyContent(FlexAlign.Center)
      .height('100%')
      .width('100%');
    }
    .navDestination(this.pageMap)
    .mode(NavigationMode.Split)
    .hideTitleBar(true)
    .navBarWidth('50%');
  }
}

@Component
export struct DefaultPage {
  pathStack: NavPathStack = new NavPathStack();

  build() {
    NavDestination() {
      Column() {
        Text('DefaultPage');
      }.width('100%').height('100%');
    }.title('DefaultPage')
    .onReady((ctx: NavDestinationContext) => {
      this.pathStack = ctx.pathStack;
    })
    .onBackPressed(() => {
      // 返回true表示自定义返回，能避免返回空白页面。返回false则表示系统默认返回，会返回空白页面。
      try {
        // 获取Context
        let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
        // 通过Context获取windowStage
        let windowStage = context.windowStage;
        // 通过windowStage获取主窗口
        let mainWindow = windowStage.getMainWindowSync();
        // 将主窗口最小化
        mainWindow.minimize();
      } catch (exception) {
        console.error(`Failed to obtain the top window. Cause code: ${exception.code}, message: ${exception.message}`);
      }
      return true;
    });
  }
}

@Component
export struct PageA {
  pathStack: NavPathStack = new NavPathStack();

  build() {
    NavDestination() {
      Column() {
        Text('PageA');
        Button('清空路由栈')
          .onClick(() => {
            this.pathStack.clear();
          });
      }.width('100%').height('100%');
    }.title('PageA')
    .onReady((ctx: NavDestinationContext) => {
      this.pathStack = ctx.pathStack;
    });
  }
}

有以下几种处理方式:

方法1: 使用 animated 参数控制单次动画

在初始页面进栈时,可以通过 pushPath 等路由方法的 animated 参数来控制是否开启动画:

// 在 onAppear 或初始化时,设置 animated 为 true 开启动画

 this.pageStack.pushPathByName('PageOne', null, true); // 第三个参数设为 true

 // 或者使用 pushPath

 this.pageStack.pushPath({ name: 'PageOne' }, true); // 第二个参数设为 true

说明:

• animated 参数默认为 true 表示有转场动画
• 设置为 false 可以关闭单次转场动画,不影响下次转场
• 这是最简单直接的方法

方法2: 延迟初始页面加载

可以将初始页面的加载稍微延迟,让 Navigation 完成首次渲染后再触发路由:

 Navigation(this.pageStack) {

   // ...

 }

 .onAppear(() => {

   // 使用 setTimeout 延迟执行

   setTimeout(() => {

     this.pageStack.pushPathByName('PageOne', null, true);

   }, 100);

 })

方法3: 使用 animateTo 包裹路由操作

参考文档中共享元素转场的做法,可以用 animateTo 包裹路由操作:

this.getUIContext()?.animateTo({ duration: 300 }, () => {

   this.pageStack.pushPath({ name: 'PageOne' }, false); // 这里 animated 设为 false

 });

方法4: 全局动画控制

如果想统一控制所有转场动画,可以使用 disableAnimation:

pageStack: NavPathStack = new NavPathStack();

 aboutToAppear(): void {

   // 初始化时先关闭动画

   this.pageStack.disableAnimation(true);

   // 加载初始页面

   this.pageStack.pushPathByName('PageOne', null);

   // 再开启动画,后续操作就有动画了

   this.pageStack.disableAnimation(false);

 }