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