1# MultiNavigation 2 3**MultiNavigation** is a component designed for multi-column display and routing navigation on large-screen devices. 4 5> **NOTE** 6> 7> This component is supported since API version 14. Updates will be marked with a superscript to indicate their earliest API version. 8> 9> Due to the nested stack structure of **MultiNavigation**, calling APIs explicitly stated as unsupported in this document or APIs not listed in the supported API list (such as **getParent**, **setInterception**, and **pushDestination**) may lead to unpredictable issues. 10> 11> In scenarios with deep nesting, **MultiNavigation** may encounter routing animation issues. 12 13## Modules to Import 14 15``` 16import { MultiNavigation, MultiNavPathStack, SplitPolicy } from '@kit.ArkUI'; 17``` 18 19## Child Components 20 21Not supported 22 23## MultiNavigation 24 25MultiNavigation({navDestination: navDestination, multiStack: MultiNavPathStack, onNavigationModeChange?: OnNavigationModeChangeCallback, onHomeShowOnTop?: OnHomeShowOnTopCallback}) 26 27Creates and initializes a **MultiNavigation** component. 28 29The **MultiNavigation** component follows the default left-to-right stack clearing rule. This means that a click from the home page on the left triggers the loading of the detail page and simultaneously clears all other detail pages on the right, ensuring that only the most recently loaded detail page is displayed on the right. However, if a detail page loading operation is performed again on the right detail page, the system will not perform the stack clearing action. 30 31**Decorator**: @Component 32 33**Atomic service API**: This API can be used in atomic services since API version 14. 34 35**System capability**: SystemCapability.ArkUI.ArkUI.Full 36 37| Name | Type | Mandatory | Decorator| Description| 38|:---------:|:----------------------:|-----| ------ |-----------| 39| multiStack | [MultiNavPathStack](#multinavpathstack) | Yes | @State | Navigation stack.| 40| navDestination | [NavDestinationBuildFunction](#navdestinationbuildfunction) | Yes| @BuilderParam | Routing rules for loading the target page.| 41| onNavigationModeChange | [OnNavigationModeChangeCallback](#onnavigationmodechangecallback) | No| - | Callback invoked when the mode of the **MultiNavigation** component changes.| 42| onHomeShowOnTop | [OnHomeShowOnTopCallback](#onhomeshowontopcallback) | No| - | Callback invoked when the home page is on the top of the navigation stack.| 43 44## MultiNavPathStack 45 46Implements a navigation stack of the **MultiNavigation** component. Currently, this stack can be created only by the user and cannot be obtained through callbacks. Do not use events or APIs such as **onReady** of **NavDestination** to obtain the navigation stack and perform stack operations, as this may lead to unpredictable issues. 47 48### constructor 49 50constructor() 51 52**Atomic service API**: This API can be used in atomic services since API version 14. 53 54**System capability**: SystemCapability.ArkUI.ArkUI.Full 55 56### pushPath 57 58pushPath(info: NavPathInfo, animated?: boolean, policy?: SplitPolicy): void 59 60Pushes the specified navigation destination page to the navigation stack. 61 62**Atomic service API**: This API can be used in atomic services since API version 14. 63 64**System capability**: SystemCapability.ArkUI.ArkUI.Full 65 66**Parameters** 67 68| Name | Type | Mandatory| Description | 69| :------: | :----------------------------------------------------------: | :--: | ----------------------------------------- | 70| info | [NavPathInfo](./ts-basic-components-navigation.md#navpathinfo10) | Yes | Information about the navigation destination page. | 71| animated | boolean | No | Whether to support the transition animation.<br>Default value: **true**<br>**true**: The transition animation is supported.<br>**false**: The transition animation is not supported. | 72| policy | [SplitPolicy](#splitpolicy) | No | Policy for the current page being pushed.<br>Default value: **DETAIL_PAGE**| 73 74### pushPath 75 76pushPath(info: NavPathInfo, options?: NavigationOptions, policy?: SplitPolicy): void 77 78Pushes the specified navigation destination page to the navigation stack, with stack operation settings through **NavigationOptions**. 79 80**Atomic service API**: This API can be used in atomic services since API version 14. 81 82**System capability**: SystemCapability.ArkUI.ArkUI.Full 83 84**Parameters** 85 86| Name | Type | Mandatory| Description | 87| :-----: | :----------------------------------------------------------: | :--: | ------------------------------------------ | 88| info | [NavPathInfo](./ts-basic-components-navigation.md#navpathinfo10) | Yes | Information about the navigation destination page. | 89| options | [NavigationOptions](./ts-basic-components-navigation.md#navigationoptions12) | No | Stack operation settings. Only the **animated** field is supported.| 90| policy | [SplitPolicy](#splitpolicy) | No | Policy for the current page being pushed.<br>Default value: **DETAIL_PAGE** | 91 92### pushPathByName 93 94pushPathByName(name: string, param: Object, animated?: boolean, policy?: SplitPolicy): void 95 96Pushes the navigation destination page specified by **name** to the navigation stack, passing the data specified by **param**. 97 98**Atomic service API**: This API can be used in atomic services since API version 14. 99 100**System capability**: SystemCapability.ArkUI.ArkUI.Full 101 102**Parameters** 103 104| Name | Type | Mandatory| Description | 105|:---------------------:|:------------:|:------:| --------------------- | 106| name | string | Yes | Name of the navigation destination page. | 107| param | Object | Yes | Detailed parameters of the navigation destination page.| 108| animated | boolean | No | Whether to support the transition animation.<br>Default value: **true**<br>**true**: The transition animation is supported.<br>**false**: The transition animation is not supported.| 109| policy | [SplitPolicy](#splitpolicy) | No | Policy for the current page being pushed.<br>Default value: **DETAIL_PAGE** | 110 111### pushPathByName 112 113pushPathByName(name: string, param: Object, onPop?: base.Callback\<PopInfo>, animated?: boolean, policy?: SplitPolicy): void 114 115Pushes the navigation destination page specified by **name** to the navigation stack, passing the data specified by **param**. This API uses the **onPop** callback to handle the result returned when the page is popped out of the stack. 116 117**Atomic service API**: This API can be used in atomic services since API version 14. 118 119**System capability**: SystemCapability.ArkUI.ArkUI.Full 120 121**Parameters** 122 123| Name | Type | Mandatory| Description | 124|:---------:|:-------------------------------------------------------------:|:------:|------| 125| name | string | Yes | Name of the navigation destination page. | 126| param | Object | Yes | Detailed parameters of the navigation destination page.| 127| onPop | base.[Callback](../../apis-basic-services-kit/js-apis-base.md#callback)\<[PopInfo](ts-basic-components-navigation.md#popinfo11)> | No | Callback used to handle the return result.| 128| animated | boolean | No | Whether to support the transition animation.<br>Default value: **true**<br>**true**: The transition animation is supported.<br>**false**: The transition animation is not supported.| 129| policy | [SplitPolicy](#splitpolicy) | No | Policy for the current page being pushed.<br>Default value: **DETAIL_PAGE** | 130 131### replacePath 132 133replacePath(info: NavPathInfo, animated?: boolean): void 134 135Replaces the current top page on the stack with the specified navigation destination page. The new page inherits the split policy of the original top page. 136 137**Atomic service API**: This API can be used in atomic services since API version 14. 138 139**System capability**: SystemCapability.ArkUI.ArkUI.Full 140 141**Parameters** 142 143| Name | Type | Mandatory| Description | 144| :------: | :----------------------------------------------------------: | :--: | -------------------------------- | 145| info | [NavPathInfo](./ts-basic-components-navigation.md#navpathinfo10) | Yes | Information about the navigation destination page. | 146| animated | boolean | No | Whether to support the transition animation.<br>Default value: **true**<br>**true**: The transition animation is supported.<br>**false**: The transition animation is not supported.| 147 148### replacePath 149 150replacePath(info: NavPathInfo, options?: NavigationOptions): void 151 152Replaces the current top page on the stack with the specified navigation destination page, with stack operation settings through **NavigationOptions**. The new page inherits the split policy of the original top page. 153 154**Atomic service API**: This API can be used in atomic services since API version 14. 155 156**System capability**: SystemCapability.ArkUI.ArkUI.Full 157 158**Parameters** 159 160| Name | Type | Mandatory| Description | 161| :-----: | :----------------------------------------------------------: | :--: | ------------------------------------------ | 162| info | [NavPathInfo](./ts-basic-components-navigation.md#navpathinfo10) | Yes | Information about the navigation destination page. | 163| options | [NavigationOptions](./ts-basic-components-navigation.md#navigationoptions12) | No | Stack operation settings. Only the **animated** field is supported.| 164 165### replacePathByName 166 167replacePathByName(name: string, param: Object, animated?: boolean): void 168 169Replaces the current top page on the stack with the navigation destination page specified by **name**. The new page inherits the split policy of the original top page. 170 171**Atomic service API**: This API can be used in atomic services since API version 14. 172 173**System capability**: SystemCapability.ArkUI.ArkUI.Full 174 175**Parameters** 176 177| Name | Type | Mandatory| Description | 178|:--------:|:---------:|:------:|----------------------| 179| name | string | Yes | Name of the navigation destination page. | 180| param | Object | Yes | Detailed parameters of the navigation destination page.| 181| animated | boolean | No | Whether to support the transition animation.<br>Default value: **true**<br>**true**: The transition animation is supported.<br>**false**: The transition animation is not supported. | 182 183### removeByIndexes 184 185removeByIndexes(indexes: Array<number\>): number 186 187Removes the navigation destination pages specified by **indexes** from the navigation stack. 188 189**Atomic service API**: This API can be used in atomic services since API version 14. 190 191**System capability**: SystemCapability.ArkUI.ArkUI.Full 192 193**Parameters** 194 195| Name | Type | Mandatory| Description | 196|:--------:|:---------------:|:------:| --------------------- | 197| indexes | Array<number\> | Yes | Array of indexes of the navigation destination pages to remove.<br>Value range of the number type: [0, +∞)| 198 199**Return value** 200 201| Type | Description | 202|:-------------:| ------------------------ | 203| number | Number of the navigation destination pages removed.| 204 205### removeByName 206 207removeByName(name: string): number 208 209Removes the navigation destination page specified by **name** from the navigation stack. 210 211**Atomic service API**: This API can be used in atomic services since API version 14. 212 213**System capability**: SystemCapability.ArkUI.ArkUI.Full 214 215**Parameters** 216 217| Name | Type | Mandatory| Description | 218|:-------:| ------- | ---- | --------------------- | 219| name | string | Yes | Name of the navigation destination page to be removed.| 220 221**Return value** 222 223| Type | Description | 224|:-------------:| ------------------------ | 225| number | Number of the navigation destination pages removed.| 226 227### pop 228 229pop(animated?: boolean): NavPathInfo | undefined 230 231Pops the top element out of the navigation stack. 232 233> **NOTE** 234> 235> If [keepBottomPage](#keepbottompage) is called with **true**, the bottom page of the navigation stack is retained. 236 237**Atomic service API**: This API can be used in atomic services since API version 14. 238 239**System capability**: SystemCapability.ArkUI.ArkUI.Full 240 241**Parameters** 242 243| Name | Type | Mandatory| Description | 244|:-----------:|:--------:|:------:| -------------------- | 245| animated | boolean | No | Whether to support the transition animation.<br>Default value: **true**<br>**true**: The transition animation is supported.<br>**false**: The transition animation is not supported.| 246 247**Return value** 248 249| Type | Description | 250| ----------- | ------------------------ | 251| [NavPathInfo](./ts-basic-components-navigation.md#navpathinfo10) \| undefined | Information about the navigation destination page at the top of the stack.| 252 253### pop 254 255pop(result?: Object, animated?: boolean): NavPathInfo | undefined 256 257Pops the top element out of the navigation stack and invokes the **onPop** callback to pass the page processing result. 258 259> **NOTE** 260> 261> If [keepBottomPage](#keepbottompage) is called with **true**, the bottom page of the navigation stack is retained. 262 263**Atomic service API**: This API can be used in atomic services since API version 14. 264 265**System capability**: SystemCapability.ArkUI.ArkUI.Full 266 267**Parameters** 268 269| Name | Type | Mandatory| Description | 270|:---------:|:-------------------------------:|:------:| -------------------- | 271| result | Object | No | Custom processing result on the page.| 272| animated | boolean | No | Whether to support the transition animation.<br>Default value: **true**<br>**true**: The transition animation is supported.<br>**false**: The transition animation is not supported.| 273 274**Return value** 275 276| Type | Description | 277| ----------- | ------------------------ | 278| [NavPathInfo](./ts-basic-components-navigation.md#navpathinfo10) \| undefined | Information about the navigation destination page at the top of the stack.| 279 280### popToName 281 282popToName(name: string, animated?: boolean): number 283 284Pops pages until the first navigation destination page that matches **name** from the bottom of the navigation stack is at the top of the stack. 285 286**Atomic service API**: This API can be used in atomic services since API version 14. 287 288**System capability**: SystemCapability.ArkUI.ArkUI.Full 289 290**Parameters** 291 292| Name | Type | Mandatory| Description | 293|:----------:|:--------:|:------:| ------------------- | 294| name | string | Yes | Name of the navigation destination page.| 295| animated | boolean | No | Whether to support the transition animation.<br>Default value: **true**<br>**true**: The transition animation is supported.<br>**false**: The transition animation is not supported.| 296 297**Return value** 298 299| Type | Description | 300| ------ | ---------------------------------------- | 301| number | Returns the index of the first navigation destination page that matches **name** from the bottom of the navigation stack; returns **-1** if no such a page is found.<br>Value range: [-1, +∞)| 302 303### popToName 304 305popToName(name: string, result: Object, animated?: boolean): number 306 307Pops pages until the first navigation destination page that matches **name** from the bottom of the navigation stack is at the top of the stack. This API uses the **onPop** callback to pass in the page processing result. 308 309**Atomic service API**: This API can be used in atomic services since API version 14. 310 311**System capability**: SystemCapability.ArkUI.ArkUI.Full 312 313**Parameters** 314 315| Name | Type | Mandatory| Description | 316|:---------:|:--------:|:------:| ------------------- | 317| name | string | Yes | Name of the navigation destination page.| 318| result | Object | Yes | Custom processing result on the page.| 319| animated | boolean | No | Whether to support the transition animation.<br>Default value: **true**<br>**true**: The transition animation is supported.<br>**false**: The transition animation is not supported.| 320 321**Return value** 322 323| Type | Description | 324| ------ | ---------------------------------------- | 325| number | Returns the index of the first navigation destination page that matches **name** from the bottom of the navigation stack; returns **-1** if no such a page is found.| 326 327### popToIndex 328 329popToIndex(index: number, animated?: boolean): void 330 331Returns the navigation stack to the page specified by **index**. 332 333**Atomic service API**: This API can be used in atomic services since API version 14. 334 335**System capability**: SystemCapability.ArkUI.ArkUI.Full 336 337**Parameters** 338 339| Name | Type | Mandatory| Description | 340|:------------:|:--------:|:------:| ---------------------- | 341| index | number | Yes | Index of the navigation destination page.<br>Value range: [0, +∞)| 342| animated | boolean | No | Whether to support the transition animation.<br>Default value: **true**<br>**true**: The transition animation is supported.<br>**false**: The transition animation is not supported.| 343 344### popToIndex 345 346popToIndex(index: number, result: Object, animated?: boolean): void 347 348Returns the navigation stack to the page specified by **index** and invokes the **onPop** callback to pass the page processing result. 349 350**Atomic service API**: This API can be used in atomic services since API version 14. 351 352**System capability**: SystemCapability.ArkUI.ArkUI.Full 353 354**Parameters** 355 356| Name | Type | Mandatory| Description | 357| ----- | ------ | ---- | ---------------------- | 358| index | number | Yes | Index of the navigation destination page.| 359| result | Object | Yes| Custom processing result on the page.| 360| animated | boolean | No | Whether to support the transition animation.<br>Default value: **true**<br>**true**: The transition animation is supported.<br>**false**: The transition animation is not supported.| 361 362### moveToTop 363 364moveToTop(name: string, animated?: boolean): number 365 366Moves the first navigation destination page that matches **name** from the bottom of the navigation stack to the top of the stack. 367 368> **NOTE** 369> 370> Depending on the type of page found, **MultiNavigation** performs different actions: 371> 372> 1. If the found page is the topmost home page or a full-screen page, no action is taken. 373> 374> 2. If the found page is a detail page corresponding to the topmost home page, it is moved to the top. 375> 376> 3. If the found page is a non-topmost home page, the home page and all corresponding detail pages are moved to the top, maintaining their relative stack order. 377> 378> 4. If the found page is a non-topmost detail page, the home page and all corresponding detail pages are moved to the top, and the target detail page is moved to the top of the corresponding detail pages. 379> 380> 5. If the found page is a non-topmost full-screen page, it is moved to the top. 381 382**Atomic service API**: This API can be used in atomic services since API version 14. 383 384**System capability**: SystemCapability.ArkUI.ArkUI.Full 385 386**Parameters** 387 388| Name | Type | Mandatory| Description | 389|:---------:|:--------:|:------:| ------------------- | 390| name | string | Yes | Name of the navigation destination page.| 391| animated | boolean | No | Whether to support the transition animation.<br>Default value: **true**<br>**true**: The transition animation is supported.<br>**false**: The transition animation is not supported.| 392 393**Return value** 394 395| Type | Description | 396|:--------:|:----------------------------------------------------------------------------:| 397| number | Returns the index of the first navigation destination page that matches **name** from the bottom of the navigation stack; returns **-1** if no such a page is found. | 398 399### moveIndexToTop 400 401moveIndexToTop(index: number, animated?: boolean): void 402 403Moves the navigation destination page specified by **index** to the top of the navigation stack. 404 405> **NOTE** 406> 407> Depending on the type of page found, **MultiNavigation** performs different actions: 408> 409> 1. If the found page is the topmost home page or a full-screen page, no action is taken. 410> 411> 2. If the found page is a detail page corresponding to the topmost home page, it is moved to the top. 412> 413> 3. If the found page is a non-topmost home page, the home page and all corresponding detail pages are moved to the top, maintaining their relative stack order. 414> 415> 4. If the found page is a non-topmost detail page, the home page and all corresponding detail pages are moved to the top, and the target detail page is moved to the top of the corresponding detail pages. 416> 417> 5. If the found page is a non-topmost full-screen page, it is moved to the top. 418 419**Atomic service API**: This API can be used in atomic services since API version 14. 420 421**System capability**: SystemCapability.ArkUI.ArkUI.Full 422 423**Parameters** 424 425| Name | Type | Mandatory| Description | 426|:---------:|:-------:|:------:| ------------------- | 427| index | number | Yes | Index of the navigation destination page.<br>Value range: [0, +∞)| 428| animated | boolean | No | Whether to support the transition animation.<br>Default value: **true**<br>**true**: The transition animation is supported.<br>**false**: The transition animation is not supported.| 429 430### clear 431 432clear(animated?: boolean): void 433 434Clears the navigation stack. 435 436> **NOTE** 437> 438> If [keepBottomPage](#keepbottompage) is called with **true**, the bottom page of the navigation stack is retained. 439 440**Atomic service API**: This API can be used in atomic services since API version 14. 441 442**System capability**: SystemCapability.ArkUI.ArkUI.Full 443 444**Parameters** 445 446| Name | Type | Mandatory| Description | 447|:---------:|:--------:|:------:| ---------------------- | 448| animated | boolean | No | Whether to support the transition animation.<br>Default value: **true**<br>**true**: The transition animation is supported.<br>**false**: The transition animation is not supported.| 449 450### getAllPathName 451 452getAllPathName(): Array<string\> 453 454Obtains the names of all navigation destination pages in the navigation stack. 455 456**Atomic service API**: This API can be used in atomic services since API version 14. 457 458**System capability**: SystemCapability.ArkUI.ArkUI.Full 459 460**Return value** 461 462| Type | Description | 463|:----------------:| -------------------------- | 464| Array<string\> | Names of all navigation destination pages in the navigation stack.| 465 466### getParamByIndex 467 468getParamByIndex(index: number): Object | undefined 469 470Obtains the parameter information of the navigation destination page specified by **index**. 471 472**Atomic service API**: This API can be used in atomic services since API version 14. 473 474**System capability**: SystemCapability.ArkUI.ArkUI.Full 475 476**Parameters** 477 478| Name | Type | Mandatory| Description | 479|:-------:|:--------:|:------:| ---------------------- | 480| index | number | Yes | Index of the navigation destination page.<br>Value range: [0, +∞)| 481 482**Return value** 483 484| Type | Description | 485| --------- | -------------------------- | 486| Object | Parameter information of the matching navigation destination page.| 487| undefined | Returned if the provided index is invalid.| 488 489### getParamByName 490 491getParamByName(name: string): Array<Object\> 492 493Obtains the parameter information of all the navigation destination pages that match **name**. 494 495**Atomic service API**: This API can be used in atomic services since API version 14. 496 497**System capability**: SystemCapability.ArkUI.ArkUI.Full 498 499**Parameters** 500 501| Name | Type | Mandatory| Description | 502|:------:|:--------:|:------:| ------------------- | 503| name | string | Yes | Name of the navigation destination page.| 504 505**Return value** 506 507| Type | Description | 508| --------------- | --------------------------------- | 509| Array<Object\> | Parameter information of all the matching navigation destination pages.| 510 511### getIndexByName 512 513getIndexByName(name: string): Array<number\> 514 515Obtains the indexes of all the navigation destination pages that match **name**. 516 517**Atomic service API**: This API can be used in atomic services since API version 14. 518 519**System capability**: SystemCapability.ArkUI.ArkUI.Full 520 521**Parameters** 522 523| Name | Type | Mandatory| Description | 524|:------:|:--------:|:------:| ------------------- | 525| name | string | Yes | Name of the navigation destination page.| 526 527**Return value** 528 529| Type | Description | 530| -------------- | --------------------------------- | 531| Array<number\> | Indexes of all the matching navigation destination pages.<br>Value range of the number type: [0, +∞)| 532 533### size 534 535size(): number 536 537Obtains the stack size. 538 539**Atomic service API**: This API can be used in atomic services since API version 14. 540 541**System capability**: SystemCapability.ArkUI.ArkUI.Full 542 543**Return value** 544 545| Type | Description | 546| ------ | ------ | 547| number | Stack size.<br>Value range: [0, +∞)| 548 549### disableAnimation 550 551disableAnimation(disable: boolean): void 552 553Disables or enables the transition animation in the **MultiNavigation** component. 554 555**Atomic service API**: This API can be used in atomic services since API version 14. 556 557**System capability**: SystemCapability.ArkUI.ArkUI.Full 558 559**Parameters** 560 561| Name | Type | Mandatory| Description | 562| ----- | ------ | ---- | ---------------------- | 563| disable | boolean | Yes | Whether to disable the transition animation.<br>Default value: **false**<br>**true**:The transition animation is disabled.<br>**false**: The transition animation is not disabled.| 564 565### switchFullScreenState 566 567switchFullScreenState(isFullScreen?: boolean): boolean 568 569Switches the display mode of the current top detail page in the stack. The value **true** means to enable full-screen mode, and **false** means to enable split-screen mode. 570 571**Atomic service API**: This API can be used in atomic services since API version 14. 572 573**System capability**: SystemCapability.ArkUI.ArkUI.Full 574 575**Parameters** 576 577| Name | Type | Mandatory| Description | 578| :----------: | :-----: | :--: | ----------------------------------------------------- | 579| isFullScreen | boolean | No | Whether to enable full-screen mode. The value **true** means to enable full-screen mode, and **false** means to enable split-screen mode.| 580 581**Return value** 582 583| Type | Description | 584|:--------:|:----------:| 585| boolean | Whether the switching is successful.<br>**true**: The switching is successful.<br>**false**: The switching failed. | 586 587### setHomeWidthRange 588 589setHomeWidthRange(minPercent: number, maxPercent: number): void 590 591Sets the draggable range for the home page width. If not set, the width defaults to 50% and is not draggable. 592 593**Atomic service API**: This API can be used in atomic services since API version 14. 594 595**System capability**: SystemCapability.ArkUI.ArkUI.Full 596 597**Parameters** 598 599| Name | Type | Mandatory| Description | 600|:-------------:|:--------:|:-----:|-------------------| 601| minPercent | number | Yes | Minimum width percentage of the home page.| 602| maxPercent | number | Yes | Maximum width percentage of the home page.| 603 604### keepBottomPage 605 606keepBottomPage(keepBottom: boolean): void 607 608Sets whether to retain the bottom page when the **pop** or **clear** APIs is called. 609 610> **NOTE** 611> 612> **MultiNavigation** treats the home page as a navigation destination page in the stack. By default, calling **pop** or **clea**r will also remove the bottom page. 613> If this API is called with **TRUE**, **MultiNavigation** will retain the bottom page when the **pop** or **clear** API is called. 614 615**Atomic service API**: This API can be used in atomic services since API version 14. 616 617**System capability**: SystemCapability.ArkUI.ArkUI.Full 618 619**Parameters** 620 621| Name | Type | Mandatory| Description | 622|:-------------:|:--------:|:-----:|--------------------| 623| keepBottom | boolean | Yes | Whether to retain the bottom page.<br>Default value: **false**<br>**true**: The bottom page is retained.<br>**false**: The bottom page is not retained.| 624 625### setPlaceholderPage 626 627setPlaceholderPage(info: NavPathInfo): void 628 629Sets a placeholder page. 630 631> **NOTE** 632> 633> The placeholder page is a special page type. When set, it forms a default split-screen effect with the home page on some large-screen devices, that is, the left side is the home page, and the right side is the placeholder page. 634> 635> In scenarios where the application's drawable area is less than 600 vp, or when a foldable screen switches from the expanded state to the folded state, or when a tablet switches from landscape to portrait mode, the placeholder page will be automatically removed, resulting in only the home page being shown. 636> Conversely, when the application's drawable area is greater than or equal to 600 vp, or when a foldable screen switches from the folded state to the expanded state, or when a tablet switches from portrait to landscape mode, the placeholder page will be automatically added to form a split-screen. 637 638**Atomic service API**: This API can be used in atomic services since API version 14. 639 640**System capability**: SystemCapability.ArkUI.ArkUI.Full 641 642**Parameters** 643 644| Name | Type | Mandatory| Description | 645|:-------------:|:--------:|:-----:|----------| 646| info | NavPathInfo | Yes | Information about the placeholder page.| 647 648## SplitPolicy 649 650Enumerates the types of pages in **MultiNavigation**. 651 652**Atomic service API**: This API can be used in atomic services since API version 14. 653 654**System capability**: SystemCapability.ArkUI.ArkUI.Full 655 656| Name | Value| Description | 657| :---------------: | :-: | :-------------: | 658| HOME_PAGE | 0 | Home page. Displayed in full-screen mode. | 659| DETAIL_PAGE | 1 | Detail page. Displayed in split-screen mode.| 660| FULL_PAGE | 2 | Full-screen page. Displayed in full-screen mode.| 661 662## NavDestinationBuildFunction 663 664type NavDestinationBuildFunction = (name: string, param?: object) => void 665 666Represents the function used by the **MultiNavigation** component to load navigation destination pages. 667 668**Atomic service API**: This API can be used in atomic services since API version 14. 669 670**System capability**: SystemCapability.ArkUI.ArkUI.Full 671 672| Name| Type| Mandatory| Description| 673| --------------- | ------ |------ |------ | 674|name | string |Yes| ID of the navigation destination page.| 675| param | object | No| Parameters passed when the page is created during navigation.| 676 677## OnNavigationModeChangeCallback 678 679type OnNavigationModeChangeCallback = (mode: NavigationMode) => void 680 681Represents the callback invoked when the mode of the **MultiNavigation** component changes. 682 683**Atomic service API**: This API can be used in atomic services since API version 14. 684 685**System capability**: SystemCapability.ArkUI.ArkUI.Full 686 687| Name| Type | Mandatory| Description | 688| ---- | ------------------------------------------------------------ | ---- | ------------------------------ | 689| mode | [NavigationMode](./ts-basic-components-navigation.md#navigationmode9) | Yes | Navigation mode when the callback is invoked.| 690 691## OnHomeShowOnTopCallback 692 693type OnHomeShowOnTopCallback = (name: string) => void 694 695Represents the callback invoked when the home page is displayed at the top of the stack. 696 697**Atomic service API**: This API can be used in atomic services since API version 14. 698 699**System capability**: SystemCapability.ArkUI.ArkUI.Full 700 701| Name| Type | Mandatory| Description | 702| ---- | ------ | ---- | -------------------------- | 703| name | string | Yes | ID of the page displayed at the top of the stack.| 704 705## Attributes 706 707The [universal attributes](ts-component-general-attributes.md) are not supported. 708 709## Events 710 711The [universal events](ts-component-general-events.md) are not supported. 712 713## Example 714 715This example demonstrates the basic usage of **MultiNavigation**. 716 717<!--code_no_check--> 718```typescript 719// pages/Index.ets 720import { MultiNavigation, MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation'; 721import { PageDetail1 } from './PageDetail1'; 722import { PageDetail2 } from './PageDetail2'; 723import { PageFull1 } from './PageFull1'; 724import { PageHome1 } from './PageHome1'; 725import { PagePlaceholder } from './PagePlaceholder'; 726 727@Entry 728@Component 729struct Index { 730 @Provide('pageStack') pageStack: MultiNavPathStack = new MultiNavPathStack(); 731 732 @Builder 733 PageMap(name: string, param?: object) { 734 if (name === 'PageHome1') { 735 PageHome1({ param: param }) 736 } else if (name === 'PageDetail1') { 737 PageDetail1({ param: param }); 738 } else if (name === 'PageDetail2') { 739 PageDetail2({ param: param }); 740 } else if (name === 'PageFull1') { 741 PageFull1(); 742 } else if (name === 'PagePlaceholder') { 743 PagePlaceholder(); 744 } 745 } 746 747 aboutToAppear(): void { 748 this.pageStack.pushPathByName('PageHome1', 'paramTest', false, SplitPolicy.HOME_PAGE); 749 } 750 751 build() { 752 Column() { 753 Row() { 754 MultiNavigation({ navDestination: this.PageMap, multiStack: this.pageStack }) 755 } 756 .width('100%') 757 } 758 } 759} 760``` 761<!--code_no_check--> 762```typescript 763// pages/PageHome1.ets, corresponding to the home page 764import { MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation'; 765import { hilog } from '@kit.PerformanceAnalysisKit'; 766 767@Component 768export struct PageHome1 { 769 @State message: string = 'PageHome1'; 770 @Consume('pageStack') pageStack: MultiNavPathStack; 771 controller: TextInputController = new TextInputController() 772 text: String = ''; 773 index: number = 0; 774 param: Object = new Object(); 775 lastBackTime: number = 0; 776 777 build() { 778 if (this.log()) { 779 NavDestination() { 780 Column() { 781 Column() { 782 Text(this.message) 783 .fontSize(40) 784 .fontWeight(FontWeight.Bold) 785 } 786 .width('100%') 787 .height('8%') 788 Scroll(){ 789 Column() { 790 Button('OpenHome', { stateEffect: true, type: ButtonType.Capsule}) 791 .width('50%') 792 .height(40) 793 .margin(20) 794 .onClick(() => { 795 if (this.pageStack !== undefined && this.pageStack !== null) { 796 this.pageStack.pushPathByName('PageHome1', 'testParam', true, SplitPolicy.HOME_PAGE); 797 this.index++; 798 } 799 }) 800 Button('OpenDetail', { stateEffect: true, type: ButtonType.Capsule}) 801 .width('50%') 802 .height(40) 803 .margin(20) 804 .onClick(() => { 805 if (this.pageStack !== undefined && this.pageStack !== null) { 806 this.pageStack.pushPathByName('PageDetail1', 'testParam'); 807 this.index++; 808 } 809 }) 810 Button('OpenFull', { stateEffect: true, type: ButtonType.Capsule}) 811 .width('50%') 812 .height(40) 813 .margin(20) 814 .onClick(() => { 815 if (this.pageStack !== undefined && this.pageStack !== null) { 816 this.pageStack.pushPathByName('PageFull1', 'testParam', true, SplitPolicy.FULL_PAGE); 817 } 818 }) 819 TextInput({placeholder: 'input your poptoindex ...', controller: this.controller }) 820 .placeholderColor(Color.Grey) 821 .placeholderFont({ size: 14, weight: 400 }) 822 .caretColor(Color.Blue) 823 .width('50%') 824 .height(40) 825 .margin(20) 826 .type(InputType.Number) 827 .fontSize(14) 828 .fontColor(Color.Black) 829 .onChange((value: String) => { 830 this.text = value 831 }) 832 Button('poptoindex', { stateEffect: true, type: ButtonType.Capsule}) 833 .width('50%') 834 .height(40) 835 .margin(20) 836 .onClick(() => { 837 if (this.pageStack !== undefined && this.pageStack !== null) { 838 this.pageStack.popToIndex(Number(this.text)); 839 this.controller.caretPosition(1) 840 } 841 }) 842 Button('OpenDetailWithName', { stateEffect: true, type: ButtonType.Capsule}) 843 .width('50%') 844 .height(40) 845 .margin(20) 846 .onClick(() => { 847 if (this.pageStack !== undefined && this.pageStack !== null) { 848 this.pageStack.pushPathByName('PageDetail1', 'testParam', undefined, true); 849 } 850 }) 851 Button('pop', { stateEffect: true, type: ButtonType.Capsule}) 852 .width('50%') 853 .height(40) 854 .margin(20) 855 .onClick(() => { 856 if (this.pageStack !== undefined && this.pageStack !== null) { 857 this.pageStack.pop(); 858 } 859 }) 860 Button('moveToTopByName: PageDetail1', { stateEffect: true, type: ButtonType.Capsule}) 861 .width('50%') 862 .height(40) 863 .margin(10) 864 .onClick(() => { 865 if (this.pageStack !== undefined && this.pageStack !== null) { 866 let indexFound = this.pageStack.moveToTop('PageDetail1'); 867 hilog.info(0x0000, 'demoTest', 'moveToTopByName,indexFound:' + indexFound); 868 } 869 }) 870 Button('removeByName HOME', { stateEffect: true, type: ButtonType.Capsule}) 871 .width('50%') 872 .height(40) 873 .margin(20) 874 .onClick(() => { 875 if (this.pageStack !== undefined && this.pageStack !== null) { 876 this.pageStack.removeByName('PageHome1'); 877 } 878 }) 879 Button('removeByIndexes 0135', { stateEffect: true, type: ButtonType.Capsule}) 880 .width('50%') 881 .height(40) 882 .margin(20) 883 .onClick(() => { 884 if (this.pageStack !== undefined && this.pageStack !== null) { 885 this.pageStack.removeByIndexes([0,1,3,5]); 886 } 887 }) 888 Button('getAllPathName', { stateEffect: true, type: ButtonType.Capsule}) 889 .width('50%') 890 .height(40) 891 .margin(20) 892 .onClick(() => { 893 if (this.pageStack !== undefined && this.pageStack !== null) { 894 let result = this.pageStack.getAllPathName(); 895 hilog.info(0x0000, 'demotest', 'getAllPathName: ' + result.toString()); 896 } 897 }) 898 Button('getParamByIndex0', { stateEffect: true, type: ButtonType.Capsule}) 899 .width('50%') 900 .height(40) 901 .margin(20) 902 .onClick(() => { 903 if (this.pageStack !== undefined && this.pageStack !== null) { 904 let result = this.pageStack.getParamByIndex(0); 905 hilog.info(0x0000, 'demotest', 'getParamByIndex: ' + result); 906 } 907 }) 908 Button('getParamByNameHomePage', { stateEffect: true, type: ButtonType.Capsule}) 909 .width('50%') 910 .height(40) 911 .margin(20) 912 .onClick(() => { 913 if (this.pageStack !== undefined && this.pageStack !== null) { 914 let result = this.pageStack.getParamByName('PageHome1'); 915 hilog.info(0x0000, 'demotest', 'getParamByName: ' + result.toString()); 916 } 917 }) 918 Button('getIndexByNameHomePage', { stateEffect: true, type: ButtonType.Capsule}) 919 .width('50%') 920 .height(40) 921 .margin(20) 922 .onClick(() => { 923 if (this.pageStack !== undefined && this.pageStack !== null) { 924 let result = this.pageStack.getIndexByName('PageHome1'); 925 hilog.info(0x0000, 'demotest', 'getIndexByName: ' + result); 926 } 927 }) 928 Button('keepBottomPage True', { stateEffect: true, type: ButtonType.Capsule}) 929 .width('50%') 930 .height(40) 931 .margin(10) 932 .onClick(() => { 933 if (this.pageStack !== undefined && this.pageStack !== null) { 934 this.pageStack.keepBottomPage(true); 935 } 936 }) 937 Button('keepBottomPage False', { stateEffect: true, type: ButtonType.Capsule}) 938 .width('50%') 939 .height(40) 940 .margin(10) 941 .onClick(() => { 942 if (this.pageStack !== undefined && this.pageStack !== null) { 943 this.pageStack.keepBottomPage(false); 944 } 945 }) 946 Button('setPlaceholderPage', { stateEffect: true, type: ButtonType.Capsule}) 947 .width('50%') 948 .height(40) 949 .margin(10) 950 .onClick(() => { 951 if (this.pageStack !== undefined && this.pageStack !== null) { 952 this.pageStack.setPlaceholderPage({ name: 'PagePlaceholder' }); 953 } 954 }) 955 }.backgroundColor(0xFFFFFF).width('100%').padding(10).borderRadius(15) 956 } 957 .width('100%') 958 } 959 .width('100%') 960 .height('92%') 961 }.hideTitleBar(true) 962 } 963 } 964 965 log(): boolean { 966 hilog.info(0x0000, 'demotest', 'PageHome1 build called'); 967 return true; 968 } 969} 970``` 971<!--code_no_check--> 972```typescript 973// pages/PageDetail1.ets: detail page 974import { MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation'; 975import { hilog } from '@kit.PerformanceAnalysisKit'; 976 977@Component 978export struct PageDetail1 { 979 @State message: string = 'PageDetail1'; 980 @Consume('pageStack') pageStack: MultiNavPathStack; 981 controller: TextInputController = new TextInputController() 982 text: String = ''; 983 param: Object = new Object(); 984 985 build() { 986 if (this.log()) { 987 NavDestination() { 988 Column() { 989 Column() { 990 Text(this.message) 991 .fontSize(40) 992 .fontWeight(FontWeight.Bold) 993 } 994 .height('8%') 995 .width('100%') 996 Scroll(){ 997 Column(){ 998 Button('OpenHome', { stateEffect: true, type: ButtonType.Capsule}) 999 .width('50%') 1000 .height(40) 1001 .margin(20) 1002 .onClick(() => { 1003 if (this.pageStack !== undefined && this.pageStack !== null) { 1004 this.pageStack.pushPathByName('PageHome1', 'testParam', true, SplitPolicy.HOME_PAGE); 1005 } 1006 }) 1007 Button('OpenDetail', { stateEffect: true, type: ButtonType.Capsule}) 1008 .width('50%') 1009 .height(40) 1010 .margin(20) 1011 .onClick(() => { 1012 if (this.pageStack !== undefined && this.pageStack !== null) { 1013 this.pageStack.pushPathByName('PageDetail1', 'testParam'); 1014 } 1015 }) 1016 Button('OpenFull', { stateEffect: true, type: ButtonType.Capsule}) 1017 .width('50%') 1018 .height(40) 1019 .margin(20) 1020 .onClick(() => { 1021 if (this.pageStack !== undefined && this.pageStack !== null) { 1022 this.pageStack.pushPathByName('PageFull1', 'testParam', true, SplitPolicy.FULL_PAGE); 1023 } 1024 }) 1025 Button('ReplaceDetail', { stateEffect: true, type: ButtonType.Capsule}) 1026 .width('50%') 1027 .height(40) 1028 .margin(20) 1029 .onClick(() => { 1030 if (this.pageStack !== undefined && this.pageStack !== null) { 1031 this.pageStack.replacePathByName('PageDetail2', 'testParam'); 1032 } 1033 }) 1034 Button('removeByName PageDetail1', { stateEffect: true, type: ButtonType.Capsule}) 1035 .width('50%') 1036 .height(40) 1037 .margin(20) 1038 .onClick(() => { 1039 if (this.pageStack !== undefined && this.pageStack !== null) { 1040 this.pageStack.removeByName('PageDetail1'); 1041 } 1042 }) 1043 Button('removeByIndexes 0135', { stateEffect: true, type: ButtonType.Capsule}) 1044 .width('50%') 1045 .height(40) 1046 .margin(20) 1047 .onClick(() => { 1048 if (this.pageStack !== undefined && this.pageStack !== null) { 1049 this.pageStack.removeByIndexes([0,1,3,5]); 1050 } 1051 }) 1052 Button('switchFullScreenState true', { stateEffect: true, type: ButtonType.Capsule}) 1053 .width('50%') 1054 .height(40) 1055 .margin(20) 1056 .onClick(() => { 1057 if (this.pageStack !== undefined && this.pageStack !== null) { 1058 this.pageStack.switchFullScreenState(true); 1059 } 1060 }) 1061 Button('switchFullScreenState false', { stateEffect: true, type: ButtonType.Capsule}) 1062 .width('50%') 1063 .height(40) 1064 .margin(20) 1065 .onClick(() => { 1066 if (this.pageStack !== undefined && this.pageStack !== null) { 1067 this.pageStack.switchFullScreenState(false); 1068 } 1069 }) 1070 Button('pop', { stateEffect: true, type: ButtonType.Capsule}) 1071 .width('50%') 1072 .height(40) 1073 .margin(20) 1074 .onClick(() => { 1075 if (this.pageStack !== undefined && this.pageStack !== null) { 1076 this.pageStack.pop('123'); 1077 } 1078 }) 1079 Button('popToHome1', { stateEffect: true, type: ButtonType.Capsule}) 1080 .width('50%') 1081 .height(40) 1082 .margin(20) 1083 .onClick(() => { 1084 if (this.pageStack !== undefined && this.pageStack !== null) { 1085 this.pageStack.popToName('PageHome1'); 1086 } 1087 }) 1088 TextInput({placeholder: 'input your poptoindex ...', controller: this.controller }) 1089 .placeholderColor(Color.Grey) 1090 .placeholderFont({ size: 14, weight: 400 }) 1091 .caretColor(Color.Blue) 1092 .type(InputType.Number) 1093 .width('50%') 1094 .height(40) 1095 .margin(20) 1096 .fontSize(14) 1097 .fontColor(Color.Black) 1098 .onChange((value: String) => { 1099 this.text = value 1100 }) 1101 Button('poptoindex', { stateEffect: true, type: ButtonType.Capsule}) 1102 .width('50%') 1103 .height(40) 1104 .margin(20) 1105 .onClick(() => { 1106 if (this.pageStack !== undefined && this.pageStack !== null) { 1107 this.pageStack.popToIndex(Number(this.text)); 1108 this.controller.caretPosition(1) 1109 } 1110 }) 1111 Button('moveIndexToTop', { stateEffect: true, type: ButtonType.Capsule}) 1112 .width('50%') 1113 .height(40) 1114 .margin(20) 1115 .onClick(() => { 1116 if (this.pageStack !== undefined && this.pageStack !== null) { 1117 this.pageStack.moveIndexToTop(Number(this.text)); 1118 this.controller.caretPosition(1) 1119 } 1120 }) 1121 Button('clear', { stateEffect: true, type: ButtonType.Capsule}) 1122 .width('50%') 1123 .height(40) 1124 .margin(20) 1125 .onClick(() => { 1126 if (this.pageStack !== undefined && this.pageStack !== null) { 1127 this.pageStack.clear(); 1128 } 1129 }) 1130 Button('disableAnimation', { stateEffect: true, type: ButtonType.Capsule}) 1131 .width('50%') 1132 .height(40) 1133 .margin(20) 1134 .onClick(() => { 1135 if (this.pageStack !== undefined && this.pageStack !== null) { 1136 this.pageStack.disableAnimation(true); 1137 } 1138 }) 1139 Button('enableAnimation', { stateEffect: true, type: ButtonType.Capsule}) 1140 .width('50%') 1141 .height(40) 1142 .margin(20) 1143 .onClick(() => { 1144 if (this.pageStack !== undefined && this.pageStack !== null) { 1145 this.pageStack.disableAnimation(false); 1146 } 1147 }) 1148 Button('setHomeWidthRange(20, 80)', { stateEffect: true, type: ButtonType.Capsule}) 1149 .width('50%') 1150 .height(40) 1151 .margin(20) 1152 .onClick(() => { 1153 if (this.pageStack !== undefined && this.pageStack !== null) { 1154 this.pageStack.setHomeWidthRange(20, 80); 1155 } 1156 }) 1157 Button('setHomeWidthRange(-1, 20)', { stateEffect: true, type: ButtonType.Capsule}) 1158 .width('50%') 1159 .height(40) 1160 .margin(20) 1161 .onClick(() => { 1162 if (this.pageStack !== undefined && this.pageStack !== null) { 1163 this.pageStack.setHomeWidthRange(-1, 20); 1164 } 1165 }) 1166 Button('setHomeWidthRange(20, 120)', { stateEffect: true, type: ButtonType.Capsule}) 1167 .width('50%') 1168 .height(40) 1169 .margin(20) 1170 .onClick(() => { 1171 if (this.pageStack !== undefined && this.pageStack !== null) { 1172 this.pageStack.setHomeWidthRange(20, 120); 1173 } 1174 }) 1175 } 1176 .width('100%') 1177 } 1178 .width('100%') 1179 .height('92%') 1180 } 1181 }.hideTitleBar(true) 1182 } 1183 } 1184 1185 log(): boolean { 1186 hilog.info(0x0000, 'demotest', 'PageDetail1 build called'); 1187 return true; 1188 } 1189} 1190``` 1191<!--code_no_check--> 1192```typescript 1193// pages/PageDetail2.ets: detail page 1194import { MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation'; 1195import { hilog } from '@kit.PerformanceAnalysisKit'; 1196 1197@Component 1198export struct PageDetail2 { 1199 @State message: string = 'PageDetail2'; 1200 @Consume('pageStack') pageStack: MultiNavPathStack; 1201 controller: TextInputController = new TextInputController() 1202 text: String = ''; 1203 param: Object = new Object(); 1204 1205 build() { 1206 if (this.log()) { 1207 NavDestination() { 1208 Column() { 1209 Column() { 1210 Text(this.message) 1211 .fontSize(40) 1212 .fontWeight(FontWeight.Bold) 1213 } 1214 .width('100%') 1215 .height('8%') 1216 Scroll(){ 1217 Column() { 1218 Button('OpenHome', { stateEffect: true, type: ButtonType.Capsule}) 1219 .width('50%') 1220 .height(40) 1221 .margin(20) 1222 .onClick(() => { 1223 if (this.pageStack !== undefined && this.pageStack !== null) { 1224 this.pageStack.pushPathByName('PageHome1', 'testParam', true, SplitPolicy.HOME_PAGE); 1225 } 1226 }) 1227 Button('OpenDetail', { stateEffect: true, type: ButtonType.Capsule}) 1228 .width('50%') 1229 .height(40) 1230 .margin(20) 1231 .onClick(() => { 1232 if (this.pageStack !== undefined && this.pageStack !== null) { 1233 this.pageStack.pushPathByName('PageDetail1', 'testParam'); 1234 } 1235 }) 1236 Button('OpenFull', { stateEffect: true, type: ButtonType.Capsule}) 1237 .width('50%') 1238 .height(40) 1239 .margin(20) 1240 .onClick(() => { 1241 if (this.pageStack !== undefined && this.pageStack !== null) { 1242 this.pageStack.pushPathByName('PageFull1', 'testParam', true, SplitPolicy.FULL_PAGE); 1243 } 1244 }) 1245 Button('ReplaceDetail', { stateEffect: true, type: ButtonType.Capsule}) 1246 .width('50%') 1247 .height(40) 1248 .margin(20) 1249 .onClick(() => { 1250 if (this.pageStack !== undefined && this.pageStack !== null) { 1251 this.pageStack.replacePathByName('PageDetail2', 'testParam'); 1252 } 1253 }) 1254 TextInput({placeholder: 'input your poptoindex ...', controller: this.controller }) 1255 .placeholderColor(Color.Grey) 1256 .placeholderFont({ size: 14, weight: 400 }) 1257 .caretColor(Color.Blue) 1258 .type(InputType.Number) 1259 .width('50%') 1260 .height(40) 1261 .margin(20) 1262 .fontSize(14) 1263 .fontColor(Color.Black) 1264 .onChange((value: String) => { 1265 this.text = value 1266 }) 1267 Button('moveIndexToTop', { stateEffect: true, type: ButtonType.Capsule}) 1268 .width('50%') 1269 .height(40) 1270 .margin(20) 1271 .onClick(() => { 1272 if (this.pageStack !== undefined && this.pageStack !== null) { 1273 this.pageStack.moveIndexToTop(Number(this.text)); 1274 this.controller.caretPosition(1) 1275 } 1276 }) 1277 Button('pop', { stateEffect: true, type: ButtonType.Capsule}) 1278 .width('50%') 1279 .height(40) 1280 .margin(20) 1281 .onClick(() => { 1282 if (this.pageStack !== undefined && this.pageStack !== null) { 1283 this.pageStack.pop(); 1284 } 1285 }) 1286 TextInput({placeholder: 'input your poptoindex ...', controller: this.controller }) 1287 .placeholderColor(Color.Grey) 1288 .placeholderFont({ size: 14, weight: 400 }) 1289 .caretColor(Color.Blue) 1290 .type(InputType.Number) 1291 .width('50%') 1292 .height(40) 1293 .margin(20) 1294 .fontSize(14) 1295 .fontColor(Color.Black) 1296 .onChange((value: String) => { 1297 this.text = value 1298 }) 1299 Button('poptoindex', { stateEffect: true, type: ButtonType.Capsule}) 1300 .width('50%') 1301 .height(40) 1302 .margin(20) 1303 .onClick(() => { 1304 if (this.pageStack !== undefined && this.pageStack !== null) { 1305 this.pageStack.popToIndex(Number(this.text)); 1306 this.controller.caretPosition(1) 1307 } 1308 }) 1309 Button('clear', { stateEffect: true, type: ButtonType.Capsule}) 1310 .width('50%') 1311 .height(40) 1312 .margin(20) 1313 .onClick(() => { 1314 if (this.pageStack !== undefined && this.pageStack !== null) { 1315 this.pageStack.clear(); 1316 } 1317 }) 1318 Button('disableAnimation', { stateEffect: true, type: ButtonType.Capsule}) 1319 .width('50%') 1320 .height(40) 1321 .margin(20) 1322 .onClick(() => { 1323 if (this.pageStack !== undefined && this.pageStack !== null) { 1324 this.pageStack.disableAnimation(true); 1325 } 1326 }) 1327 Button('enableAnimation', { stateEffect: true, type: ButtonType.Capsule}) 1328 .width('50%') 1329 .height(40) 1330 .margin(20) 1331 .onClick(() => { 1332 if (this.pageStack !== undefined && this.pageStack !== null) { 1333 this.pageStack.disableAnimation(false); 1334 } 1335 }) 1336 } 1337 .width('100%') 1338 } 1339 .width('100%') 1340 .height('92%') 1341 } 1342 } 1343 .hideTitleBar(true) 1344 } 1345 } 1346 1347 log(): boolean { 1348 hilog.info(0x0000, 'demotest', 'PageDetail2 build called'); 1349 return true; 1350 } 1351} 1352``` 1353<!--code_no_check--> 1354```typescript 1355// pages/PageFull1.ets: page that does not participate in split-screen display and is displayed in full-screen mode by default 1356import { MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation'; 1357import { hilog } from '@kit.PerformanceAnalysisKit'; 1358 1359@Component 1360export struct PageFull1 { 1361 @State message: string = 'PageFull1'; 1362 @Consume('pageStack') pageStack: MultiNavPathStack; 1363 controller: TextInputController = new TextInputController() 1364 text: String = ''; 1365 1366 build() { 1367 if (this.log()) { 1368 NavDestination() { 1369 Column() { 1370 Column() { 1371 Text(this.message) 1372 .fontSize(40) 1373 .fontWeight(FontWeight.Bold) 1374 } 1375 .width('100%') 1376 .height('8%') 1377 1378 Scroll() { 1379 Column() { 1380 Button('OpenHome', { stateEffect: true, type: ButtonType.Capsule }) 1381 .width('50%') 1382 .height(40) 1383 .margin(20) 1384 .onClick(() => { 1385 if (this.pageStack !== undefined && this.pageStack !== null) { 1386 this.pageStack.pushPathByName('PageHome1', 'testParam', true, SplitPolicy.HOME_PAGE); 1387 } 1388 }) 1389 Button('OpenDetail', { stateEffect: true, type: ButtonType.Capsule }) 1390 .width('50%') 1391 .height(40) 1392 .margin(20) 1393 .onClick(() => { 1394 if (this.pageStack !== undefined && this.pageStack !== null) { 1395 this.pageStack.pushPathByName('PageDetail1', 'testParam'); 1396 } 1397 }) 1398 Button('OpenFull', { stateEffect: true, type: ButtonType.Capsule }) 1399 .width('50%') 1400 .height(40) 1401 .margin(20) 1402 .onClick(() => { 1403 if (this.pageStack !== undefined && this.pageStack !== null) { 1404 this.pageStack.pushPathByName('PageFull1', 'testParam', true, SplitPolicy.FULL_PAGE); 1405 } 1406 }) 1407 Button('ReplaceFULL', { stateEffect: true, type: ButtonType.Capsule }) 1408 .width('50%') 1409 .height(40) 1410 .margin(20) 1411 .onClick(() => { 1412 if (this.pageStack !== undefined && this.pageStack !== null) { 1413 this.pageStack.replacePathByName('PageFull1', 'testParam', true); 1414 } 1415 }) 1416 Button('removeByName PageFull1', { stateEffect: true, type: ButtonType.Capsule }) 1417 .width('50%') 1418 .height(40) 1419 .margin(20) 1420 .onClick(() => { 1421 if (this.pageStack !== undefined && this.pageStack !== null) { 1422 this.pageStack.removeByName('PageFull1'); 1423 } 1424 }) 1425 Button('removeByIndexes 0135', { stateEffect: true, type: ButtonType.Capsule }) 1426 .width('50%') 1427 .height(40) 1428 .margin(20) 1429 .onClick(() => { 1430 if (this.pageStack !== undefined && this.pageStack !== null) { 1431 this.pageStack.removeByIndexes([0, 1, 3, 5]); 1432 } 1433 }) 1434 Button('pop', { stateEffect: true, type: ButtonType.Capsule }) 1435 .width('50%') 1436 .height(40) 1437 .margin(20) 1438 .onClick(() => { 1439 if (this.pageStack !== undefined && this.pageStack !== null) { 1440 this.pageStack.pop(); 1441 } 1442 }) 1443 TextInput({ placeholder: 'input your poptoindex ...', controller: this.controller }) 1444 .placeholderColor(Color.Grey) 1445 .placeholderFont({ size: 14, weight: 400 }) 1446 .caretColor(Color.Blue) 1447 .width('50%') 1448 .height(40) 1449 .margin(20) 1450 .type(InputType.Number) 1451 .fontSize(14) 1452 .fontColor(Color.Black) 1453 .onChange((value: String) => { 1454 this.text = value 1455 }) 1456 Button('poptoindex', { stateEffect: true, type: ButtonType.Capsule }) 1457 .width('50%') 1458 .height(40) 1459 .margin(20) 1460 .onClick(() => { 1461 if (this.pageStack !== undefined && this.pageStack !== null) { 1462 this.pageStack.popToIndex(Number(this.text)); 1463 this.controller.caretPosition(1) 1464 } 1465 }) 1466 } 1467 .width('100%') 1468 } 1469 .width('100%') 1470 .height('92%') 1471 } 1472 } 1473 .hideTitleBar(true) 1474 .onBackPressed(() => { 1475 hilog.info(0x0000, 'demotest', 'PageFull1 onBackPressed: '); 1476 return false; 1477 }) 1478 } 1479 } 1480 1481 log(): boolean { 1482 hilog.info(0x0000, 'demotest', 'PageFull1 build called'); 1483 return true; 1484 } 1485} 1486``` 1487<!--code_no_check--> 1488```typescript 1489// pages/PagePlaceholder.ets: placeholder page 1490import { MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation'; 1491import { hilog } from '@kit.PerformanceAnalysisKit'; 1492 1493@Component 1494export struct PagePlaceholder { 1495 @State message: string = 'PagePlaceholder'; 1496 @Consume('pageStack') pageStack: MultiNavPathStack; 1497 controller: TextInputController = new TextInputController() 1498 text: String = ''; 1499 lastBackTime: number = 0; 1500 1501 build() { 1502 if (this.log()) { 1503 NavDestination() { 1504 Column() { 1505 Column() { 1506 Text(this.message) 1507 .fontSize(50) 1508 .fontWeight(FontWeight.Bold) 1509 } 1510 .width('100%') 1511 .height('8%') 1512 1513 Stack({alignContent: Alignment.Center}) { 1514 Text('Placeholder sample page') 1515 .fontSize(80) 1516 .fontWeight(FontWeight.Bold) 1517 .fontColor(Color.Red) 1518 } 1519 .width('100%') 1520 .height('92%') 1521 } 1522 }.hideTitleBar(true) 1523 } 1524 } 1525 1526 log(): boolean { 1527 hilog.info(0x0000, 'demotest', 'PagePlaceholder build called'); 1528 return true; 1529 } 1530} 1531``` 1532