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. For visual reference, see [Home-to-Detail Page Transition Demo](#example). 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. 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. 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. 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. 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 // Navigate to the PageHome1 page. 797 this.pageStack.pushPathByName('PageHome1', 'testParam', true, SplitPolicy.HOME_PAGE); 798 this.index++; 799 } 800 }) 801 Button('OpenDetail', { stateEffect: true, type: ButtonType.Capsule}) 802 .width('50%') 803 .height(40) 804 .margin(20) 805 .onClick(() => { 806 if (this.pageStack !== undefined && this.pageStack !== null) { 807 // Navigate to the PageDetail1 page. 808 this.pageStack.pushPathByName('PageDetail1', 'testParam'); 809 this.index++; 810 } 811 }) 812 Button('OpenFull', { stateEffect: true, type: ButtonType.Capsule}) 813 .width('50%') 814 .height(40) 815 .margin(20) 816 .onClick(() => { 817 if (this.pageStack !== undefined && this.pageStack !== null) { 818 // Navigate to the PageFull1 page. 819 this.pageStack.pushPathByName('PageFull1', 'testParam', true, SplitPolicy.FULL_PAGE); 820 } 821 }) 822 TextInput({placeholder: 'input your poptoindex ...', controller: this.controller }) 823 .placeholderColor(Color.Grey) 824 .placeholderFont({ size: 14, weight: 400 }) 825 .caretColor(Color.Blue) 826 .width('50%') 827 .height(40) 828 .margin(20) 829 .type(InputType.Number) 830 .fontSize(14) 831 .fontColor(Color.Black) 832 .onChange((value: String) => { 833 this.text = value; 834 }) 835 Button('poptoindex', { stateEffect: true, type: ButtonType.Capsule}) 836 .width('50%') 837 .height(40) 838 .margin(20) 839 .onClick(() => { 840 if (this.pageStack !== undefined && this.pageStack !== null) { 841 // Return to the page with the specified index and remove all pages with a higher index. 842 this.pageStack.popToIndex(Number(this.text)); 843 this.controller.caretPosition(1); 844 } 845 }) 846 Button('OpenDetailWithName', { stateEffect: true, type: ButtonType.Capsule}) 847 .width('50%') 848 .height(40) 849 .margin(20) 850 .onClick(() => { 851 if (this.pageStack !== undefined && this.pageStack !== null) { 852 // Navigate to the PageDetail1 page. 853 this.pageStack.pushPathByName('PageDetail1', 'testParam', undefined, true); 854 } 855 }) 856 Button('pop', { stateEffect: true, type: ButtonType.Capsule}) 857 .width('50%') 858 .height(40) 859 .margin(20) 860 .onClick(() => { 861 if (this.pageStack !== undefined && this.pageStack !== null) { 862 this.pageStack.pop(); 863 } 864 }) 865 Button('moveToTopByName: PageDetail1', { stateEffect: true, type: ButtonType.Capsule}) 866 .width('50%') 867 .height(40) 868 .margin(10) 869 .onClick(() => { 870 if (this.pageStack !== undefined && this.pageStack !== null) { 871 // Move the PageDetail1 page to the top of the stack. 872 let indexFound = this.pageStack.moveToTop('PageDetail1'); 873 hilog.info(0x0000, 'demoTest', 'moveToTopByName,indexFound:' + indexFound); 874 } 875 }) 876 Button('removeByName HOME', { stateEffect: true, type: ButtonType.Capsule}) 877 .width('50%') 878 .height(40) 879 .margin(20) 880 .onClick(() => { 881 if (this.pageStack !== undefined && this.pageStack !== null) { 882 // Remove the page named PageHome1. 883 this.pageStack.removeByName('PageHome1'); 884 } 885 }) 886 Button('removeByIndexes 0135', { stateEffect: true, type: ButtonType.Capsule}) 887 .width('50%') 888 .height(40) 889 .margin(20) 890 .onClick(() => { 891 if (this.pageStack !== undefined && this.pageStack !== null) { 892 // Remove pages with indexes 0, 1, 3, and 5 from the stack. 893 this.pageStack.removeByIndexes([0,1,3,5]); 894 } 895 }) 896 Button('getAllPathName', { stateEffect: true, type: ButtonType.Capsule}) 897 .width('50%') 898 .height(40) 899 .margin(20) 900 .onClick(() => { 901 if (this.pageStack !== undefined && this.pageStack !== null) { 902 let result = this.pageStack.getAllPathName(); 903 hilog.info(0x0000, 'demotest', 'getAllPathName: ' + result.toString()); 904 } 905 }) 906 Button('getParamByIndex0', { stateEffect: true, type: ButtonType.Capsule}) 907 .width('50%') 908 .height(40) 909 .margin(20) 910 .onClick(() => { 911 if (this.pageStack !== undefined && this.pageStack !== null) { 912 // Obtain the parameters of the page with index 0. 913 let result = this.pageStack.getParamByIndex(0); 914 hilog.info(0x0000, 'demotest', 'getParamByIndex: ' + result); 915 } 916 }) 917 Button('getParamByNameHomePage', { stateEffect: true, type: ButtonType.Capsule}) 918 .width('50%') 919 .height(40) 920 .margin(20) 921 .onClick(() => { 922 if (this.pageStack !== undefined && this.pageStack !== null) { 923 // Obtain the parameters of the page named PageHome1. 924 let result = this.pageStack.getParamByName('PageHome1'); 925 hilog.info(0x0000, 'demotest', 'getParamByName: ' + result.toString()); 926 } 927 }) 928 Button('getIndexByNameHomePage', { stateEffect: true, type: ButtonType.Capsule}) 929 .width('50%') 930 .height(40) 931 .margin(20) 932 .onClick(() => { 933 if (this.pageStack !== undefined && this.pageStack !== null) { 934 // Obtain the index of the page named PageHome1. 935 let result = this.pageStack.getIndexByName('PageHome1'); 936 hilog.info(0x0000, 'demotest', 'getIndexByName: ' + result); 937 } 938 }) 939 Button('keepBottomPage True', { stateEffect: true, type: ButtonType.Capsule}) 940 .width('50%') 941 .height(40) 942 .margin(10) 943 .onClick(() => { 944 if (this.pageStack !== undefined && this.pageStack !== null) { 945 // Set the bottom page of the stack to be unremovable. 946 this.pageStack.keepBottomPage(true); 947 } 948 }) 949 Button('keepBottomPage False', { stateEffect: true, type: ButtonType.Capsule}) 950 .width('50%') 951 .height(40) 952 .margin(10) 953 .onClick(() => { 954 if (this.pageStack !== undefined && this.pageStack !== null) { 955 // Set the bottom page of the stack to be removable. 956 this.pageStack.keepBottomPage(false); 957 } 958 }) 959 Button('setPlaceholderPage', { stateEffect: true, type: ButtonType.Capsule}) 960 .width('50%') 961 .height(40) 962 .margin(10) 963 .onClick(() => { 964 if (this.pageStack !== undefined && this.pageStack !== null) { 965 this.pageStack.setPlaceholderPage({ name: 'PagePlaceholder' }); 966 } 967 }) 968 }.backgroundColor(0xFFFFFF).width('100%').padding(10).borderRadius(15) 969 } 970 .width('100%') 971 } 972 .width('100%') 973 .height('92%') 974 }.hideTitleBar(true) 975 } 976 } 977 978 log(): boolean { 979 hilog.info(0x0000, 'demotest', 'PageHome1 build called'); 980 return true; 981 } 982} 983``` 984<!--code_no_check--> 985```typescript 986// pages/PageDetail1.ets: detail page 987import { MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation'; 988import { hilog } from '@kit.PerformanceAnalysisKit'; 989 990@Component 991export struct PageDetail1 { 992 @State message: string = 'PageDetail1'; 993 @Consume('pageStack') pageStack: MultiNavPathStack; 994 controller: TextInputController = new TextInputController(); 995 text: String = ''; 996 param: Object = new Object(); 997 998 build() { 999 if (this.log()) { 1000 NavDestination() { 1001 Column() { 1002 Column() { 1003 Text(this.message) 1004 .fontSize(40) 1005 .fontWeight(FontWeight.Bold) 1006 } 1007 .height('8%') 1008 .width('100%') 1009 Scroll(){ 1010 Column(){ 1011 Button('OpenHome', { stateEffect: true, type: ButtonType.Capsule}) 1012 .width('50%') 1013 .height(40) 1014 .margin(20) 1015 .onClick(() => { 1016 if (this.pageStack !== undefined && this.pageStack !== null) { 1017 // Navigate to the PageHome1 page. 1018 this.pageStack.pushPathByName('PageHome1', 'testParam', true, SplitPolicy.HOME_PAGE); 1019 } 1020 }) 1021 Button('OpenDetail', { stateEffect: true, type: ButtonType.Capsule}) 1022 .width('50%') 1023 .height(40) 1024 .margin(20) 1025 .onClick(() => { 1026 if (this.pageStack !== undefined && this.pageStack !== null) { 1027 // Navigate to the PageDetail1 page. 1028 this.pageStack.pushPathByName('PageDetail1', 'testParam'); 1029 } 1030 }) 1031 Button('OpenFull', { stateEffect: true, type: ButtonType.Capsule}) 1032 .width('50%') 1033 .height(40) 1034 .margin(20) 1035 .onClick(() => { 1036 if (this.pageStack !== undefined && this.pageStack !== null) { 1037 // Navigate to the PageFull1 page. 1038 this.pageStack.pushPathByName('PageFull1', 'testParam', true, SplitPolicy.FULL_PAGE); 1039 } 1040 }) 1041 Button('ReplaceDetail', { stateEffect: true, type: ButtonType.Capsule}) 1042 .width('50%') 1043 .height(40) 1044 .margin(20) 1045 .onClick(() => { 1046 if (this.pageStack !== undefined && this.pageStack !== null) { 1047 // Replace the current page with the PageDetail2 page. 1048 this.pageStack.replacePathByName('PageDetail2', 'testParam'); 1049 } 1050 }) 1051 Button('removeByName PageDetail1', { stateEffect: true, type: ButtonType.Capsule}) 1052 .width('50%') 1053 .height(40) 1054 .margin(20) 1055 .onClick(() => { 1056 if (this.pageStack !== undefined && this.pageStack !== null) { 1057 // Remove the page named PageDetail1 from the stack. 1058 this.pageStack.removeByName('PageDetail1'); 1059 } 1060 }) 1061 Button('removeByIndexes 0135', { 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 // Remove pages with indexes 0, 1, 3, and 5 from the stack. 1068 this.pageStack.removeByIndexes([0,1,3,5]); 1069 } 1070 }) 1071 Button('switchFullScreenState true', { stateEffect: true, type: ButtonType.Capsule}) 1072 .width('50%') 1073 .height(40) 1074 .margin(20) 1075 .onClick(() => { 1076 if (this.pageStack !== undefined && this.pageStack !== null) { 1077 // Set the page to full-screen mode. 1078 this.pageStack.switchFullScreenState(true); 1079 } 1080 }) 1081 Button('switchFullScreenState false', { stateEffect: true, type: ButtonType.Capsule}) 1082 .width('50%') 1083 .height(40) 1084 .margin(20) 1085 .onClick(() => { 1086 if (this.pageStack !== undefined && this.pageStack !== null) { 1087 // Set the page to non-full-screen mode. 1088 this.pageStack.switchFullScreenState(false); 1089 } 1090 }) 1091 Button('pop', { stateEffect: true, type: ButtonType.Capsule}) 1092 .width('50%') 1093 .height(40) 1094 .margin(20) 1095 .onClick(() => { 1096 if (this.pageStack !== undefined && this.pageStack !== null) { 1097 this.pageStack.pop('123'); 1098 } 1099 }) 1100 Button('popToHome1', { stateEffect: true, type: ButtonType.Capsule}) 1101 .width('50%') 1102 .height(40) 1103 .margin(20) 1104 .onClick(() => { 1105 if (this.pageStack !== undefined && this.pageStack !== null) { 1106 // Return to the page with the specified name and remove all other pages with a higher index. 1107 this.pageStack.popToName('PageHome1'); 1108 } 1109 }) 1110 TextInput({placeholder: 'input your poptoindex ...', controller: this.controller }) 1111 .placeholderColor(Color.Grey) 1112 .placeholderFont({ size: 14, weight: 400 }) 1113 .caretColor(Color.Blue) 1114 .type(InputType.Number) 1115 .width('50%') 1116 .height(40) 1117 .margin(20) 1118 .fontSize(14) 1119 .fontColor(Color.Black) 1120 .onChange((value: String) => { 1121 this.text = value; 1122 }) 1123 Button('poptoindex', { stateEffect: true, type: ButtonType.Capsule}) 1124 .width('50%') 1125 .height(40) 1126 .margin(20) 1127 .onClick(() => { 1128 if (this.pageStack !== undefined && this.pageStack !== null) { 1129 // Return to the page with the specified index and remove all pages with a higher index. 1130 this.pageStack.popToIndex(Number(this.text)); 1131 this.controller.caretPosition(1); 1132 } 1133 }) 1134 Button('moveIndexToTop', { stateEffect: true, type: ButtonType.Capsule}) 1135 .width('50%') 1136 .height(40) 1137 .margin(20) 1138 .onClick(() => { 1139 if (this.pageStack !== undefined && this.pageStack !== null) { 1140 // Move the page with the specified index to the top of the stack. 1141 this.pageStack.moveIndexToTop(Number(this.text)); 1142 this.controller.caretPosition(1); 1143 } 1144 }) 1145 Button('clear', { stateEffect: true, type: ButtonType.Capsule}) 1146 .width('50%') 1147 .height(40) 1148 .margin(20) 1149 .onClick(() => { 1150 if (this.pageStack !== undefined && this.pageStack !== null) { 1151 // Clear the current route stack. 1152 this.pageStack.clear(); 1153 } 1154 }) 1155 Button('disableAnimation', { stateEffect: true, type: ButtonType.Capsule}) 1156 .width('50%') 1157 .height(40) 1158 .margin(20) 1159 .onClick(() => { 1160 if (this.pageStack !== undefined && this.pageStack !== null) { 1161 // Disable animations for stack operations corresponding to the current stack. 1162 this.pageStack.disableAnimation(true); 1163 } 1164 }) 1165 Button('enableAnimation', { stateEffect: true, type: ButtonType.Capsule}) 1166 .width('50%') 1167 .height(40) 1168 .margin(20) 1169 .onClick(() => { 1170 if (this.pageStack !== undefined && this.pageStack !== null) { 1171 // Enable animations for stack operations corresponding to the current stack. 1172 this.pageStack.disableAnimation(false); 1173 } 1174 }) 1175 Button('setHomeWidthRange(20, 80)', { stateEffect: true, type: ButtonType.Capsule}) 1176 .width('50%') 1177 .height(40) 1178 .margin(20) 1179 .onClick(() => { 1180 if (this.pageStack !== undefined && this.pageStack !== null) { 1181 this.pageStack.setHomeWidthRange(20, 80); 1182 } 1183 }) 1184 Button('setHomeWidthRange(-1, 20)', { stateEffect: true, type: ButtonType.Capsule}) 1185 .width('50%') 1186 .height(40) 1187 .margin(20) 1188 .onClick(() => { 1189 if (this.pageStack !== undefined && this.pageStack !== null) { 1190 this.pageStack.setHomeWidthRange(-1, 20); 1191 } 1192 }) 1193 Button('setHomeWidthRange(20, 120)', { stateEffect: true, type: ButtonType.Capsule}) 1194 .width('50%') 1195 .height(40) 1196 .margin(20) 1197 .onClick(() => { 1198 if (this.pageStack !== undefined && this.pageStack !== null) { 1199 this.pageStack.setHomeWidthRange(20, 120); 1200 } 1201 }) 1202 } 1203 .width('100%') 1204 } 1205 .width('100%') 1206 .height('92%') 1207 } 1208 }.hideTitleBar(true) 1209 } 1210 } 1211 1212 log(): boolean { 1213 hilog.info(0x0000, 'demotest', 'PageDetail1 build called'); 1214 return true; 1215 } 1216} 1217``` 1218<!--code_no_check--> 1219```typescript 1220// pages/PageDetail2.ets: detail page 1221import { MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation'; 1222import { hilog } from '@kit.PerformanceAnalysisKit'; 1223 1224@Component 1225export struct PageDetail2 { 1226 @State message: string = 'PageDetail2'; 1227 @Consume('pageStack') pageStack: MultiNavPathStack; 1228 controller: TextInputController = new TextInputController(); 1229 text: String = ''; 1230 param: Object = new Object(); 1231 1232 build() { 1233 if (this.log()) { 1234 NavDestination() { 1235 Column() { 1236 Column() { 1237 Text(this.message) 1238 .fontSize(40) 1239 .fontWeight(FontWeight.Bold) 1240 } 1241 .width('100%') 1242 .height('8%') 1243 Scroll(){ 1244 Column() { 1245 Button('OpenHome', { 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 // Navigate to the PageHome1 page. 1252 this.pageStack.pushPathByName('PageHome1', 'testParam', true, SplitPolicy.HOME_PAGE); 1253 } 1254 }) 1255 Button('OpenDetail', { stateEffect: true, type: ButtonType.Capsule}) 1256 .width('50%') 1257 .height(40) 1258 .margin(20) 1259 .onClick(() => { 1260 if (this.pageStack !== undefined && this.pageStack !== null) { 1261 // Navigate to the PageDetail1 page. 1262 this.pageStack.pushPathByName('PageDetail1', 'testParam'); 1263 } 1264 }) 1265 Button('OpenFull', { stateEffect: true, type: ButtonType.Capsule}) 1266 .width('50%') 1267 .height(40) 1268 .margin(20) 1269 .onClick(() => { 1270 if (this.pageStack !== undefined && this.pageStack !== null) { 1271 // Navigate to the PageFull1 page. 1272 this.pageStack.pushPathByName('PageFull1', 'testParam', true, SplitPolicy.FULL_PAGE); 1273 } 1274 }) 1275 Button('ReplaceDetail', { stateEffect: true, type: ButtonType.Capsule}) 1276 .width('50%') 1277 .height(40) 1278 .margin(20) 1279 .onClick(() => { 1280 if (this.pageStack !== undefined && this.pageStack !== null) { 1281 // Replace the current page with the PageDetail2 page. 1282 this.pageStack.replacePathByName('PageDetail2', 'testParam'); 1283 } 1284 }) 1285 TextInput({placeholder: 'input your poptoindex ...', controller: this.controller }) 1286 .placeholderColor(Color.Grey) 1287 .placeholderFont({ size: 14, weight: 400 }) 1288 .caretColor(Color.Blue) 1289 .type(InputType.Number) 1290 .width('50%') 1291 .height(40) 1292 .margin(20) 1293 .fontSize(14) 1294 .fontColor(Color.Black) 1295 .onChange((value: String) => { 1296 this.text = value; 1297 }) 1298 Button('moveIndexToTop', { stateEffect: true, type: ButtonType.Capsule}) 1299 .width('50%') 1300 .height(40) 1301 .margin(20) 1302 .onClick(() => { 1303 if (this.pageStack !== undefined && this.pageStack !== null) { 1304 // Move the page with the specified index to the top of the stack. 1305 this.pageStack.moveIndexToTop(Number(this.text)); 1306 this.controller.caretPosition(1); 1307 } 1308 }) 1309 Button('pop', { 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.pop(); 1316 } 1317 }) 1318 TextInput({placeholder: 'input your poptoindex ...', controller: this.controller }) 1319 .placeholderColor(Color.Grey) 1320 .placeholderFont({ size: 14, weight: 400 }) 1321 .caretColor(Color.Blue) 1322 .type(InputType.Number) 1323 .width('50%') 1324 .height(40) 1325 .margin(20) 1326 .fontSize(14) 1327 .fontColor(Color.Black) 1328 .onChange((value: String) => { 1329 this.text = value; 1330 }) 1331 Button('poptoindex', { stateEffect: true, type: ButtonType.Capsule}) 1332 .width('50%') 1333 .height(40) 1334 .margin(20) 1335 .onClick(() => { 1336 if (this.pageStack !== undefined && this.pageStack !== null) { 1337 // Return to the page with the specified index and remove all pages with a higher index. 1338 this.pageStack.popToIndex(Number(this.text)); 1339 this.controller.caretPosition(1); 1340 } 1341 }) 1342 Button('clear', { stateEffect: true, type: ButtonType.Capsule}) 1343 .width('50%') 1344 .height(40) 1345 .margin(20) 1346 .onClick(() => { 1347 if (this.pageStack !== undefined && this.pageStack !== null) { 1348 // Clear the current route stack. 1349 this.pageStack.clear(); 1350 } 1351 }) 1352 Button('disableAnimation', { stateEffect: true, type: ButtonType.Capsule}) 1353 .width('50%') 1354 .height(40) 1355 .margin(20) 1356 .onClick(() => { 1357 if (this.pageStack !== undefined && this.pageStack !== null) { 1358 // Disable animations for stack operations corresponding to the current stack. 1359 this.pageStack.disableAnimation(true); 1360 } 1361 }) 1362 Button('enableAnimation', { stateEffect: true, type: ButtonType.Capsule}) 1363 .width('50%') 1364 .height(40) 1365 .margin(20) 1366 .onClick(() => { 1367 if (this.pageStack !== undefined && this.pageStack !== null) { 1368 // Enable animations for stack operations corresponding to the current stack. 1369 this.pageStack.disableAnimation(false); 1370 } 1371 }) 1372 } 1373 .width('100%') 1374 } 1375 .width('100%') 1376 .height('92%') 1377 } 1378 } 1379 .hideTitleBar(true) 1380 } 1381 } 1382 1383 log(): boolean { 1384 hilog.info(0x0000, 'demotest', 'PageDetail2 build called'); 1385 return true; 1386 } 1387} 1388``` 1389<!--code_no_check--> 1390```typescript 1391// pages/PageFull1.ets: page that does not participate in split-screen display and is displayed in full-screen mode by default 1392import { MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation'; 1393import { hilog } from '@kit.PerformanceAnalysisKit'; 1394 1395@Component 1396export struct PageFull1 { 1397 @State message: string = 'PageFull1'; 1398 @Consume('pageStack') pageStack: MultiNavPathStack; 1399 controller: TextInputController = new TextInputController(); 1400 text: String = ''; 1401 1402 build() { 1403 if (this.log()) { 1404 NavDestination() { 1405 Column() { 1406 Column() { 1407 Text(this.message) 1408 .fontSize(40) 1409 .fontWeight(FontWeight.Bold) 1410 } 1411 .width('100%') 1412 .height('8%') 1413 1414 Scroll() { 1415 Column() { 1416 Button('OpenHome', { 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 // Navigate to the PageHome1 page. 1423 this.pageStack.pushPathByName('PageHome1', 'testParam', true, SplitPolicy.HOME_PAGE); 1424 } 1425 }) 1426 Button('OpenDetail', { stateEffect: true, type: ButtonType.Capsule }) 1427 .width('50%') 1428 .height(40) 1429 .margin(20) 1430 .onClick(() => { 1431 if (this.pageStack !== undefined && this.pageStack !== null) { 1432 // Navigate to the PageDetail1 page. 1433 this.pageStack.pushPathByName('PageDetail1', 'testParam'); 1434 } 1435 }) 1436 Button('OpenFull', { stateEffect: true, type: ButtonType.Capsule }) 1437 .width('50%') 1438 .height(40) 1439 .margin(20) 1440 .onClick(() => { 1441 if (this.pageStack !== undefined && this.pageStack !== null) { 1442 // Navigate to the PageFull1 page. 1443 this.pageStack.pushPathByName('PageFull1', 'testParam', true, SplitPolicy.FULL_PAGE); 1444 } 1445 }) 1446 Button('ReplaceFULL', { stateEffect: true, type: ButtonType.Capsule }) 1447 .width('50%') 1448 .height(40) 1449 .margin(20) 1450 .onClick(() => { 1451 if (this.pageStack !== undefined && this.pageStack !== null) { 1452 // Replace the current page with the PageFull1 page. 1453 this.pageStack.replacePathByName('PageFull1', 'testParam', true); 1454 } 1455 }) 1456 Button('removeByName PageFull1', { 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 // Remove the page named PageFull1 from the stack. 1463 this.pageStack.removeByName('PageFull1'); 1464 } 1465 }) 1466 Button('removeByIndexes 0135', { stateEffect: true, type: ButtonType.Capsule }) 1467 .width('50%') 1468 .height(40) 1469 .margin(20) 1470 .onClick(() => { 1471 if (this.pageStack !== undefined && this.pageStack !== null) { 1472 // Remove pages with indexes 0, 1, 3, and 5 from the stack. 1473 this.pageStack.removeByIndexes([0, 1, 3, 5]); 1474 } 1475 }) 1476 Button('pop', { stateEffect: true, type: ButtonType.Capsule }) 1477 .width('50%') 1478 .height(40) 1479 .margin(20) 1480 .onClick(() => { 1481 if (this.pageStack !== undefined && this.pageStack !== null) { 1482 this.pageStack.pop(); 1483 } 1484 }) 1485 TextInput({ placeholder: 'input your poptoindex ...', controller: this.controller }) 1486 .placeholderColor(Color.Grey) 1487 .placeholderFont({ size: 14, weight: 400 }) 1488 .caretColor(Color.Blue) 1489 .width('50%') 1490 .height(40) 1491 .margin(20) 1492 .type(InputType.Number) 1493 .fontSize(14) 1494 .fontColor(Color.Black) 1495 .onChange((value: String) => { 1496 this.text = value; 1497 }) 1498 Button('poptoindex', { stateEffect: true, type: ButtonType.Capsule }) 1499 .width('50%') 1500 .height(40) 1501 .margin(20) 1502 .onClick(() => { 1503 if (this.pageStack !== undefined && this.pageStack !== null) { 1504 this.pageStack.popToIndex(Number(this.text)); 1505 this.controller.caretPosition(1); 1506 } 1507 }) 1508 } 1509 .width('100%') 1510 } 1511 .width('100%') 1512 .height('92%') 1513 } 1514 } 1515 .hideTitleBar(true) 1516 .onBackPressed(() => { 1517 hilog.info(0x0000, 'demotest', 'PageFull1 onBackPressed: '); 1518 return false; 1519 }) 1520 } 1521 } 1522 1523 log(): boolean { 1524 hilog.info(0x0000, 'demotest', 'PageFull1 build called'); 1525 return true; 1526 } 1527} 1528``` 1529<!--code_no_check--> 1530```typescript 1531// pages/PagePlaceholder.ets: placeholder page 1532import { MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation'; 1533import { hilog } from '@kit.PerformanceAnalysisKit'; 1534 1535@Component 1536export struct PagePlaceholder { 1537 @State message: string = 'PagePlaceholder'; 1538 @Consume('pageStack') pageStack: MultiNavPathStack; 1539 controller: TextInputController = new TextInputController(); 1540 text: String = ''; 1541 lastBackTime: number = 0; 1542 1543 build() { 1544 if (this.log()) { 1545 NavDestination() { 1546 Column() { 1547 Column() { 1548 Text(this.message) 1549 .fontSize(50) 1550 .fontWeight(FontWeight.Bold) 1551 } 1552 .width('100%') 1553 .height('8%') 1554 1555 Stack({alignContent: Alignment.Center}) { 1556 Text('Placeholder sample page') 1557 .fontSize(80) 1558 .fontWeight(FontWeight.Bold) 1559 .fontColor(Color.Red) 1560 } 1561 .width('100%') 1562 .height('92%') 1563 } 1564 }.hideTitleBar(true) 1565 } 1566 } 1567 1568 log(): boolean { 1569 hilog.info(0x0000, 'demotest', 'PagePlaceholder build called'); 1570 return true; 1571 } 1572} 1573``` 1574 1575Demo of the split-screen effect 1576 1577 1578 1579Demo of navigation from the home page to the detail page 1580 1581 1582 1583Demo of a full-screen page 1584 1585 1586
