HarmonyOS鸿蒙Next应用开发中，Navigation右边保持只有一个页面

HarmonyOS鸿蒙Next应用开发中，Navigation右边保持只有一个页面

Navigation没有原生接口实现这个效果，只能根据NavPathStack提供的接口来手动维护，例如先通过size接口判断栈中页面的个数，为0就添加，不为0就替换，示例如下：

Button('打开 页面2').width('80%').margin({ top: 10, bottom: 10 })
  .onClick(() => {
    if (this.pathStack.size() == 0) {
      this.pathStack.pushPath({ name: 'Page02' });
    } else {
      this.pathStack.replacePath({ name: 'Page02' });
    }
  })

效果如下：

完整示例如下：

@Component
struct Page01 {
  pathStack: NavPathStack | undefined = undefined;
  @State pageId: string = '';

  build() {
    NavDestination() {
      Text(`页面ID: ${this.pageId}`).width('100%').padding(10).fontSize(22)
      Button('打开 页面2').width('80%').margin({ top: 10, bottom: 10 })
        .onClick(() => {
          if (this.pathStack?.size() == 0) {
            this.pathStack?.pushPath({ name: 'Page02' });
          } else {
            this.pathStack?.replacePath({ name: 'Page02' });
          }
        })
      Button('返回').width('80%').margin({ top: 10, bottom: 10 })
        .onClick(() => {
          this.pathStack?.pop();
        })
    }.title('页面1')
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack;
      this.pageId = context.navDestinationId as string;
    })
  }
}

@Component
struct Page02 {
  pathStack: NavPathStack | undefined = undefined;
  @State pageId: string = '';

  build() {
    NavDestination() {
      Text(`页面ID: ${this.pageId}`).width('100%').padding(10).fontSize(22)
      Button('打开 页面1').width('80%').margin({ top: 10, bottom: 10 })
        .onClick(() => {
          if (this.pathStack?.size() == 0) {
            this.pathStack?.pushPath({ name: 'Page01' });
          } else {
            this.pathStack?.replacePath({ name: 'Page01' });
          }
        })
      Button('返回').width('80%').margin({ top: 10, bottom: 10 })
        .onClick(() => {
          this.pathStack?.pop();
        })
    }.title('页面2')
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack;
      this.pageId = context.navDestinationId as string;
    })
  }
}

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

  @Builder
  pagesMap(name: string) {
    if (name == 'Page01') {
      Page01()
    } else if (name == 'Page02') {
      Page02()
    }
  }

  build() {
    Navigation(this.pathStack) {
      Button('打开 页面1').width('80%').margin({ top: 10, bottom: 10 })
        .onClick(() => {
          if (this.pathStack.size() == 0) {
            this.pathStack.pushPath({ name: 'Page01' });
          } else {
            this.pathStack.replacePath({ name: 'Page01' });
          }
        })
      Button('打开 页面2').width('80%').margin({ top: 10, bottom: 10 })
        .onClick(() => {
          if (this.pathStack.size() == 0) {
            this.pathStack.pushPath({ name: 'Page02' });
          } else {
            this.pathStack.replacePath({ name: 'Page02' });
          }
        })
      Button('返回').width('80%').margin({ top: 10, bottom: 10 })
        .onClick(() => {
          this.pathStack.pop();
        })
    }.title('主页面')
    .titleMode(NavigationTitleMode.Mini)
    .navDestination(this.pagesMap)
  }
}