1# Navigation 2 3Navigation组件一般作为Page页面的根容器，通过属性设置来展示页面的标题栏、工具栏、导航栏等。 4 5> **说明：** 6> 7> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12可以包含子组件。从API Version 9开始，推荐与[NavRouter](ts-basic-components-navrouter.md)组件搭配使用。 13 14## 接口 15 16### Navigation 17 18Navigation() 19 20### Navigation<sup>10+</sup> 21 22Navigation(pathInfos: NavPathStack) 23 24绑定路由栈到Navigation组件。 25 26**参数：** 27 28| 参数名 | 参数类型 | 必填 | 参数描述 | 29| --------- | ------------------------------- | ---- | ------ | 30| pathInfos | [NavPathStack](#navpathstack10) | 否 | 路由栈信息。 | 31 32## 属性 33 34除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 35 36| 名称 | 参数类型 | 描述 | 37| ---------------------------------- | ---------------------------------------- | ---------------------------------------- | 38| title | [ResourceStr](ts-types.md#resourcestr)<sup>10+</sup> \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> \| [NavigationCommonTitle](#navigationcommontitle类型说明)<sup>9+</sup> \| [NavigationCustomTitle](#navigationcustomtitle类型说明)<sup>9+</sup> | 页面标题。<br/>**说明：** <br/>使用NavigationCustomTitle类型设置height高度时，titleMode属性不会生效。<br/>字符串超长时，如果不设置副标题，先缩小再换行（2行）最后...截断。如果设置副标题，先缩小最后...截断。 | 39| subTitle<sup>(deprecated)</sup> | string | 页面副标题。不设置时不显示副标题。从API Version 9开始废弃，建议使用title代替。 | 40| menus | Array<[NavigationMenuItem](#navigationmenuitem类型说明)> \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 页面右上角菜单。不设置时不显示菜单项。使用Array<[NavigationMenuItem](#navigationmenuitem类型说明)> 写法时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。 | 41| titleMode | [NavigationTitleMode](#navigationtitlemode枚举说明) | 页面标题栏显示模式。<br/>默认值：NavigationTitleMode.Free | 42| toolBar<sup>(deprecated)</sup> | [object](#object类型说明) \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 设置工具栏内容。不设置时不显示工具栏。<br/>items: 工具栏所有项。<br/>**说明：** <br/>items均分底部工具栏，在每个均分内容区布局文本和图标，文本超长时，逐级缩小，缩小之后换行，最后...截断。<br/>从API version 10开始，该接口不再维护，推荐使用toolbarConfiguration代替。 | 43| toolbarConfiguration<sup>10+</sup> | Array<[ToolbarItem](#toolbaritem10类型说明)<sup>10+</sup>> \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 设置工具栏内容。不设置时不显示工具栏。<br/>**说明：** <br/>使用Array<[ToolbarItem](#ToolbarItem类型说明)>写法设置的工具栏有如下特性：<br/>工具栏所有选项均分底部工具栏，在每个均分内容区布局文本和图标。<br/>文本超长时，若工具栏选项个数小于5个，优先拓展选项的宽度，最大宽度与屏幕等宽，其次逐级缩小，缩小之后换行，最后...截断。<br/>竖屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。横屏下必须配合menus属性的Array<[NavigationMenuItem](#navigationmenuitem类型说明)>使用，底部工具栏会自动隐藏，同时底部工具栏所有选项移动至页面右上角菜单。<br/>使用[CustomBuilder](ts-types.md#custombuilder8)写法为用户自定义工具栏选项，除均分底部工具栏外不具备以上功能。 | 44| hideToolBar | boolean | 隐藏工具栏。<br/>默认值：false<br/>true: 隐藏工具栏。<br/>false: 显示工具栏。 | 45| hideTitleBar | boolean | 隐藏标题栏。<br/>默认值：false<br/>true: 隐藏标题栏。<br/>false: 显示标题栏。 | 46| hideBackButton | boolean | 隐藏返回键。<br/>默认值：false<br/>true: 隐藏返回键。<br/>false: 显示返回键。 <br>不支持隐藏NavDestination组件标题栏中的返回图标。<br/>**说明：** <br/>返回键仅针对titleMode为NavigationTitleMode.Mini时才生效。 | 47| navBarWidth<sup>9+</sup> | [Length](ts-types.md#length) | 导航栏宽度。<br/>默认值：240<br/>单位：vp<br/>**说明：** <br/>仅在Navigation组件分栏时生效。 | 48| navBarPosition<sup>9+</sup> | [NavBarPosition](#navbarposition枚举说明) | 导航栏位置。<br/>默认值：NavBarPosition.Start<br/>**说明：** <br/>仅在Navigation组件分栏时生效。 | 49| mode<sup>9+</sup> | [NavigationMode](#navigationmode枚举说明) | 导航栏的显示模式。<br/>默认值：NavigationMode.Auto<br/>自适应：基于组件宽度自适应单栏和双栏。<br/>**说明：** <br/>支持Stack、Split与Auto模式。 | 50| backButtonIcon<sup>9+</sup> | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | 设置导航栏返回图标。不支持隐藏NavDestination组件标题栏中的返回图标。 | 51| hideNavBar<sup>9+</sup> | boolean | 是否显示导航栏。 | 52| navDestination<sup>10+</sup> | builder: (name: string, param: unknown) => void | 创建NavDestination组件。<br/>**说明：** <br/>使用builder函数，基于name和param构造NavDestination组件。builder中允许在NavDestination组件外包含一层自定义组件， 但自定义组件不允许设置属性和事件，否则仅显示空白。 | 53| navBarWidthRange<sup>10+</sup> | [[Dimension](ts-types.md#dimension10), [Dimension](ts-types.md#dimension10)] | 导航栏最小和最大宽度（双栏模式下生效）。<br/>默认值：最小默认值 240，最大默认值为组件宽度的40% ，且不大于 432。<br/>单位：vp<br/>规则：<br/>开发者设置优先级 > 默认值<br/>最小值优先级 > 最大值<br/>navBar 优先级 > content优先级<br/>开发者设置多个值冲突，以全局数值优先，局部最小值跟随容器大小。 | 54| minContentWidth<sup>10+</sup> | [Dimension](ts-types.md#dimension10) | 导航栏内容区最小宽度（双栏模式下生效）。<br/>默认值：360<br/>单位：vp<br/>规则：<br/>开发者设置优先级 > 默认值<br/>最小值优先级 > 最大值<br/>navBar优先级 > content优先级<br/>开发者设置多个值冲突，以全局数值优先，局部最小值跟随容器大小。<br/>Auto模式断点计算：默认600vp，minNavBarWidth(240vp) + minContentWidth (360vp) | 55 56## 事件 57 58| 名称 | 功能描述 | 59| ---------------------------------------- | ---------------------------------------- | 60| onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void) | 当titleMode为NavigationTitleMode.Free时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。 | 61| onNavBarStateChange(callback: (isVisible: boolean) => void) | 导航栏显示状态切换时触发该回调。返回值isVisible为true时表示显示，为false时表示隐藏。 | 62 63## NavPathStack<sup>10+</sup> 64 65Navigation路由栈。 66 67### pushPath<sup>10+</sup> 68 69pushPath(info: NavPathInfo): void 70 71将info指定的NavDestination页面信息入栈。 72 73**参数：** 74 75| 名称 | 类型 | 必填 | 描述 | 76| ---- | ----------------------------- | ---- | -------------------- | 77| info | [NavPathInfo](#navpathinfo10) | 是 | NavDestination页面的信息。 | 78 79### pushPathByName<sup>10+</sup> 80 81pushPathByName(name: string, param: unknown): void 82 83将name指定的NavDestination页面信息入栈，传递的数据为param。 84 85**参数：** 86 87| 名称 | 类型 | 必填 | 描述 | 88| ----- | ------- | ---- | --------------------- | 89| name | string | 是 | NavDestination页面名称。 | 90| param | unknown | 是 | NavDestination页面详细参数。 | 91 92### pop<sup>10+</sup> 93 94pop(): NavPathInfo | undefined 95 96弹出路由栈栈顶元素。 97 98**返回值：** 99 100| 类型 | 说明 | 101| ----------- | ------------------------ | 102| NavPathInfo | 返回栈顶NavDestination页面的信息。 | 103| undefined | 当路由栈为空时返回undefined。 | 104 105### popToName<sup>10+</sup> 106 107popToName(name: string): number 108 109回退路由栈到第一个名为name的NavDestination页面。 110 111**参数：** 112 113| 名称 | 类型 | 必填 | 描述 | 114| ---- | ------ | ---- | ------------------- | 115| name | string | 是 | NavDestination页面名称。 | 116 117**返回值：** 118 119| 类型 | 说明 | 120| ------ | ---------------------------------------- | 121| number | 如果栈中存在名为name的NavDestination页面，则返回第一个名为name的NavDestination页面的索引，否则返回-1。 | 122 123### popToIndex<sup>10+</sup> 124 125popToIndex(index: number): void 126 127回退路由栈到index指定的NavDestination页面。 128 129**参数：** 130 131| 名称 | 类型 | 必填 | 描述 | 132| ----- | ------ | ---- | ---------------------- | 133| index | number | 是 | NavDestination页面的位置索引。 | 134 135### moveToTop<sup>10+</sup> 136 137moveToTop(name: string): number 138 139将第一个名为name的NavDestination页面移到栈顶。 140 141**参数：** 142 143| 名称 | 类型 | 必填 | 描述 | 144| ---- | ------ | ---- | ------------------- | 145| name | string | 是 | NavDestination页面名称。 | 146 147**返回值：** 148 149| 类型 | 说明 | 150| ------ | ---------------------------------------- | 151| number | 如果栈中存在名为name的NavDestination页面，则返回第一个名为name的NavDestination页面的当前索引，否则返回-1。 | 152 153### moveIndexToTop<sup>10+</sup> 154 155moveIndexToTop(index: number): void 156 157将index指定的NavDestination页面移到栈顶。 158 159**参数：** 160 161| 名称 | 类型 | 必填 | 描述 | 162| ----- | ------ | ---- | ---------------------- | 163| index | number | 是 | NavDestination页面的位置索引。 | 164 165### clear<sup>10+</sup> 166 167clear(): void 168 169清除栈中所有页面。 170 171### getAllPathName<sup>10+</sup> 172 173getAllPathName(): Array<string\> 174 175获取栈中所有NavDestination页面的名称。 176 177**返回值：** 178 179| 类型 | 说明 | 180| -------------- | -------------------------- | 181| Array<string\> | 返回栈中所有NavDestination页面的名称。 | 182 183### getParamByIndex<sup>10+</sup> 184 185getParamByIndex(index: number): unknown | undefined 186 187获取index指定的NavDestination页面的参数信息。 188 189**参数：** 190 191| 名称 | 类型 | 必填 | 描述 | 192| ----- | ------ | ---- | ---------------------- | 193| index | number | 是 | NavDestination页面的位置索引。 | 194 195**返回值：** 196 197| 类型 | 说明 | 198| --------- | -------------------------- | 199| unknown | 返回对应NavDestination页面的参数信息。 | 200| undefined | 传入index无效时返回undefined。 | 201 202### getParamByName<sup>10+</sup> 203 204getParamByName(name: string): Array<unknown\> 205 206获取全部名为name的NavDestination页面的参数信息。 207 208**参数：** 209 210| 名称 | 类型 | 必填 | 描述 | 211| ---- | ------ | ---- | ------------------- | 212| name | string | 是 | NavDestination页面名称。 | 213 214**返回值：** 215 216| 类型 | 说明 | 217| --------------- | --------------------------------- | 218| Array<unknown\> | 返回全部名为name的NavDestination页面的参数信息。 | 219 220### getIndexByName<sup>10+</sup> 221 222getIndexByName(name: string): Array<number\> 223 224获取全部名为name的NavDestination页面的位置索引。 225 226**参数：** 227 228| 名称 | 类型 | 必填 | 描述 | 229| ---- | ------ | ---- | ------------------- | 230| name | string | 是 | NavDestination页面名称。 | 231 232**返回值：** 233 234| 类型 | 说明 | 235| -------------- | --------------------------------- | 236| Array<number\> | 返回全部名为name的NavDestination页面的位置索引。 | 237 238### size<sup>10+</sup> 239 240size(): number 241 242获取栈大小。 243 244**返回值：** 245 246| 类型 | 说明 | 247| ------ | ------ | 248| number | 返回栈大小。 | 249 250## NavPathInfo<sup>10+</sup> 251 252路由页面信息。 253 254### constructor 255 256constructor(name: string, param: unknown) 257 258**参数：** 259 260| 名称 | 类型 | 必填 | 描述 | 261| ----- | ------- | ---- | --------------------- | 262| name | string | 是 | NavDestination页面名称。 | 263| param | unknown | 否 | NavDestination页面详细参数。 | 264 265## NavigationMenuItem类型说明 266 267| 名称 | 类型 | 必填 | 描述 | 268| ------ | ------------- | ---- | --------------- | 269| value | string | 是 | 菜单栏单个选项的显示文本。 | 270| icon | string | 否 | 菜单栏单个选项的图标资源路径。 | 271| action | () => void | 否 | 当前选项被选中的事件回调。 | 272 273## object类型说明 274 275| 名称 | 类型 | 必填 | 描述 | 276| ------ | ------------- | ---- | --------------- | 277| value | string | 是 | 工具栏单个选项的显示文本。 | 278| icon | string | 否 | 工具栏单个选项的图标资源路径。 | 279| action | () => void | 否 | 当前选项被选中的事件回调。 | 280 281## ToolbarItem<sup>10+</sup>类型说明 282 283| 名称 | 类型 | 必填 | 描述 | 284| ---------- | ---------------------------------------- | ---- | ---------------------------------------- | 285| value | ResourceStr | 是 | 工具栏单个选项的显示文本。 | 286| icon | ResourceStr | 否 | 工具栏单个选项的图标资源路径。 | 287| action | () => void | 否 | 当前选项被选中的事件回调。 | 288| status | [ToolbarItemStatus](#toolbaritemstatus10枚举说明) | 否 | 工具栏单个选项的状态。<br/>默认值：ToolbarItemStatus.NORMAL | 289| activeIcon | ResourceStr | 否 | 工具栏单个选项处于ACTIVE态时的图标资源路径。 | 290 291## ToolbarItemStatus<sup>10+</sup>枚举说明 292 293| 名称 | 描述 | 294| -------- | ---------------------------------------- | 295| NORMAL | 设置工具栏单个选项为NORMAL态，该选项显示默认样式，可以触发Hover，Press，Focus事件并显示对应的多态样式。 | 296| DISABLED | 设置工具栏单个选项为DISABLED态， 该选项显示DISABLED态样式，并且不可交互。 | 297| ACTIVE | 设置工具栏单个选项为ACTIVE态， 该选项通过点击事件可以将icon图标更新为activeIcon对应的图片资源。 | 298 299## NavigationTitleMode枚举说明 300 301| 名称 | 描述 | 302| ---- | ---------------------------------------- | 303| Free | 当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。<br/>**说明：** <br/>标题随着内容滚动大小联动的动效在title设置为ResourceStr和NavigationCommonTitle时生效，设置成其余自定义节点类型时字体样式无法变化，下拉时只影响标题栏偏移。 | 304| Mini | 固定为小标题模式。 | 305| Full | 固定为大标题模式。 | 306 307## NavigationCommonTitle类型说明 308 309| 名称 | 类型 | 必填 | 描述 | 310| ---- | ------ | ---- | ------ | 311| main | string | 是 | 设置主标题。 | 312| sub | string | 是 | 设置副标题。 | 313 314## NavigationCustomTitle类型说明 315 316| 名称 | 类型 | 必填 | 描述 | 317| ------- | ---------------------------------------- | ---- | -------- | 318| builder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 设置标题栏内容。 | 319| height | [TitleHeight](#titleheight枚举说明) \| [Length](ts-types.md#length) | 是 | 设置标题栏高度。 | 320 321## NavBarPosition枚举说明 322 323| 名称 | 描述 | 324| ----- | ---------------- | 325| Start | 双栏显示时，主列在主轴方向首部。 | 326| End | 双栏显示时，主列在主轴方向尾部。 | 327 328## NavigationMode枚举说明 329 330| 名称 | 描述 | 331| ----- | ------------------------------------------------------------ | 332| Stack | 导航栏与内容区独立显示，相当于两个页面。 | 333| Split | 导航栏与内容区分两栏显示。<br/>以下navBarWidthRange的值用[minNavBarWidth,maxNavBarWidth]表示<br/>1.当navBarWidth属性的值，在navBarWidthRange属性的值范围以外时，navBarWidth按如下规则显示：<br/>navBarWidth < minNavBarWidth时，navBarWidth修正为minNavBarWidth;<br/>navBarWidth > maxNavBarWidth，且组件宽度 - minContentWidth - 分割线宽度(1vp)大于maxNavBarWidth时，navBarWidth修正为maxNavBarWidth;<br/>navBarWidth > maxNavBarWidth，且组件宽度 - minContentWidth - 分割线宽度(1vp)小于minNavBarWidth时，navBarWidth修正为minNavBarWidth;<br/>navBarWidth > maxNavBarWidth，且组件宽度 - minContentWidth - 分割线宽度(1vp)在navBarWidthRange范围内，navBarWidth修正为组件宽度 - 分割线宽度(1vp) - minContentWidth。<br/>2.当navBarWidth属性的值，在navBarWidthRange属性的值范围以内时，navBarWidth按如下规则显示：<br/>minNavBarWidth + minContentWidth + 分割线宽度(1vp) >= 组件宽度时，navBarWidth修正为minNavBarWidth；<br/>minNavBarWidth + minContentWidth + 分割线宽度(1vp) < 组件宽度，且navBarWidth + minContentWidth + 分割线宽度(1vp) >= 组件宽度时，navBarWidth修正为组件宽度 - 分割线宽度(1vp) - minContentWidth;<br/>minNavBarWidth + minContentWidth + 分割线宽度(1vp) < 组件宽度，且navBarWidth + minContentWidth + 分割线宽度(1vp) < 组件宽度时，navBarWidth为设置的值。<br/>3.缩小组件尺寸时，先缩小内容区的尺寸至minContentWidth，然后再缩小导航栏的尺寸至minNavBarWidth。若继续缩小，先缩小内容区，内容区消失后再缩小导航栏。<br/>4.设置导航栏为固定尺寸时，若持续缩小组件尺寸，导航栏最后压缩显示。<br/>5.若只设置了navBarWidth属性，则导航栏宽度为navBarWidth，且分割线不可拖动。 | 334| Auto | API version 9之前：窗口宽度>=520vp时，采用Split模式显示；窗口宽度<520vp时，采用Stack模式显示。<br/>API version 10及以上：窗口宽度>=600vp时，采用Split模式显示；窗口宽度<600vp时，采用Stack模式显示，600vp等于minNavBarWidth(240vp) + minContentWidth (360vp)。 | 335 336## TitleHeight枚举说明 337 338| 名称 | 描述 | 339| ----------- | -------------------------- | 340| MainOnly | 只有主标题时标题栏的推荐高度（56vp）。 | 341| MainWithSub | 同时有主标题和副标题时标题栏的推荐高度（82vp）。 | 342 343 344> **说明：** 345> 346> 目前可滚动组件只支持List。 347 348 349## 示例 350 351### 示例1 352 353```ts 354// xxx.ets 355class A { 356 text: string = '' 357 num: number = 0 358} 359 360@Entry 361@Component 362struct NavigationExample { 363 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 364 @State currentIndex: number = 0 365 366 @Builder NavigationTitle() { 367 Column() { 368 Text('Title') 369 .fontColor('#182431') 370 .fontSize(30) 371 .lineHeight(41) 372 .fontWeight(700) 373 Text('subtitle') 374 .fontColor('#182431') 375 .fontSize(14) 376 .lineHeight(19) 377 .opacity(0.4) 378 .margin({ top: 2, bottom: 20 }) 379 }.alignItems(HorizontalAlign.Start) 380 } 381 382 @Builder NavigationMenus() { 383 Row() { 384 Image('common/ic_public_add.svg') 385 .width(24) 386 .height(24) 387 Image('common/ic_public_add.svg') 388 .width(24) 389 .height(24) 390 .margin({ left: 24 }) 391 Image('common/ic_public_more.svg') 392 .width(24) 393 .height(24) 394 .margin({ left: 24 }) 395 } 396 } 397 398 build() { 399 Column() { 400 Navigation() { 401 TextInput({ placeholder: 'search...' }) 402 .width('90%') 403 .height(40) 404 .backgroundColor('#FFFFFF') 405 .margin({ top: 8 }) 406 407 List({ space: 12, initialIndex: 0 }) { 408 ForEach(this.arr, (item: number) => { 409 ListItem() { 410 Text('' + item) 411 .width('90%') 412 .height(72) 413 .backgroundColor('#FFFFFF') 414 .borderRadius(24) 415 .fontSize(16) 416 .fontWeight(500) 417 .textAlign(TextAlign.Center) 418 }.editable(true) 419 }, (item: number) => item.toString()) 420 } 421 .height(324) 422 .width('100%') 423 .margin({ top: 12, left: '10%' }) 424 } 425 .title(this.NavigationTitle) 426 .menus(this.NavigationMenus) 427 .titleMode(NavigationTitleMode.Full) 428 .toolbarConfiguration([ 429 { 430 value: $r("app.string.navigation_toolbar_add"), 431 icon: $r("app.media.ic_public_highlightsed") 432 }, 433 { 434 value: $r("app.string.navigation_toolbar_app"), 435 icon: $r("app.media.ic_public_highlights") 436 }, 437 { 438 value: $r("app.string.navigation_toolbar_collect"), 439 icon: $r("app.media.ic_public_highlights") 440 } 441 ]) 442 .hideTitleBar(false) 443 .hideToolBar(false) 444 .onTitleModeChange((titleModel: NavigationTitleMode) => { 445 console.info('titleMode' + titleModel) 446 }) 447 }.width('100%').height('100%').backgroundColor('#F1F3F5') 448 } 449} 450``` 451 452 453 454 455 456### 示例2 457```ts 458// Index.ets 459import { pageOneTmp } from './pageOne' 460import { pageTwoTmp } from './pageTwo' 461import { pages } from './pageTwo' 462 463@Entry 464@Component 465struct NavigationExample { 466 @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack() 467 468 @Builder 469 PageMap(name: string) { 470 if (name === 'pageOne') { 471 pageOneTmp() 472 } else if (name === 'pageTwo') { 473 pageTwoTmp({ names: name, values: this.pageInfos } as pages) 474 } 475 } 476 477 build() { 478 Navigation(this.pageInfos) { 479 Column() { 480 Button('pushPath', { stateEffect: true, type: ButtonType.Capsule }) 481 .width('80%') 482 .height(40) 483 .margin(20) 484 .onClick(() => { 485 this.pageInfos.pushPath({ name: 'pageOne' }) //将name指定的NavDestination页面信息入栈 486 }) 487 } 488 }.title('NavIndex').navDestination(this.PageMap) 489 } 490} 491``` 492```ts 493// pageOne.ets 494class tmpClass{ 495 count:number=10 496} 497@Component 498export struct pageOneTmp { 499 @Consume('pageInfos') pageInfos: NavPathStack; 500 501 build() { 502 NavDestination() { 503 Column() { 504 Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule }) 505 .width('80%') 506 .height(40) 507 .margin(20) 508 .onClick(() => { 509 let tmp = new tmpClass() 510 this.pageInfos.pushPathByName('pageTwo', tmp) //将name指定的NavDestination页面信息入栈，传递的数据为param 511 }) 512 Button('popToname', { stateEffect: true, type: ButtonType.Capsule }) 513 .width('80%') 514 .height(40) 515 .margin(20) 516 .onClick(() => { 517 this.pageInfos.popToName('pageTwo') //回退路由栈到第一个名为name的NavDestination页面 518 console.log('popToName' + JSON.stringify(this.pageInfos), '返回值' + JSON.stringify(this.pageInfos.popToName('pageTwo'))) 519 }) 520 Button('popToIndex', { stateEffect: true, type: ButtonType.Capsule }) 521 .width('80%') 522 .height(40) 523 .margin(20) 524 .onClick(() => { 525 this.pageInfos.popToIndex(1) // 回退路由栈到index指定的NavDestination页面 526 console.log('popToIndex' + JSON.stringify(this.pageInfos)) 527 }) 528 Button('moveToTop', { stateEffect: true, type: ButtonType.Capsule }) 529 .width('80%') 530 .height(40) 531 .margin(20) 532 .onClick(() => { 533 this.pageInfos.moveToTop('pageTwo') // 将第一个名为name的NavDestination页面移到栈顶 534 console.log('moveToTop' + JSON.stringify(this.pageInfos), '返回值' + JSON.stringify(this.pageInfos.moveToTop('pageTwo'))) 535 }) 536 Button('moveIndexToTop', { stateEffect: true, type: ButtonType.Capsule }) 537 .width('80%') 538 .height(40) 539 .margin(20) 540 .onClick(() => { 541 this.pageInfos.moveIndexToTop(1) // 将index指定的NavDestination页面移到栈顶 542 console.log('moveIndexToTop' + JSON.stringify(this.pageInfos)) 543 }) 544 Button('clear', { stateEffect: true, type: ButtonType.Capsule }) 545 .width('80%') 546 .height(40) 547 .margin(20) 548 .onClick(() => { 549 this.pageInfos.clear() //清除栈中所有页面 550 }) 551 Button('get', { stateEffect: true, type: ButtonType.Capsule }) 552 .width('80%') 553 .height(40) 554 .margin(20) 555 .onClick(() => { 556 console.log('-------------------') 557 console.log('获取栈中所有NavDestination页面的名称', JSON.stringify(this.pageInfos.getAllPathName())) 558 console.log('获取index指定的NavDestination页面的参数信息', JSON.stringify(this.pageInfos.getParamByIndex(1))) 559 console.log('获取全部名为name的NavDestination页面的参数信息', JSON.stringify(this.pageInfos.getParamByName('pageTwo'))) 560 console.log('获取全部名为name的NavDestination页面的位置索引', JSON.stringify(this.pageInfos.getIndexByName('pageOne'))) 561 console.log('获取栈大小', JSON.stringify(this.pageInfos.size())) 562 }) 563 }.width('100%').height('100%') 564 }.title('pageOne') 565 .onBackPressed(() => { 566 this.pageInfos.pop() // 弹出路由栈栈顶元素 567 console.log('pop' + '返回值' + JSON.stringify(this.pageInfos.pop())) 568 return true 569 }) 570 } 571} 572``` 573```ts 574// pageTwo.ets 575 576export class pages { 577 names: string = "" 578 values: NavPathStack | null = null 579} 580 581@Builder 582export function pageTwoTmp(info: pages) { 583 NavDestination() { 584 Column() { 585 Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule }) 586 .width('80%') 587 .height(40) 588 .margin(20) 589 .onClick(() => { 590 (info.values as NavPathStack).pushPathByName('pageOne', null) 591 }) 592 }.width('100%').height('100%') 593 }.title('pageTwo') 594 .onBackPressed(() => { 595 (info.values as NavPathStack).pop() 596 return true 597 }) 598} 599``` 600
