1# Navigation 2 3The **\<Navigation>** component typically functions as the root container of a page and displays the title bar, toolbar, and navigation bar based on the attribute settings. 4 5> **NOTE** 6> 7> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Supported 13 14Since API version 9, it is recommended that this component be used together with the **[\<NavRouter>](ts-basic-components-navrouter.md)** component. 15 16## APIs 17 18### Navigation 19 20Navigation() 21 22### Navigation<sup>10+</sup> 23 24Navigation(pathInfos: NavPathStack) 25 26Binds a navigation stack to the **\<Navigation>** component. 27 28**Parameters** 29 30| Name | Type | Mandatory | Description | 31| --------- | ------------------------------- | ---- | ------ | 32| pathInfos | [NavPathStack](#navpathstack10) | No | Information about the navigation stack.| 33 34## Attributes 35 36In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 37 38| Name | Type | Description | 39| ---------------------------------- | ---------------------------------------- | ---------------------------------------- | 40| 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> | Page title.<br>**NOTE**<br>When the NavigationCustomTitle type is used to set the height, the **titleMode** attribute does not take effect.<br>When the title string is too long: (1) If no subtitle is set, the string is scaled down, wrapped in two lines, and then clipped with an ellipsis (...); (2) If a subtitle is set, the subtitle is scaled down and then clipped with an ellipsis (...).| 41| subTitle<sup>(deprecated)</sup> | string | Subtitle of the page. If this attribute is not set, no subtitle is displayed. This attribute is deprecated since API version 9. You are advised to use **title** instead.| 42| menus | Array<[NavigationMenuItem](#navigationmenuitem)> \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Menu items in the upper right corner of the page. If this attribute is not set, no menu item is displayed. When the value type is Array<[NavigationMenuItem](#navigationmenuitem)>, the menu shows a maximum of three icons in portrait mode and a maximum of five icons in landscape mode, with excess icons (if any) placed under the automatically generated **More** icon.| 43| titleMode | [NavigationTitleMode](#navigationtitlemode) | Display mode of the page title bar.<br>Default value: **NavigationTitleMode.Free**| 44| toolBar<sup>(deprecated)</sup> | [object](#object) \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Content of the toolbar. If this attribute is not set, no toolbar is displayed.<br>**items**: all items on the toolbar.<br>**NOTE**<br>Items are evenly distributed on the toolbar at the bottom. Text and icons are evenly distributed in each content area. If the text is too long, it is scaled down level by level, wrapped in two lines, and then clipped with an ellipsis (...).<br>This API is deprecated since API version 10. You are advised to use **toolbarConfiguration** instead.| 45| toolbarConfiguration<sup>10+</sup> | Array<[ToolbarItem](#toolbaritem10)<sup>10+</sup>> \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Content of the toolbar. If this attribute is not set, no toolbar is displayed.<br>**NOTE**<br>When the value type is Array<[ToolbarItem](#ToolbarItem>, the toolbar exhibits the following features:<br>Items are evenly distributed on the toolbar at the bottom. Text and icons are evenly distributed in each content area.<br>If any item contains overlong text and there are fewer than five items, the following measures are taken: 1. Increase the item's width to accommodate the text until it is as large as the screen width; 2. Scale down the text level by level; 3. Wrap the text in two lines; 4. Clip the text with an ellipsis (...).<br>The toolbar shows a maximum of five icons in portrait mode, with excess icons (if any) placed under the automatically generated **More** icon. In landscape mode, this attribute must be used together with Array<[NavigationMenuItem](#navigationmenuitem)> of the **menus** attribute; the toolbar at the bottom is automatically hidden, and all items on the toolbar are moved to the menu in the upper right corner of the screen.<br>When the value type is [CustomBuilder](ts-types.md#custombuilder8), and the toolbar does not exhibit the preceding features except that items are evenly distributed on the toolbar at the bottom.| 46| hideToolBar | boolean | Whether to hide the toolbar.<br>Default value: **false**<br>**true**: Hide the toolbar.<br>**false**: Show the toolbar.| 47| hideTitleBar | boolean | Whether to hide the title bar.<br>Default value: **false**<br>**true**: Hide the title bar.<br>**false**: Show the title bar.| 48| hideBackButton | boolean | Whether to hide the back button.<br>Default value: **false**<br>**true**: Hide the back button.<br>**false**: Show the back button.<br>The back button in the title bar of the **\<NavDestination>** component cannot be hidden.<br>**NOTE**<br>The back button works only when **titleMode** is set to **NavigationTitleMode.Mini**.| 49| navBarWidth<sup>9+</sup> | [Length](ts-types.md#length) | Width of the navigation bar.<br>Default value: **240**<br>Unit: vp<br>**NOTE**<br>This attribute is valid only when the **\<Navigation>** component is split.| 50| navBarPosition<sup>9+</sup> | [NavBarPosition](#navbarposition) | Position of the navigation bar.<br>Default value: **NavBarPosition.Start**<br>**NOTE**<br>This attribute is valid only when the **\<Navigation>** component is split.| 51| mode<sup>9+</sup> | [NavigationMode](#navigationmode) | Display mode of the navigation bar.<br>Default value: **NavigationMode.Auto**<br>At the default settings, the component adapts to a single column or two columns based on the component width.<br>**NOTE**<br>Available options are **Stack**, **Split**, and **Auto**.| 52| backButtonIcon<sup>9+</sup> | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Back button icon on the navigation bar. The back button in the title bar of the **\<NavDestination>** component cannot be hidden.| 53| hideNavBar<sup>9+</sup> | boolean | Whether to hide the navigation bar.| 54| navDestination<sup>10+</sup> | builder: (name: string, param: unknown) => void | Creates a **\<NavDestination>** component.<br>**NOTE**<br>The **builder** function is used, with the **name** and **param** parameters passed in. In the builder, a layer of custom components can be included outside the **\<NavDestination>** component. However, no attributes or events can be set for the custom components. Otherwise, only blank components are displayed.| 55| navBarWidthRange<sup>10+</sup> | [[Dimension](ts-types.md#dimension10), [Dimension](ts-types.md#dimension10)] | Minimum and maximum widths of the navigation bar (valid in dual-column mode).<br>Default value: **240** for the minimum value; 40% of the component width (not greater than 432) for the maximum value<br>Unit: vp<br>Priority rules:<br>Custom value > Default value<br>Minimum value > Maximum value<br>navBar > content<br>If values conflict, the global value takes precedence, and the local minimum value depends on the container size.| 56| minContentWidth<sup>10+</sup> | [Dimension](ts-types.md#dimension10) | Minimum width of the navigation bar content area (valid in dual-column mode).<br>Default value: **360**<br>Unit: vp<br>Priority rules:<br>Custom value > Default value<br>Minimum value > Maximum value<br>navBar > content<br>If values conflict, the global value takes precedence, and the local minimum value depends on the container size.<br>Breakpoint calculation in Auto mode: default 600 vp = minNavBarWidth (240 vp) + minContentWidth (360 vp)| 57 58## Events 59 60| Name | Description | 61| ---------------------------------------- | ---------------------------------------- | 62| onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void) | Called when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls.| 63| onNavBarStateChange(callback: (isVisible: boolean) => void) | Called when the navigation bar visibility status changes. The value **true** means that the navigation bar is displayed, and **false** means the opposite.| 64 65## NavPathStack<sup>10+</sup> 66 67Implements a navigation stack. 68 69### pushPath<sup>10+</sup> 70 71pushPath(info: NavPathInfo): void 72 73Pushes the navigation destination page specified by **info** to the navigation stack. 74 75**Parameters** 76 77| Name | Type | Mandatory | Description | 78| ---- | ----------------------------- | ---- | -------------------- | 79| info | [NavPathInfo](#navpathinfo10) | Yes | Information about the navigation destination page.| 80 81### pushPathByName<sup>10+</sup> 82 83pushPathByName(name: string, param: unknown): void 84 85Pushes the navigation destination page specified by **name** to the navigation stack. 86 87**Parameters** 88 89| Name | Type | Mandatory | Description | 90| ----- | ------- | ---- | --------------------- | 91| name | string | Yes | Name of the navigation destination page. | 92| param | unknown | Yes | Parameter information of the navigation destination page.| 93 94### pop<sup>10+</sup> 95 96pop(): NavPathInfo | undefined 97 98Pops the top element out of the navigation stack. 99 100**Return value** 101 102| Type | Description | 103| ----------- | ------------------------ | 104| NavPathInfo | Returns the information about the navigation destination page at the top of the stack.| 105| undefined | Returns **undefined** if the navigation stack is empty. | 106 107### popToName<sup>10+</sup> 108 109popToName(name: string): number 110 111Returns the navigation stack to the first navigation destination page that matches the value of **name**. 112 113**Parameters** 114 115| Name | Type | Mandatory | Description | 116| ---- | ------ | ---- | ------------------- | 117| name | string | Yes | Name of the navigation destination page.| 118 119**Return value** 120 121| Type | Description | 122| ------ | ---------------------------------------- | 123| number | Returns the index of the first navigation destination page that matches the value of **name** if it exists in the navigation stack; returns **-1** otherwise.| 124 125### popToIndex<sup>10+</sup> 126 127popToIndex(index: number): void 128 129Returns the navigation stack to the navigation destination page that matches the value of **index**. 130 131**Parameters** 132 133| Name | Type | Mandatory | Description | 134| ----- | ------ | ---- | ---------------------- | 135| index | number | Yes | Index of the navigation destination page.| 136 137### moveToTop<sup>10+</sup> 138 139moveToTop(name: string): number 140 141Moves to the top of the navigation stack the first navigation destination page that matches the value of **name**. 142 143**Parameters** 144 145| Name | Type | Mandatory | Description | 146| ---- | ------ | ---- | ------------------- | 147| name | string | Yes | Name of the navigation destination page.| 148 149**Return value** 150 151| Type | Description | 152| ------ | ---------------------------------------- | 153| number | Returns the index of the first navigation destination page that matches the value of **name** if it exists in the navigation stack; returns **-1** otherwise.| 154 155### moveIndexToTop<sup>10+</sup> 156 157moveIndexToTop(index: number): void 158 159Moves to the top of the navigation stack the navigation destination page that matches the value of **index**. 160 161**Parameters** 162 163| Name | Type | Mandatory | Description | 164| ----- | ------ | ---- | ---------------------- | 165| index | number | Yes | Index of the navigation destination page.| 166 167### clear<sup>10+</sup> 168 169clear(): void 170 171Clears the navigation stack. 172 173### getAllPathName<sup>10+</sup> 174 175getAllPathName(): Array<string\> 176 177Obtains the names of all navigation destination pages in the navigation stack. 178 179**Return value** 180 181| Type | Description | 182| -------------- | -------------------------- | 183| Array<string\> | Names of all navigation destination pages in the navigation stack.| 184 185### getParamByIndex<sup>10+</sup> 186 187getParamByIndex(index: number): unknown | undefined 188 189Obtains the parameter information of the navigation destination page that matches the value of **index**. 190 191**Parameters** 192 193| Name | Type | Mandatory | Description | 194| ----- | ------ | ---- | ---------------------- | 195| index | number | Yes | Index of the navigation destination page.| 196 197**Return value** 198 199| Type | Description | 200| --------- | -------------------------- | 201| unknown | Returns the parameter information of the matching navigation destination page.| 202| undefined | Returns **undefined** if the passed index is invalid. | 203 204### getParamByName<sup>10+</sup> 205 206getParamByName(name: string): Array<unknown\> 207 208Obtains the parameter information of all the navigation destination pages that match the value of **name**. 209 210**Parameters** 211 212| Name | Type | Mandatory | Description | 213| ---- | ------ | ---- | ------------------- | 214| name | string | Yes | Name of the navigation destination page.| 215 216**Return value** 217 218| Type | Description | 219| --------------- | --------------------------------- | 220| Array<unknown\> | Parameter information of all the matching navigation destination pages.| 221 222### getIndexByName<sup>10+</sup> 223 224getIndexByName(name: string): Array<number\> 225 226Obtains the indexes of all the navigation destination pages that match the value of **name**. 227 228**Parameters** 229 230| Name | Type | Mandatory | Description | 231| ---- | ------ | ---- | ------------------- | 232| name | string | Yes | Name of the navigation destination page.| 233 234**Return value** 235 236| Type | Description | 237| -------------- | --------------------------------- | 238| Array<number\> | Indexes of all the matching navigation destination pages.| 239 240### size<sup>10+</sup> 241 242size(): number 243 244Obtains the stack size. 245 246**Return value** 247 248| Type | Description | 249| ------ | ------ | 250| number | Stack size.| 251 252## NavPathInfo<sup>10+</sup> 253 254Describes the navigation page information. 255 256### constructor 257 258constructor(name: string, param: unknown) 259 260**Parameters** 261 262| Name | Type | Mandatory | Description | 263| ----- | ------- | ---- | --------------------- | 264| name | string | Yes | Name of the navigation destination page. | 265| param | unknown | No | Parameter information of the navigation destination page.| 266 267## NavigationMenuItem 268 269| Name | Type | Mandatory | Description | 270| ------ | ------------- | ---- | --------------- | 271| value | string | Yes | Text of a menu item. | 272| icon | string | No | Icon path of a menu item.| 273| action | () => void | No | Callback invoked when a menu item is selected. | 274 275## object 276 277| Name | Type | Mandatory | Description | 278| ------ | ------------- | ---- | --------------- | 279| value | string | Yes | Text of a toolbar item. | 280| icon | string | No | Icon path of a toolbar item.| 281| action | () => void | No | Callback invoked when a toolbar item is selected. | 282 283## ToolbarItem<sup>10+</sup> 284 285| Name | Type | Mandatory | Description | 286| ---------- | ---------------------------------------- | ---- | ---------------------------------------- | 287| value | ResourceStr | Yes | Text of a toolbar item. | 288| icon | ResourceStr | No | Icon path of a toolbar item. | 289| action | () => void | No | Callback invoked when a toolbar item is selected. | 290| status | [ToolbarItemStatus](#toolbaritemstatus10) | No | Status of a toolbar item.<br>Default value: **ToolbarItemStatus.NORMAL**| 291| activeIcon | ResourceStr | No | Icon path of the toolbar item in the active state. | 292 293## ToolbarItemStatus<sup>10+</sup> 294 295| Name | Description | 296| -------- | ---------------------------------------- | 297| NORMAL | Normal state. In this state, the toolbar item takes on the default style and can switch to another state-specific style by responding to the hover, press, and focus events.| 298| DISABLED | Disabled state. In this state, the toolbar item is disabled and does not allow for user interactions.| 299| ACTIVE | Active state. In this state, the toolbar item can update its icon to the one specified by **activeIcon** by responding to a click event.| 300 301## NavigationTitleMode 302 303| Name | Description | 304| ---- | ---------------------------------------- | 305| Free | When the content is a scrollable component, the main title shrinks as the content scrolls down (the subtitle fades out with its size remaining unchanged) and restores as the content scrolls up to the top.<br>**NOTE**<br>The size linkage effect works only when **title** is set to **ResourceStr** or **NavigationCommonTitle**. If **title** is set to any other value type, the main title changes in mere location when pulled down.| 306| Mini | The title is fixed at mini mode. | 307| Full | The title is fixed at full mode. | 308 309## NavigationCommonTitle 310 311| Name | Type | Mandatory | Description | 312| ---- | ------ | ---- | ------ | 313| main | string | Yes | Main title.| 314| sub | string | Yes | Subtitle.| 315 316## NavigationCustomTitle 317 318| Name | Type | Mandatory | Description | 319| ------- | ---------------------------------------- | ---- | -------- | 320| builder | [CustomBuilder](ts-types.md#custombuilder8) | Yes | Content of the title bar.| 321| height | [TitleHeight](#titleheight) \| [Length](ts-types.md#length) | Yes | Height of the title bar.| 322 323## NavBarPosition 324 325| Name | Description | 326| ----- | ---------------- | 327| Start | When two columns are displayed, the main column is at the start of the main axis.| 328| End | When two columns are displayed, the main column is at the end of the main axis.| 329 330## NavigationMode 331 332| Name | Description | 333| ----- | ------------------------------------------------------------ | 334| Stack | The navigation bar and content area are displayed independently of each other, which are equivalent to two pages. | 335| Split | The navigation bar and content area are displayed in different columns.<br>The values of **navBarWidthRange** are represented by [minNavBarWidth,maxNavBarWidth].<br>1. When the value of **navBarWidth** is beyond the value range specified by **navBarWidthRange**, **navBarWidth** is set according to the following rules:<br>Value of **navBarWidth** < Value of **minNavBarWidth**: The value of **navBarWidth** is changed to that of **minNavBarWidth**.<br>Value of **navBarWidth** > Value of **maxNavBarWidth** and Component width - Value of **minContentWidth** - Divider width (1 vp) > Value of **maxNavBarWidth**: The value of **navBarWidth** is changed to that of **maxNavBarWidth**.<br>Value of **navBarWidth** > Value of **maxNavBarWidth** and Component width - Value of **minContentWidth** - Divider width (1 vp) < Value of **minNavBarWidth**: The value of **navBarWidth** is changed to that of **minNavBarWidth**.<br>Value of **navBarWidth** > Value of **maxNavBarWidth** and Component width - Value of **minContentWidth** - Divider width (1 vp) is within the value range specified by **navBarWidthRange**: The value of **navBarWidth** is changed to Component width - Value of **minContentWidth** - Divider width (1 vp).<br>2. When the value of **navBarWidth** is within the value range specified by **navBarWidthRange**, **navBarWidth** is set according to the following rules:<br>Value of **minNavBarWidth** + Value of **minContentWidth** + Divider width (1 vp) > = Component width: The value of **navBarWidth** is changed to that of **minNavBarWidth**.<br>Value of **minNavBarWidth** + Value of **minContentWidth** + Divider width (1 vp) < Component width and Value of **navBarWidth** + Value of **minContentWidth** + Divider width (1 vp) > = Component width: The value of **navBarWidth** is changed to Component width - Value of **minContentWidth** - Divider width (1 vp).<br>Value of **minNavBarWidth** + Value of **minContentWidth** + Divider width (1 vp) < Component width and Value of **navBarWidth** + Value of **minContentWidth** + Divider width (1 vp) < Component width: The value of **navBarWidth** is the set value. <br>3. When the component size is decreased, the content area is shrunk until its width reaches the value defined by **minContentWidth**, and then the navigation bar is shrunk until its width reaches the value defined by **minNavBarWidth**; if the component size is further decreased, the content area is further shrunk until it disappears, and then navigation bar is shrunk.<br>4. When the navigation bar is set to a fixed size and the component size is continuously decreased, the navigation bar is shrunk.<br>5. If only **navBarWidth** is set, the width of the navigation bar is fixed at the value of **navBarWidth**, and the divider cannot be dragged.| 336| Auto | In API version 9 and earlier versions: When the window width is greater than or equal to 520 vp, the Split mode is used. In other cases, the Stack mode is used.<br>In API version 10 and later versions: When the window width is greater than or equal to 600 vp, the Split mode is used. In other cases, the Stack mode is used. 600 vp = minNavBarWidth (240 vp) + minContentWidth (360 vp).| 337 338## TitleHeight 339 340| Name | Description | 341| ----------- | -------------------------- | 342| MainOnly | Recommended height (56 vp) of the title bar when only the main title is available. | 343| MainWithSub | Recommended height (82 vp) of the title bar when both the main title and subtitle exist.| 344 345 346> **NOTE** 347> 348> Among the scrollable components, only **\<List>** is supported. 349 350 351## Example 352 353### Example 1 354 355```ts 356// xxx.ets 357class A { 358 text: string = '' 359 num: number = 0 360} 361 362@Entry 363@Component 364struct NavigationExample { 365 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 366 @State currentIndex: number = 0 367 368 @Builder NavigationTitle() { 369 Column() { 370 Text('Title') 371 .fontColor('#182431') 372 .fontSize(30) 373 .lineHeight(41) 374 .fontWeight(700) 375 Text('subtitle') 376 .fontColor('#182431') 377 .fontSize(14) 378 .lineHeight(19) 379 .opacity(0.4) 380 .margin({ top: 2, bottom: 20 }) 381 }.alignItems(HorizontalAlign.Start) 382 } 383 384 @Builder NavigationMenus() { 385 Row() { 386 Image('common/ic_public_add.svg') 387 .width(24) 388 .height(24) 389 Image('common/ic_public_add.svg') 390 .width(24) 391 .height(24) 392 .margin({ left: 24 }) 393 Image('common/ic_public_more.svg') 394 .width(24) 395 .height(24) 396 .margin({ left: 24 }) 397 } 398 } 399 400 build() { 401 Column() { 402 Navigation() { 403 TextInput({ placeholder: 'search...' }) 404 .width('90%') 405 .height(40) 406 .backgroundColor('#FFFFFF') 407 .margin({ top: 8 }) 408 409 List({ space: 12, initialIndex: 0 }) { 410 ForEach(this.arr, (item: number) => { 411 ListItem() { 412 Text('' + item) 413 .width('90%') 414 .height(72) 415 .backgroundColor('#FFFFFF') 416 .borderRadius(24) 417 .fontSize(16) 418 .fontWeight(500) 419 .textAlign(TextAlign.Center) 420 }.editable(true) 421 }, (item: number) => item.toString()) 422 } 423 .height(324) 424 .width('100%') 425 .margin({ top: 12, left: '10%' }) 426 } 427 .title(this.NavigationTitle) 428 .menus(this.NavigationMenus) 429 .titleMode(NavigationTitleMode.Full) 430 .toolbarConfiguration([ 431 { 432 value: $r("app.string.navigation_toolbar_add"), 433 icon: $r("app.media.ic_public_highlightsed") 434 }, 435 { 436 value: $r("app.string.navigation_toolbar_app"), 437 icon: $r("app.media.ic_public_highlights") 438 }, 439 { 440 value: $r("app.string.navigation_toolbar_collect"), 441 icon: $r("app.media.ic_public_highlights") 442 } 443 ]) 444 .hideTitleBar(false) 445 .hideToolBar(false) 446 .onTitleModeChange((titleModel: NavigationTitleMode) => { 447 console.info('titleMode' + titleModel) 448 }) 449 }.width('100%').height('100%').backgroundColor('#F1F3F5') 450 } 451} 452``` 453 454 455 456 457 458### Example 2 459```ts 460// Index.ets 461import { pageOneTmp } from './pageOne' 462import { pageTwoTmp } from './pageTwo' 463import { pages } from './pageTwo' 464 465@Entry 466@Component 467struct NavigationExample { 468 @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack() 469 470 @Builder 471 PageMap(name: string) { 472 if (name === 'pageOne') { 473 pageOneTmp() 474 } else if (name === 'pageTwo') { 475 pageTwoTmp({ names: name, values: this.pageInfos } as pages) 476 } 477 } 478 479 build() { 480 Navigation(this.pageInfos) { 481 Column() { 482 Button('pushPath', { stateEffect: true, type: ButtonType.Capsule }) 483 .width('80%') 484 .height(40) 485 .margin(20) 486 .onClick(() => { 487 this.pageInfos.pushPath({ name:'pageOne'}) // Push the navigation destination page specified by name to the navigation stack. 488 }) 489 } 490 }.title('NavIndex').navDestination(this.PageMap) 491 } 492} 493``` 494```ts 495// pageOne.ets 496class tmpClass{ 497 count:number=10 498} 499@Component 500export struct pageOneTmp { 501 @Consume('pageInfos') pageInfos: NavPathStack; 502 503 build() { 504 NavDestination() { 505 Column() { 506 Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule }) 507 .width('80%') 508 .height(40) 509 .margin(20) 510 .onClick(() => { 511 let tmp = new tmpClass() 512 this.pageInfos.pushPathByName('pageTwo', tmp) // Push the navigation destination page specified by name to the navigation stack, with the data specified by param passed in. 513 }) 514 Button('popToname', { stateEffect: true, type: ButtonType.Capsule }) 515 .width('80%') 516 .height(40) 517 .margin(20) 518 .onClick(() => { 519 this.pageInfos.popToName('pageTwo') // Return the navigation stack to the first navigation destination page that matches the value of name. 520 console.log('popToName' + JSON.stringify(this.pageInfos), 'Return value' + JSON.stringify(this.pageInfos.popToName('pageTwo'))) 521 }) 522 Button('popToIndex', { stateEffect: true, type: ButtonType.Capsule }) 523 .width('80%') 524 .height(40) 525 .margin(20) 526 .onClick(() => { 527 this.pageInfos.popToIndex(1) // Return the navigation stack to the navigation destination page that matches the value of index. 528 console.log('popToIndex' + JSON.stringify(this.pageInfos)) 529 }) 530 Button('moveToTop', { stateEffect: true, type: ButtonType.Capsule }) 531 .width('80%') 532 .height(40) 533 .margin(20) 534 .onClick(() => { 535 this.pageInfos.moveToTop('pageTwo') // Move to the top of the navigation stack the first navigation destination page that matches the value of name. 536 console.log('moveToTop' + JSON.stringify(this.pageInfos), 'Return value' + JSON.stringify(this.pageInfos.moveToTop('pageTwo'))) 537 }) 538 Button('moveIndexToTop', { stateEffect: true, type: ButtonType.Capsule }) 539 .width('80%') 540 .height(40) 541 .margin(20) 542 .onClick(() => { 543 this.pageInfos.moveIndexToTop(1) // Move to the top of the navigation stack the navigation destination page that matches the value of index. 544 console.log('moveIndexToTop' + JSON.stringify(this.pageInfos)) 545 }) 546 Button('clear', { stateEffect: true, type: ButtonType.Capsule }) 547 .width('80%') 548 .height(40) 549 .margin(20) 550 .onClick(() => { 551 this.pageInfos.clear() // Clear the navigation stack. 552 }) 553 Button('get', { stateEffect: true, type: ButtonType.Capsule }) 554 .width('80%') 555 .height(40) 556 .margin(20) 557 .onClick(() => { 558 console.log('-------------------') 559 console.log('Obtained the names of all pages in the navigation stack', JSON.stringify(this.pageInfos.getAllPathName())) 560 console.log('Obtained parameter information of the navigation destination page specified by index', JSON.stringify(this.pageInfos.getParamByIndex(1))) 561 console.log('Obtained parameter information of all the navigation destination pages specified by name', JSON.stringify(this.pageInfos.getParamByName('pageTwo'))) 562 console.log('Obtained the index information of all the navigation destination pages specified by name', JSON.stringify(this.pageInfos.getIndexByName('pageOne')))) 563 console.log ('Obtained the stack size', JSON.stringify (this.pageInfos.size ())) 564 }) 565 }.width('100%').height('100%') 566 }.title('pageOne') 567 .onBackPressed(() => { 568 this.pageInfos.pop() // Pop the top element out of the navigation stack. 569 console.log ('pop' + 'Return value' + JSON.stringify (this.pageInfos.pop ())) 570 return true 571 }) 572 } 573} 574``` 575```ts 576// pageTwo.ets 577 578export class pages { 579 names: string = "" 580 values: NavPathStack | null = null 581} 582 583@Builder 584export function pageTwoTmp(info: pages) { 585 NavDestination() { 586 Column() { 587 Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule }) 588 .width('80%') 589 .height(40) 590 .margin(20) 591 .onClick(() => { 592 (info.values as NavPathStack).pushPathByName('pageOne', null) 593 }) 594 }.width('100%').height('100%') 595 }.title('pageTwo') 596 .onBackPressed(() => { 597 (info.values as NavPathStack).pop() 598 return true 599 }) 600} 601``` 602 603
