第 10 课：NavPathStack 返回与路由栈

日期：2026-07-15
时效校验：2026-09-15（HarmonyOS API 20 SDK、华为官方 Navigation 文档）
知识点：NavPathStack.pop()、入栈与出栈
适用场景：从第 9 课的详情返回原列表

承接上一课：详情已经能显示被点击项的数据，这一课只增加一个“返回”按钮。

1. 把同一个导航栈交给详情页

在第 9 课的 pageBuilder 中增加一项参数：

@Builder
pageBuilder(name: string, param: Object) {
  if (name === 'DetailPage') {
    DetailPage({
      params: param as DetailParams,
      pathStack: this.pathStack
    })
  }
}

详情页接收这个 pathStack，点击按钮时调用 pop()：

@Component
struct DetailPage {
  params: DetailParams = new DetailParams('', '');
  pathStack: NavPathStack = new NavPathStack();

  build() {
    NavDestination() {
      Column({ space: 16 }) {
        Text(this.params.title)
          .fontSize(24)
        Text(`id: ${this.params.id}`)
          .fontSize(18)

        Button('返回列表')
          .onClick(() => {
            this.pathStack.pop();
          })
      }
    }
    .title('详情')
  }
}

2. 只记住“入栈/出栈”

text

第 8、9 课：pushPath -> 详情入栈
第 10 课：pop -> 当前详情出栈
结果：回到原来的 TopicPage 列表

不要在“返回”按钮里再次 pushPath() 一个列表页；那会继续前进并增加新的页面实例。

3～5 分钟练习

进入 @State 详情，点击“返回列表”，确认列表仍保留第 7 课的 已选 状态。

参考答案

返回后 @State 行应继续显示“已选”。这是因为 TopicPage 仍在导航栈下方，并没有被重新创建成另一个列表页。

与上一课的联系

第 9 课把数据带进详情；这一课复用同一个 pathStack 把详情移出栈，完成进入与返回闭环。