1# MultiNavigation 2 3MultiNavigation用于在大尺寸设备上分栏显示、进行路由跳转。 4 5> **说明：** 6> 7> 该组件从API Version 14开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> 由于MultiNavigation存在多重栈嵌套，调用本文档明确说明的不支持接口或不在本文档支持接口列表中的接口(例如getParent、setInterception、pushDestination等)，可能会发生无法预期的问题。 10 11## 导入模块 12 13``` 14import { MultiNavigation, MultiNavPathStack, SplitPolicy } from '@kit.ArkUI'; 15``` 16 17## 子组件 18 19不可以包含子组件 20 21## MultiNavigation 22 23MultiNavigation(navDestination: navDestination, multiStack: MultiNavPathStack, onNavigationModeChange?: OnNavigationModeChangeCallback, onHomeShowOnTop?: OnHomeShowOnTopCallback) 24 25创建并初始化MultiNavigation组件。 26 27MultiNavigation组件遵循默认的左起右清栈规则，这意味着从左侧主页点击时，会触发详情页的加载并同时清除右侧所有其他详情页，确保右侧仅展示最新加载的详情页。然而，若在右侧的详情页上再次执行详情页加载操作，系统将不会执行清栈动作。 28 29**装饰器类型：**@Component 30 31**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 32 33**系统能力：** SystemCapability.ArkUI.ArkUI.Full 34 35**参数：** 36 37| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 38|:---------:|:----------------------:|-----| ------ |-----------| 39| multiStack | [MultiNavPathStack](#multinavpathstack) | 是 | @State | 设置路由栈。 | 40| navDestination | [NavDestinationBuildFunction](#navdestinationbuildfunction) | 是 | @BuilderParam | 设置加载目标页面的路由规则。 | 41| onNavigationModeChange | [OnNavigationModeChangeCallback](#onnavigationmodechangecallback) | 否 | - | 设置MultiNavigation模式变更时的回调。 | 42| onHomeShowOnTop | [OnHomeShowOnTopCallback](#onhomeshowontopcallback) | 否 | - | 设置主页处于栈顶时的回调。 | 43 44## MultiNavPathStack 45 46当前，MultiNavigation的路由栈仅支持由使用方自行创建，不支持通过回调方式获取。请勿使用NavDestination的onReady等类似事件或接口来获取NavPathStack并进行栈操作，因为这可能会导致不可预知的问题。 47 48### constructor 49 50constructor() 51 52**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 53 54**系统能力：** SystemCapability.ArkUI.ArkUI.Full 55 56### pushPath 57 58pushPath(info: NavPathInfo, animated?: boolean, policy?: SplitPolicy): void 59 60将指定的NavDestination页面信息入栈。 61 62**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 63 64**系统能力：** SystemCapability.ArkUI.ArkUI.Full 65 66**参数：** 67 68| 参数名 | 类型 | 必填 | 说明 | 69| :------: | :----------------------------------------------------------: | :--: | ----------------------------------------- | 70| info | [NavPathInfo](./ts-basic-components-navigation.md#navpathinfo10) | 是 | NavDestination页面的信息。 | 71| animated | boolean | 否 | 是否支持转场动画，默认值：true。 | 72| policy | [SplitPolicy](#splitpolicy枚举说明) | 否 | 当前入栈页面的策略，默认值：DETAIL_PAGE。 | 73 74### pushPath 75 76pushPath(info: NavPathInfo, options?: NavigationOptions, policy?: SplitPolicy): void 77 78将指定的NavDestination页面信息入栈，通过NavigationOptions设置页面栈操作选项。 79 80**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 81 82**系统能力：** SystemCapability.ArkUI.ArkUI.Full 83 84**参数：** 85 86| 参数名 | 类型 | 必填 | 说明 | 87| :-----: | :----------------------------------------------------------: | :--: | ------------------------------------------ | 88| info | [NavPathInfo](./ts-basic-components-navigation.md#navpathinfo10) | 是 | NavDestination页面的信息。 | 89| options | [NavigationOptions](./ts-basic-components-navigation.md#navigationoptions12) | 否 | 页面栈操作选项。仅支持其中的animated字段。 | 90| policy | [SplitPolicy](#splitpolicy枚举说明) | 否 | 当前入栈页面的策略，默认值：DETAIL_PAGE | 91 92### pushPathByName 93 94pushPathByName(name: string, param: Object, animated?: boolean, policy?: SplitPolicy): void 95 96将name指定的NavDestination页面信息入栈，传递的数据为param。 97 98**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 99 100**系统能力：** SystemCapability.ArkUI.ArkUI.Full 101 102**参数：** 103 104| 参数名 | 类型 | 必填 | 说明 | 105|:---------------------:|:------------:|:------:| --------------------- | 106| name | string | 是 | NavDestination页面名称。 | 107| param | Object | 是 | NavDestination页面详细参数。 | 108| animated | boolean | 否 | 是否支持转场动画，默认值：true。 | 109| policy | [SplitPolicy](#splitpolicy枚举说明) | 否 | 当前入栈页面的策略，默认值：DETAIL_PAGE | 110 111### pushPathByName 112 113pushPathByName(name: string, param: Object, onPop?: base.Callback\<PopInfo>, animated?: boolean, policy?: SplitPolicy): void 114 115将name指定的NavDestination页面信息入栈，传递的数据为param，添加onPop回调接收入栈页面出栈时的返回结果，并进行处理。 116 117**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 118 119**系统能力：** SystemCapability.ArkUI.ArkUI.Full 120 121**参数：** 122 123| 参数名 | 类型 | 必填 | 说明 | 124|:---------:|:-------------------------------------------------------------:|:------:|------| 125| name | string | 是 | NavDestination页面名称。 | 126| param | Object | 是 | NavDestination页面详细参数。 | 127| onPop | base.[Callback](../../apis-basic-services-kit/js-apis-base.md#callback)\<[PopInfo](ts-basic-components-navigation.md#popinfo11)> | 否 | Callback回调，用于页面出栈时触发该回调处理返回结果。 | 128| animated | boolean | 否 | 是否支持转场动画，默认值：true。 | 129| policy | [SplitPolicy](#splitpolicy枚举说明) | 否 | 当前入栈页面的策略，默认值：DETAIL_PAGE | 130 131### replacePath 132 133replacePath(info: NavPathInfo, animated?: boolean): void 134 135将当前页面栈栈顶退出，将指定的NavDestination页面信息入栈，新页面的分栏策略继承原栈顶页面的策略。 136 137**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 138 139**系统能力：** SystemCapability.ArkUI.ArkUI.Full 140 141**参数：** 142 143| 参数名 | 类型 | 必填 | 说明 | 144| :------: | :----------------------------------------------------------: | :--: | -------------------------------- | 145| info | [NavPathInfo](./ts-basic-components-navigation.md#navpathinfo10) | 是 | NavDestination页面的信息。 | 146| animated | boolean | 否 | 是否支持转场动画，默认值：true。 | 147 148### replacePath 149 150replacePath(info: NavPathInfo, options?: NavigationOptions): void 151 152将当前页面栈栈顶退出，将指定的NavDestination页面信息入栈，新页面的分栏策略继承原栈顶页面的策略，通过NavigationOptions设置页面栈操作选项。 153 154**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 155 156**系统能力：** SystemCapability.ArkUI.ArkUI.Full 157 158**参数：** 159 160| 参数名 | 类型 | 必填 | 说明 | 161| :-----: | :----------------------------------------------------------: | :--: | ------------------------------------------ | 162| info | [NavPathInfo](./ts-basic-components-navigation.md#navpathinfo10) | 是 | NavDestination页面的信息。 | 163| options | [NavigationOptions](./ts-basic-components-navigation.md#navigationoptions12) | 否 | 页面栈操作选项。仅支持其中的animated字段。 | 164 165### replacePathByName 166 167replacePathByName(name: string, param: Object, animated?: boolean): void 168 169将当前页面栈栈顶退出，将name指定的页面入栈，新页面的分栏策略继承原栈顶页面的策略。 170 171**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 172 173**系统能力：** SystemCapability.ArkUI.ArkUI.Full 174 175**参数：** 176 177| 参数名 | 类型 | 必填 | 说明 | 178|:--------:|:---------:|:------:|----------------------| 179| name | string | 是 | NavDestination页面名称。 | 180| param | Object | 是 | NavDestination页面详细参数。 | 181| animated | boolean | 否 | 是否支持转场动画，默认值：true。 | 182 183### removeByIndexes 184 185removeByIndexes(indexes: Array<number\>): number 186 187将页面栈内索引值在indexes中的NavDestination页面删除。 188 189**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 190 191**系统能力：** SystemCapability.ArkUI.ArkUI.Full 192 193**参数：** 194 195| 参数名 | 类型 | 必填 | 说明 | 196|:--------:|:---------------:|:------:| --------------------- | 197| indexes | Array<number\> | 是 | 待删除NavDestination页面的索引值数组。 | 198 199**返回值：** 200 201| 类型 | 说明 | 202|:-------------:| ------------------------ | 203| number | 返回删除的NavDestination页面数量。 | 204 205### removeByName 206 207removeByName(name: string): number 208 209将页面栈内指定name的NavDestination页面删除。 210 211**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 212 213**系统能力：** SystemCapability.ArkUI.ArkUI.Full 214 215**参数：** 216 217| 参数名 | 类型 | 必填 | 说明 | 218|:-------:| ------- | ---- | --------------------- | 219| name | string | 是 | 待删除NavDestination页面的名字。 | 220 221**返回值：** 222 223| 类型 | 说明 | 224|:-------------:| ------------------------ | 225| number | 返回删除的NavDestination页面数量。 | 226 227### pop 228 229pop(animated?: boolean): NavPathInfo | undefined 230 231弹出路由栈栈顶元素。 232 233> **说明：** 234> 235> 当调用[keepBottomPage](#keepbottompage)接口并设置为true时，会保留栈底页面。 236 237**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 238 239**系统能力：** SystemCapability.ArkUI.ArkUI.Full 240 241**参数：** 242 243| 参数名 | 类型 | 必填 | 说明 | 244|:-----------:|:--------:|:------:| -------------------- | 245| animated | boolean | 否 | 是否支持转场动画，默认值：true。 | 246 247**返回值：** 248 249| 类型 | 说明 | 250| ----------- | ------------------------ | 251| [NavPathInfo](./ts-basic-components-navigation.md#navpathinfo10) \| undefined | 返回栈顶NavDestination页面的信息。 | 252 253### pop 254 255pop(result?: Object, animated?: boolean): NavPathInfo | undefined 256 257弹出路由栈栈顶元素，并触发onPop回调传入页面处理结果。 258 259> **说明：** 260> 261> 当调用[keepBottomPage](#keepbottompage)接口并设置为true时，会保留栈底页面。 262 263**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 264 265**系统能力：** SystemCapability.ArkUI.ArkUI.Full 266 267**参数：** 268 269| 参数名 | 类型 | 必填 | 说明 | 270|:---------:|:-------------------------------:|:------:| -------------------- | 271| result | Object | 否 | 页面自定义处理结果。 | 272| animated | boolean | 否 | 是否支持转场动画，默认值：true。 | 273 274**返回值：** 275 276| 类型 | 说明 | 277| ----------- | ------------------------ | 278| [NavPathInfo](./ts-basic-components-navigation.md#navpathinfo10) \| undefined | 返回栈顶NavDestination页面的信息。 | 279 280### popToName 281 282popToName(name: string, animated?: boolean): number 283 284回退路由栈到由栈底开始第一个名为name的NavDestination页面。 285 286**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 287 288**系统能力：** SystemCapability.ArkUI.ArkUI.Full 289 290**参数：** 291 292| 参数名 | 类型 | 必填 | 说明 | 293|:----------:|:--------:|:------:| ------------------- | 294| name | string | 是 | NavDestination页面名称。 | 295| animated | boolean | 否 | 是否支持转场动画，默认值：true。 | 296 297**返回值：** 298 299| 类型 | 说明 | 300| ------ | ---------------------------------------- | 301| number | 如果栈中存在名为name的NavDestination页面，则返回由栈底开始第一个名为name的NavDestination页面的索引，否则返回-1。 | 302 303### popToName 304 305popToName(name: string, result: Object, animated?: boolean): number 306 307回退路由栈到由栈底开始第一个名为name的NavDestination页面，并触发onPop回调传入页面处理结果。 308 309**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 310 311**系统能力：** SystemCapability.ArkUI.ArkUI.Full 312 313**参数：** 314 315| 参数名 | 类型 | 必填 | 说明 | 316|:---------:|:--------:|:------:| ------------------- | 317| name | string | 是 | NavDestination页面名称。 | 318| result | Object | 是 | 页面自定义处理结果。 | 319| animated | boolean | 否 | 是否支持转场动画，默认值：true。 | 320 321**返回值：** 322 323| 类型 | 说明 | 324| ------ | ---------------------------------------- | 325| number | 如果栈中存在名为name的NavDestination页面，则返回由栈底开始第一个名为name的NavDestination页面的索引，否则返回-1。 | 326 327### popToIndex 328 329popToIndex(index: number, animated?: boolean): void 330 331回退路由栈到index指定的NavDestination页面。 332 333**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 334 335**系统能力：** SystemCapability.ArkUI.ArkUI.Full 336 337**参数：** 338 339| 参数名 | 类型 | 必填 | 说明 | 340|:------------:|:--------:|:------:| ---------------------- | 341| index | number | 是 | NavDestination页面的位置索引。 | 342| animated | boolean | 否 | 是否支持转场动画，默认值：true。 | 343 344### popToIndex 345 346popToIndex(index: number, result: Object, animated?: boolean): void 347 348回退路由栈到index指定的NavDestination页面，并触发onPop回调传入页面处理结果。 349 350**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 351 352**系统能力：** SystemCapability.ArkUI.ArkUI.Full 353 354**参数：** 355 356| 参数名 | 类型 | 必填 | 说明 | 357| ----- | ------ | ---- | ---------------------- | 358| index | number | 是 | NavDestination页面的位置索引。 | 359| result | Object | 是 | 页面自定义处理结果。 | 360| animated | boolean | 否 | 是否支持转场动画，默认值：true。 | 361 362### moveToTop 363 364moveToTop(name: string, animated?: boolean): number 365 366将由栈底开始第一个名为name的NavDestination页面移到栈顶。 367 368> **说明：** 369> 370> 根据找到的第一个名为name的页面的不同，MultiNavigation会进行不同的处理： 371> 372> 1)当找到的是最上层主页或者全屏页，此时不做任何处理； 373> 374> 2)当找到的是最上层主页对应的详情页，则会将对应的的详情页移到栈顶； 375> 376> 3)当找到的是非最上层的主页，则会将主页和对应所有详情页移到栈顶，详情页相对栈关系不变； 377> 378> 4)当找到的是非最上层的详情页，则会将主页和对应所有详情页移到栈顶，且将目标详情页移动到对应所有详情页的栈顶； 379> 380> 5)当找到的是非最上层的全屏页，则会将全屏页移动到栈顶。 381 382**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 383 384**系统能力：** SystemCapability.ArkUI.ArkUI.Full 385 386**参数：** 387 388| 参数名 | 类型 | 必填 | 说明 | 389|:---------:|:--------:|:------:| ------------------- | 390| name | string | 是 | NavDestination页面名称。 | 391| animated | boolean | 否 | 是否支持转场动画，默认值：true。 | 392 393**返回值：** 394 395| 类型 | 说明 | 396|:--------:|:----------------------------------------------------------------------------:| 397| number | 如果栈中存在名为name的NavDestination页面，则返回由栈底开始第一个名为name的NavDestination页面的索引，否则返回-1。 | 398 399### moveIndexToTop 400 401moveIndexToTop(index: number, animated?: boolean): void 402 403将指定index的NavDestination页面移到栈顶。 404 405> **说明：** 406> 407> 根据找到的第一个名为name的页面的不同，MultiNavigation会进行不同的处理： 408> 409> 1)当找到的是最上层主页或者全屏页，此时不做任何处理； 410> 411> 2)当找到的是最上层主页对应的详情页，则会将对应的的详情页移到栈顶； 412> 413> 3)当找到的是非最上层的主页，则会将主页和对应所有详情页移到栈顶，详情页相对栈关系不变； 414> 415> 4)当找到的是非最上层的详情页，则会将主页和对应所有详情页移到栈顶，且将目标详情页移动到对应所有详情页的栈顶； 416> 417> 5)当找到的是非最上层的全屏页，则会将全屏页移动到栈顶。 418 419**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 420 421**系统能力：** SystemCapability.ArkUI.ArkUI.Full 422 423**参数：** 424 425| 参数名 | 类型 | 必填 | 说明 | 426|:---------:|:-------:|:------:| ------------------- | 427| index | number | 是 | NavDestination页面的位置索引。 | 428| animated | boolean | 否 | 是否支持转场动画，默认值：true。 | 429 430### clear 431 432clear(animated?: boolean): void 433 434清除栈中所有页面。 435 436> **说明：** 437> 438> 当调用[keepBottomPage](#keepbottompage)接口并设置为true时，会保留栈底页面。 439 440**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 441 442**系统能力：** SystemCapability.ArkUI.ArkUI.Full 443 444**参数：** 445 446| 参数名 | 类型 | 必填 | 说明 | 447|:---------:|:--------:|:------:| ---------------------- | 448| animated | boolean | 否 | 是否支持转场动画，默认值：true。 | 449 450### getAllPathName 451 452getAllPathName(): Array<string\> 453 454获取栈中所有NavDestination页面的名称。 455 456**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 457 458**系统能力：** SystemCapability.ArkUI.ArkUI.Full 459 460**返回值：** 461 462| 类型 | 说明 | 463|:----------------:| -------------------------- | 464| Array<string\> | 返回栈中所有NavDestination页面的名称。 | 465 466### getParamByIndex 467 468getParamByIndex(index: number): Object | undefined 469 470获取index指定的NavDestination页面的参数信息。 471 472**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 473 474**系统能力：** SystemCapability.ArkUI.ArkUI.Full 475 476**参数：** 477 478| 参数名 | 类型 | 必填 | 说明 | 479|:-------:|:--------:|:------:| ---------------------- | 480| index | number | 是 | NavDestination页面的位置索引。 | 481 482**返回值：** 483 484| 类型 | 说明 | 485| --------- | -------------------------- | 486| Object | 返回对应NavDestination页面的参数信息。 | 487| undefined | 传入index无效是返回undefined。| 488 489### getParamByName 490 491getParamByName(name: string): Array<Object\> 492 493获取全部名为name的NavDestination页面的参数信息。 494 495**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 496 497**系统能力：** SystemCapability.ArkUI.ArkUI.Full 498 499**参数：** 500 501| 参数名 | 类型 | 必填 | 说明 | 502|:------:|:--------:|:------:| ------------------- | 503| name | string | 是 | NavDestination页面名称。 | 504 505**返回值：** 506 507| 类型 | 说明 | 508| --------------- | --------------------------------- | 509| Array<Object\> | 返回全部名为name的NavDestination页面的参数信息。 | 510 511### getIndexByName 512 513getIndexByName(name: string): Array<number\> 514 515获取全部名为name的NavDestination页面的位置索引。 516 517**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 518 519**系统能力：** SystemCapability.ArkUI.ArkUI.Full 520 521**参数：** 522 523| 参数名 | 类型 | 必填 | 说明 | 524|:------:|:--------:|:------:| ------------------- | 525| name | string | 是 | NavDestination页面名称。 | 526 527**返回值：** 528 529| 类型 | 说明 | 530| -------------- | --------------------------------- | 531| Array<number\> | 返回全部名为name的NavDestination页面的位置索引。 | 532 533### size 534 535size(): number 536 537获取栈大小。 538 539**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 540 541**系统能力：** SystemCapability.ArkUI.ArkUI.Full 542 543**返回值：** 544 545| 类型 | 说明 | 546| ------ | ------ | 547| number | 返回栈大小。 | 548 549### disableAnimation 550 551disableAnimation(disable: boolean): void 552 553关闭（true）或打开（false）当前MultiNavigation中所有转场动画。 554 555**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 556 557**系统能力：** SystemCapability.ArkUI.ArkUI.Full 558 559**参数：** 560 561| 参数名 | 类型 | 必填 | 说明 | 562| ----- | ------ | ---- | ---------------------- | 563| disable | boolean | 是 | 是否关闭转场动画，默认值：false。 | 564 565### switchFullScreenState 566 567switchFullScreenState(isFullScreen?: boolean): boolean 568 569切换当前顶栈详情页面的显示模式。设置为true表示为全屏显示，false表示分栏显示。 570 571**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 572 573**系统能力：** SystemCapability.ArkUI.ArkUI.Full 574 575**参数：** 576 577| 参数名 | 类型 | 必填 | 说明 | 578| :----------: | :-----: | :--: | ----------------------------------------------------- | 579| isFullScreen | boolean | 否 | 是否切换为全屏。true表示全屏模式，false表示分栏模式。 | 580 581**返回值：** 582 583| 类型 | 说明 | 584|:--------:|:----------:| 585| boolean | 切换成功或失败。 | 586 587### setHomeWidthRange 588 589setHomeWidthRange(minPercent: number, maxPercent: number): void 590 591设置主页宽度可拖动范围。应用不设置的情况下宽度为50%，且不可拖动。 592 593**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 594 595**系统能力：** SystemCapability.ArkUI.ArkUI.Full 596 597**参数：** 598 599| 参数名 | 类型 | 必填 | 说明 | 600|:-------------:|:--------:|:-----:|-------------------| 601| minPercent | number | 是 | 最小主页宽度百分比。 | 602| maxPercent | number | 是 | 最大主页宽度百分比。 | 603 604### keepBottomPage 605 606keepBottomPage(keepBottom: boolean): void 607 608设置在调用pop和clear接口时是否保留栈底页面。 609 610> **说明：** 611> 612> MultiNavigation将主页也当作了NavDestination页面入栈，所以调用pop或clear接口时会将栈底页面也出栈。 613> 应用调用此接口并设置为TRUE时，MultiNavigation会在调用pop和clear接口时保留栈底页面。 614 615**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 616 617**系统能力：** SystemCapability.ArkUI.ArkUI.Full 618 619**参数：** 620 621| 参数名 | 类型 | 必填 | 说明 | 622|:-------------:|:--------:|:-----:|--------------------| 623| keepBottom | boolean | 是 | 是否保留栈底页面，默认为FALSE。 | 624 625### setPlaceholderPage 626 627setPlaceholderPage(info: NavPathInfo): void 628 629设置占位页面。 630 631> **说明** 632> 633> 占位页面为特殊页面类型，当应用设置后，在一些大屏设备上会和主页默认形成左右分栏的效果，即左边主页，右边占位页。 634> 635> 当应用可绘制区域小于600VP、折叠屏由展开态切换为折叠态及平板横屏转竖屏等场景时，会自动将占位页出栈，只显示主页； 636> 而当应用可绘制区域大于等于600VP、折叠屏由折叠态切换为展开态及平板竖屏转横屏等场景时，会自动补充占位页，形成分栏。 637 638**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 639 640**系统能力：** SystemCapability.ArkUI.ArkUI.Full 641 642**参数：** 643 644| 参数名 | 类型 | 必填 | 说明 | 645|:-------------:|:--------:|:-----:|----------| 646| info | NavPathInfo | 是 | 占位页页面信息。 | 647 648## SplitPolicy枚举说明 649 650表示MultiNavigation中页面的类型。 651 652**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 653 654**系统能力：** SystemCapability.ArkUI.ArkUI.Full 655 656| 名称 | 值 | 说明 | 657| :---------------: | :-: | :-------------: | 658| HOME_PAGE | 0 | 主页页面类型。全屏模式显示 | 659| DETAIL_PAGE | 1 | 详情页页面类型。分栏模式显示 | 660| FULL_PAGE | 2 | 全屏页页面类型。全屏模式显示 | 661 662## NavDestinationBuildFunction 663 664type NavDestinationBuildFunction = (name: string, param?: object) => void 665 666MultiNavigation用以加载NavDestination的方法。 667 668**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 669 670**系统能力：** SystemCapability.ArkUI.ArkUI.Full 671 672| 名称 | 类型 | 必填 | 说明 | 673| --------------- | ------ |------ |------ | 674|name | string |是| 路由页面的标识符。 | 675| param | object | 否 | 路由跳转创建页面时传递的参数。 | 676 677## OnNavigationModeChangeCallback 678 679type OnNavigationModeChangeCallback = (mode: NavigationMode) => void 680 681当MultiNavigation的mode变化时触发的回调函数。 682 683**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 684 685**系统能力：** SystemCapability.ArkUI.ArkUI.Full 686 687| 名称 | 类型 | 必填 | 说明 | 688| ---- | ------------------------------------------------------------ | ---- | ------------------------------ | 689| mode | [NavigationMode](./ts-basic-components-navigation.md#navigationmode9) | 是 | 当回调触发时的NavigationMode。 | 690 691## OnHomeShowOnTopCallback 692 693type OnHomeShowOnTopCallback = (name: string) => void 694 695当主页在栈顶显示时触发的回调函数。 696 697**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 698 699**系统能力：** SystemCapability.ArkUI.ArkUI.Full 700 701| 名称 | 类型 | 必填 | 说明 | 702| ---- | ------ | ---- | -------------------------- | 703| name | string | 是 | 显示在栈顶的页面的标识符。 | 704 705## 属性 706 707不支持[通用属性](ts-component-general-attributes.md) 708 709## 事件 710 711不支持[通用事件](ts-component-general-events.md) 712 713## 示例 714 715本示例演示MultiNavigation的基本功能 716 717```typescript 718// pages/Index.ets 719import { MultiNavigation, MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation'; 720import { PageDetail1 } from './PageDetail1'; 721import { PageDetail2 } from './PageDetail2'; 722import { PageFull1 } from './PageFull1'; 723import { PageHome1 } from './PageHome1'; 724import { PagePlaceholder } from './PagePlaceholder'; 725 726@Entry 727@Component 728struct Index { 729 @Provide('pageStack') pageStack: MultiNavPathStack = new MultiNavPathStack(); 730 731 @Builder 732 PageMap(name: string, param?: object) { 733 if (name === 'PageHome1') { 734 PageHome1({ param: param }) 735 } else if (name === 'PageDetail1') { 736 PageDetail1({ param: param }); 737 } else if (name === 'PageDetail2') { 738 PageDetail2({ param: param }); 739 } else if (name === 'PageFull1') { 740 PageFull1(); 741 } else if (name === 'PagePlaceholder') { 742 PagePlaceholder(); 743 } 744 } 745 746 aboutToAppear(): void { 747 this.pageStack.pushPathByName('PageHome1', 'paramTest', false, SplitPolicy.HOME_PAGE); 748 } 749 750 build() { 751 Column() { 752 Row() { 753 MultiNavigation({ navDestination: this.PageMap, multiStack: this.pageStack }) 754 } 755 .width('100%') 756 } 757 } 758} 759``` 760<!--code_no_check--> 761```typescript 762// pages/PageHome1.ets, 对应首页 763import { MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation'; 764import { hilog } from '@kit.PerformanceAnalysisKit'; 765 766@Component 767export struct PageHome1 { 768 @State message: string = 'PageHome1'; 769 @Consume('pageStack') pageStack: MultiNavPathStack; 770 controller: TextInputController = new TextInputController() 771 text: String = ''; 772 index: number = 0; 773 param: Object = new Object(); 774 lastBackTime: number = 0; 775 776 build() { 777 if (this.log()) { 778 NavDestination() { 779 Column() { 780 Column() { 781 Text(this.message) 782 .fontSize(40) 783 .fontWeight(FontWeight.Bold) 784 } 785 .width('100%') 786 .height('8%') 787 Scroll(){ 788 Column() { 789 Button('OpenHome', { stateEffect: true, type: ButtonType.Capsule}) 790 .width('50%') 791 .height(40) 792 .margin(20) 793 .onClick(() => { 794 if (this.pageStack !== undefined && this.pageStack !== null) { 795 this.pageStack.pushPathByName('PageHome1', 'testParam', true, SplitPolicy.HOME_PAGE); 796 this.index++; 797 } 798 }) 799 Button('OpenDetail', { stateEffect: true, type: ButtonType.Capsule}) 800 .width('50%') 801 .height(40) 802 .margin(20) 803 .onClick(() => { 804 if (this.pageStack !== undefined && this.pageStack !== null) { 805 this.pageStack.pushPathByName('PageDetail1', 'testParam'); 806 this.index++; 807 } 808 }) 809 Button('OpenFull', { stateEffect: true, type: ButtonType.Capsule}) 810 .width('50%') 811 .height(40) 812 .margin(20) 813 .onClick(() => { 814 if (this.pageStack !== undefined && this.pageStack !== null) { 815 this.pageStack.pushPathByName('PageFull1', 'testParam', true, SplitPolicy.FULL_PAGE); 816 } 817 }) 818 TextInput({placeholder: 'input your poptoindex ...', controller: this.controller }) 819 .placeholderColor(Color.Grey) 820 .placeholderFont({ size: 14, weight: 400 }) 821 .caretColor(Color.Blue) 822 .width('50%') 823 .height(40) 824 .margin(20) 825 .type(InputType.Number) 826 .fontSize(14) 827 .fontColor(Color.Black) 828 .onChange((value: String) => { 829 this.text = value 830 }) 831 Button('poptoindex', { stateEffect: true, type: ButtonType.Capsule}) 832 .width('50%') 833 .height(40) 834 .margin(20) 835 .onClick(() => { 836 if (this.pageStack !== undefined && this.pageStack !== null) { 837 this.pageStack.popToIndex(Number(this.text)); 838 this.controller.caretPosition(1) 839 } 840 }) 841 Button('OpenDetailWithName', { stateEffect: true, type: ButtonType.Capsule}) 842 .width('50%') 843 .height(40) 844 .margin(20) 845 .onClick(() => { 846 if (this.pageStack !== undefined && this.pageStack !== null) { 847 this.pageStack.pushPathByName('PageDetail1', 'testParam', undefined, true); 848 } 849 }) 850 Button('pop', { stateEffect: true, type: ButtonType.Capsule}) 851 .width('50%') 852 .height(40) 853 .margin(20) 854 .onClick(() => { 855 if (this.pageStack !== undefined && this.pageStack !== null) { 856 this.pageStack.pop(); 857 } 858 }) 859 Button('moveToTopByName: PageDetail1', { stateEffect: true, type: ButtonType.Capsule}) 860 .width('50%') 861 .height(40) 862 .margin(10) 863 .onClick(() => { 864 if (this.pageStack !== undefined && this.pageStack !== null) { 865 let indexFound = this.pageStack.moveToTop('PageDetail1'); 866 hilog.info(0x0000, 'demoTest', 'moveToTopByName,indexFound:' + indexFound); 867 } 868 }) 869 Button('removeByName HOME', { stateEffect: true, type: ButtonType.Capsule}) 870 .width('50%') 871 .height(40) 872 .margin(20) 873 .onClick(() => { 874 if (this.pageStack !== undefined && this.pageStack !== null) { 875 this.pageStack.removeByName('PageHome1'); 876 } 877 }) 878 Button('removeByIndexes 0135', { stateEffect: true, type: ButtonType.Capsule}) 879 .width('50%') 880 .height(40) 881 .margin(20) 882 .onClick(() => { 883 if (this.pageStack !== undefined && this.pageStack !== null) { 884 this.pageStack.removeByIndexes([0,1,3,5]); 885 } 886 }) 887 Button('getAllPathName', { stateEffect: true, type: ButtonType.Capsule}) 888 .width('50%') 889 .height(40) 890 .margin(20) 891 .onClick(() => { 892 if (this.pageStack !== undefined && this.pageStack !== null) { 893 let result = this.pageStack.getAllPathName(); 894 hilog.info(0x0000, 'demotest', 'getAllPathName: ' + result.toString()); 895 } 896 }) 897 Button('getParamByIndex0', { stateEffect: true, type: ButtonType.Capsule}) 898 .width('50%') 899 .height(40) 900 .margin(20) 901 .onClick(() => { 902 if (this.pageStack !== undefined && this.pageStack !== null) { 903 let result = this.pageStack.getParamByIndex(0); 904 hilog.info(0x0000, 'demotest', 'getParamByIndex: ' + result); 905 } 906 }) 907 Button('getParamByNameHomePage', { stateEffect: true, type: ButtonType.Capsule}) 908 .width('50%') 909 .height(40) 910 .margin(20) 911 .onClick(() => { 912 if (this.pageStack !== undefined && this.pageStack !== null) { 913 let result = this.pageStack.getParamByName('PageHome1'); 914 hilog.info(0x0000, 'demotest', 'getParamByName: ' + result.toString()); 915 } 916 }) 917 Button('getIndexByNameHomePage', { 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 let result = this.pageStack.getIndexByName('PageHome1'); 924 hilog.info(0x0000, 'demotest', 'getIndexByName: ' + result); 925 } 926 }) 927 Button('keepBottomPage True', { stateEffect: true, type: ButtonType.Capsule}) 928 .width('50%') 929 .height(40) 930 .margin(10) 931 .onClick(() => { 932 if (this.pageStack !== undefined && this.pageStack !== null) { 933 this.pageStack.keepBottomPage(true); 934 } 935 }) 936 Button('keepBottomPage False', { stateEffect: true, type: ButtonType.Capsule}) 937 .width('50%') 938 .height(40) 939 .margin(10) 940 .onClick(() => { 941 if (this.pageStack !== undefined && this.pageStack !== null) { 942 this.pageStack.keepBottomPage(false); 943 } 944 }) 945 Button('setPlaceholderPage', { stateEffect: true, type: ButtonType.Capsule}) 946 .width('50%') 947 .height(40) 948 .margin(10) 949 .onClick(() => { 950 if (this.pageStack !== undefined && this.pageStack !== null) { 951 this.pageStack.setPlaceholderPage({ name: 'PagePlaceholder' }); 952 } 953 }) 954 }.backgroundColor(0xFFFFFF).width('100%').padding(10).borderRadius(15) 955 } 956 .width('100%') 957 } 958 .width('100%') 959 .height('92%') 960 }.hideTitleBar(true) 961 } 962 } 963 964 log(): boolean { 965 hilog.info(0x0000, 'demotest', 'PageHome1 build called'); 966 return true; 967 } 968} 969``` 970<!--code_no_check--> 971```typescript 972// pages/PageDetail1.ets：详情页 973import { MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation'; 974import { hilog } from '@kit.PerformanceAnalysisKit'; 975 976@Component 977export struct PageDetail1 { 978 @State message: string = 'PageDetail1'; 979 @Consume('pageStack') pageStack: MultiNavPathStack; 980 controller: TextInputController = new TextInputController() 981 text: String = ''; 982 param: Object = new Object(); 983 984 build() { 985 if (this.log()) { 986 NavDestination() { 987 Column() { 988 Column() { 989 Text(this.message) 990 .fontSize(40) 991 .fontWeight(FontWeight.Bold) 992 } 993 .height('8%') 994 .width('100%') 995 Scroll(){ 996 Column(){ 997 Button('OpenHome', { stateEffect: true, type: ButtonType.Capsule}) 998 .width('50%') 999 .height(40) 1000 .margin(20) 1001 .onClick(() => { 1002 if (this.pageStack !== undefined && this.pageStack !== null) { 1003 this.pageStack.pushPathByName('PageHome1', 'testParam', true, SplitPolicy.HOME_PAGE); 1004 } 1005 }) 1006 Button('OpenDetail', { stateEffect: true, type: ButtonType.Capsule}) 1007 .width('50%') 1008 .height(40) 1009 .margin(20) 1010 .onClick(() => { 1011 if (this.pageStack !== undefined && this.pageStack !== null) { 1012 this.pageStack.pushPathByName('PageDetail1', 'testParam'); 1013 } 1014 }) 1015 Button('OpenFull', { stateEffect: true, type: ButtonType.Capsule}) 1016 .width('50%') 1017 .height(40) 1018 .margin(20) 1019 .onClick(() => { 1020 if (this.pageStack !== undefined && this.pageStack !== null) { 1021 this.pageStack.pushPathByName('PageFull1', 'testParam', true, SplitPolicy.FULL_PAGE); 1022 } 1023 }) 1024 Button('ReplaceDetail', { stateEffect: true, type: ButtonType.Capsule}) 1025 .width('50%') 1026 .height(40) 1027 .margin(20) 1028 .onClick(() => { 1029 if (this.pageStack !== undefined && this.pageStack !== null) { 1030 this.pageStack.replacePathByName('PageDetail2', 'testParam'); 1031 } 1032 }) 1033 Button('removeByName PageDetail1', { stateEffect: true, type: ButtonType.Capsule}) 1034 .width('50%') 1035 .height(40) 1036 .margin(20) 1037 .onClick(() => { 1038 if (this.pageStack !== undefined && this.pageStack !== null) { 1039 this.pageStack.removeByName('PageDetail1'); 1040 } 1041 }) 1042 Button('removeByIndexes 0135', { stateEffect: true, type: ButtonType.Capsule}) 1043 .width('50%') 1044 .height(40) 1045 .margin(20) 1046 .onClick(() => { 1047 if (this.pageStack !== undefined && this.pageStack !== null) { 1048 this.pageStack.removeByIndexes([0,1,3,5]); 1049 } 1050 }) 1051 Button('switchFullScreenState true', { 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 this.pageStack.switchFullScreenState(true); 1058 } 1059 }) 1060 Button('switchFullScreenState false', { stateEffect: true, type: ButtonType.Capsule}) 1061 .width('50%') 1062 .height(40) 1063 .margin(20) 1064 .onClick(() => { 1065 if (this.pageStack !== undefined && this.pageStack !== null) { 1066 this.pageStack.switchFullScreenState(false); 1067 } 1068 }) 1069 Button('pop', { stateEffect: true, type: ButtonType.Capsule}) 1070 .width('50%') 1071 .height(40) 1072 .margin(20) 1073 .onClick(() => { 1074 if (this.pageStack !== undefined && this.pageStack !== null) { 1075 this.pageStack.pop('123'); 1076 } 1077 }) 1078 Button('popToHome1', { stateEffect: true, type: ButtonType.Capsule}) 1079 .width('50%') 1080 .height(40) 1081 .margin(20) 1082 .onClick(() => { 1083 if (this.pageStack !== undefined && this.pageStack !== null) { 1084 this.pageStack.popToName('PageHome1'); 1085 } 1086 }) 1087 TextInput({placeholder: 'input your poptoindex ...', controller: this.controller }) 1088 .placeholderColor(Color.Grey) 1089 .placeholderFont({ size: 14, weight: 400 }) 1090 .caretColor(Color.Blue) 1091 .type(InputType.Number) 1092 .width('50%') 1093 .height(40) 1094 .margin(20) 1095 .fontSize(14) 1096 .fontColor(Color.Black) 1097 .onChange((value: String) => { 1098 this.text = value 1099 }) 1100 Button('poptoindex', { 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 this.pageStack.popToIndex(Number(this.text)); 1107 this.controller.caretPosition(1) 1108 } 1109 }) 1110 Button('moveIndexToTop', { stateEffect: true, type: ButtonType.Capsule}) 1111 .width('50%') 1112 .height(40) 1113 .margin(20) 1114 .onClick(() => { 1115 if (this.pageStack !== undefined && this.pageStack !== null) { 1116 this.pageStack.moveIndexToTop(Number(this.text)); 1117 this.controller.caretPosition(1) 1118 } 1119 }) 1120 Button('clear', { stateEffect: true, type: ButtonType.Capsule}) 1121 .width('50%') 1122 .height(40) 1123 .margin(20) 1124 .onClick(() => { 1125 if (this.pageStack !== undefined && this.pageStack !== null) { 1126 this.pageStack.clear(); 1127 } 1128 }) 1129 Button('disableAnimation', { stateEffect: true, type: ButtonType.Capsule}) 1130 .width('50%') 1131 .height(40) 1132 .margin(20) 1133 .onClick(() => { 1134 if (this.pageStack !== undefined && this.pageStack !== null) { 1135 this.pageStack.disableAnimation(true); 1136 } 1137 }) 1138 Button('enableAnimation', { stateEffect: true, type: ButtonType.Capsule}) 1139 .width('50%') 1140 .height(40) 1141 .margin(20) 1142 .onClick(() => { 1143 if (this.pageStack !== undefined && this.pageStack !== null) { 1144 this.pageStack.disableAnimation(false); 1145 } 1146 }) 1147 Button('setHomeWidthRange(20, 80)', { stateEffect: true, type: ButtonType.Capsule}) 1148 .width('50%') 1149 .height(40) 1150 .margin(20) 1151 .onClick(() => { 1152 if (this.pageStack !== undefined && this.pageStack !== null) { 1153 this.pageStack.setHomeWidthRange(20, 80); 1154 } 1155 }) 1156 Button('setHomeWidthRange(-1, 20)', { stateEffect: true, type: ButtonType.Capsule}) 1157 .width('50%') 1158 .height(40) 1159 .margin(20) 1160 .onClick(() => { 1161 if (this.pageStack !== undefined && this.pageStack !== null) { 1162 this.pageStack.setHomeWidthRange(-1, 20); 1163 } 1164 }) 1165 Button('setHomeWidthRange(20, 120)', { 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 this.pageStack.setHomeWidthRange(20, 120); 1172 } 1173 }) 1174 } 1175 .width('100%') 1176 } 1177 .width('100%') 1178 .height('92%') 1179 } 1180 }.hideTitleBar(true) 1181 } 1182 } 1183 1184 log(): boolean { 1185 hilog.info(0x0000, 'demotest', 'PageDetail1 build called'); 1186 return true; 1187 } 1188} 1189``` 1190<!--code_no_check--> 1191```typescript 1192// pages/PageDetail2.ets: 详情页 1193import { MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation'; 1194import { hilog } from '@kit.PerformanceAnalysisKit'; 1195 1196@Component 1197export struct PageDetail2 { 1198 @State message: string = 'PageDetail2'; 1199 @Consume('pageStack') pageStack: MultiNavPathStack; 1200 controller: TextInputController = new TextInputController() 1201 text: String = ''; 1202 param: Object = new Object(); 1203 1204 build() { 1205 if (this.log()) { 1206 NavDestination() { 1207 Column() { 1208 Column() { 1209 Text(this.message) 1210 .fontSize(40) 1211 .fontWeight(FontWeight.Bold) 1212 } 1213 .width('100%') 1214 .height('8%') 1215 Scroll(){ 1216 Column() { 1217 Button('OpenHome', { stateEffect: true, type: ButtonType.Capsule}) 1218 .width('50%') 1219 .height(40) 1220 .margin(20) 1221 .onClick(() => { 1222 if (this.pageStack !== undefined && this.pageStack !== null) { 1223 this.pageStack.pushPathByName('PageHome1', 'testParam', true, SplitPolicy.HOME_PAGE); 1224 } 1225 }) 1226 Button('OpenDetail', { stateEffect: true, type: ButtonType.Capsule}) 1227 .width('50%') 1228 .height(40) 1229 .margin(20) 1230 .onClick(() => { 1231 if (this.pageStack !== undefined && this.pageStack !== null) { 1232 this.pageStack.pushPathByName('PageDetail1', 'testParam'); 1233 } 1234 }) 1235 Button('OpenFull', { stateEffect: true, type: ButtonType.Capsule}) 1236 .width('50%') 1237 .height(40) 1238 .margin(20) 1239 .onClick(() => { 1240 if (this.pageStack !== undefined && this.pageStack !== null) { 1241 this.pageStack.pushPathByName('PageFull1', 'testParam', true, SplitPolicy.FULL_PAGE); 1242 } 1243 }) 1244 Button('ReplaceDetail', { stateEffect: true, type: ButtonType.Capsule}) 1245 .width('50%') 1246 .height(40) 1247 .margin(20) 1248 .onClick(() => { 1249 if (this.pageStack !== undefined && this.pageStack !== null) { 1250 this.pageStack.replacePathByName('PageDetail2', 'testParam'); 1251 } 1252 }) 1253 TextInput({placeholder: 'input your poptoindex ...', controller: this.controller }) 1254 .placeholderColor(Color.Grey) 1255 .placeholderFont({ size: 14, weight: 400 }) 1256 .caretColor(Color.Blue) 1257 .type(InputType.Number) 1258 .width('50%') 1259 .height(40) 1260 .margin(20) 1261 .fontSize(14) 1262 .fontColor(Color.Black) 1263 .onChange((value: String) => { 1264 this.text = value 1265 }) 1266 Button('moveIndexToTop', { stateEffect: true, type: ButtonType.Capsule}) 1267 .width('50%') 1268 .height(40) 1269 .margin(20) 1270 .onClick(() => { 1271 if (this.pageStack !== undefined && this.pageStack !== null) { 1272 this.pageStack.moveIndexToTop(Number(this.text)); 1273 this.controller.caretPosition(1) 1274 } 1275 }) 1276 Button('pop', { stateEffect: true, type: ButtonType.Capsule}) 1277 .width('50%') 1278 .height(40) 1279 .margin(20) 1280 .onClick(() => { 1281 if (this.pageStack !== undefined && this.pageStack !== null) { 1282 this.pageStack.pop(); 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('poptoindex', { 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 this.pageStack.popToIndex(Number(this.text)); 1305 this.controller.caretPosition(1) 1306 } 1307 }) 1308 Button('clear', { stateEffect: true, type: ButtonType.Capsule}) 1309 .width('50%') 1310 .height(40) 1311 .margin(20) 1312 .onClick(() => { 1313 if (this.pageStack !== undefined && this.pageStack !== null) { 1314 this.pageStack.clear(); 1315 } 1316 }) 1317 Button('disableAnimation', { stateEffect: true, type: ButtonType.Capsule}) 1318 .width('50%') 1319 .height(40) 1320 .margin(20) 1321 .onClick(() => { 1322 if (this.pageStack !== undefined && this.pageStack !== null) { 1323 this.pageStack.disableAnimation(true); 1324 } 1325 }) 1326 Button('enableAnimation', { stateEffect: true, type: ButtonType.Capsule}) 1327 .width('50%') 1328 .height(40) 1329 .margin(20) 1330 .onClick(() => { 1331 if (this.pageStack !== undefined && this.pageStack !== null) { 1332 this.pageStack.disableAnimation(false); 1333 } 1334 }) 1335 } 1336 .width('100%') 1337 } 1338 .width('100%') 1339 .height('92%') 1340 } 1341 } 1342 .hideTitleBar(true) 1343 } 1344 } 1345 1346 log(): boolean { 1347 hilog.info(0x0000, 'demotest', 'PageDetail2 build called'); 1348 return true; 1349 } 1350} 1351``` 1352<!--code_no_check--> 1353```typescript 1354// pages/PageFull1.ets: 不参与分栏的页面，默认全屏展示 1355import { MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation'; 1356import { hilog } from '@kit.PerformanceAnalysisKit'; 1357 1358@Component 1359export struct PageFull1 { 1360 @State message: string = 'PageFull1'; 1361 @Consume('pageStack') pageStack: MultiNavPathStack; 1362 controller: TextInputController = new TextInputController() 1363 text: String = ''; 1364 1365 build() { 1366 if (this.log()) { 1367 NavDestination() { 1368 Column() { 1369 Column() { 1370 Text(this.message) 1371 .fontSize(40) 1372 .fontWeight(FontWeight.Bold) 1373 } 1374 .width('100%') 1375 .height('8%') 1376 1377 Scroll() { 1378 Column() { 1379 Button('OpenHome', { stateEffect: true, type: ButtonType.Capsule }) 1380 .width('50%') 1381 .height(40) 1382 .margin(20) 1383 .onClick(() => { 1384 if (this.pageStack !== undefined && this.pageStack !== null) { 1385 this.pageStack.pushPathByName('PageHome1', 'testParam', true, SplitPolicy.HOME_PAGE); 1386 } 1387 }) 1388 Button('OpenDetail', { stateEffect: true, type: ButtonType.Capsule }) 1389 .width('50%') 1390 .height(40) 1391 .margin(20) 1392 .onClick(() => { 1393 if (this.pageStack !== undefined && this.pageStack !== null) { 1394 this.pageStack.pushPathByName('PageDetail1', 'testParam'); 1395 } 1396 }) 1397 Button('OpenFull', { stateEffect: true, type: ButtonType.Capsule }) 1398 .width('50%') 1399 .height(40) 1400 .margin(20) 1401 .onClick(() => { 1402 if (this.pageStack !== undefined && this.pageStack !== null) { 1403 this.pageStack.pushPathByName('PageFull1', 'testParam', true, SplitPolicy.FULL_PAGE); 1404 } 1405 }) 1406 Button('ReplaceFULL', { stateEffect: true, type: ButtonType.Capsule }) 1407 .width('50%') 1408 .height(40) 1409 .margin(20) 1410 .onClick(() => { 1411 if (this.pageStack !== undefined && this.pageStack !== null) { 1412 this.pageStack.replacePathByName('PageFull1', 'testParam', true); 1413 } 1414 }) 1415 Button('removeByName PageFull1', { stateEffect: true, type: ButtonType.Capsule }) 1416 .width('50%') 1417 .height(40) 1418 .margin(20) 1419 .onClick(() => { 1420 if (this.pageStack !== undefined && this.pageStack !== null) { 1421 this.pageStack.removeByName('PageFull1'); 1422 } 1423 }) 1424 Button('removeByIndexes 0135', { stateEffect: true, type: ButtonType.Capsule }) 1425 .width('50%') 1426 .height(40) 1427 .margin(20) 1428 .onClick(() => { 1429 if (this.pageStack !== undefined && this.pageStack !== null) { 1430 this.pageStack.removeByIndexes([0, 1, 3, 5]); 1431 } 1432 }) 1433 Button('pop', { stateEffect: true, type: ButtonType.Capsule }) 1434 .width('50%') 1435 .height(40) 1436 .margin(20) 1437 .onClick(() => { 1438 if (this.pageStack !== undefined && this.pageStack !== null) { 1439 this.pageStack.pop(); 1440 } 1441 }) 1442 TextInput({ placeholder: 'input your poptoindex ...', controller: this.controller }) 1443 .placeholderColor(Color.Grey) 1444 .placeholderFont({ size: 14, weight: 400 }) 1445 .caretColor(Color.Blue) 1446 .width('50%') 1447 .height(40) 1448 .margin(20) 1449 .type(InputType.Number) 1450 .fontSize(14) 1451 .fontColor(Color.Black) 1452 .onChange((value: String) => { 1453 this.text = value 1454 }) 1455 Button('poptoindex', { stateEffect: true, type: ButtonType.Capsule }) 1456 .width('50%') 1457 .height(40) 1458 .margin(20) 1459 .onClick(() => { 1460 if (this.pageStack !== undefined && this.pageStack !== null) { 1461 this.pageStack.popToIndex(Number(this.text)); 1462 this.controller.caretPosition(1) 1463 } 1464 }) 1465 } 1466 .width('100%') 1467 } 1468 .width('100%') 1469 .height('92%') 1470 } 1471 } 1472 .hideTitleBar(true) 1473 .onBackPressed(() => { 1474 hilog.info(0x0000, 'demotest', 'PageFull1 onBackPressed: '); 1475 return false; 1476 }) 1477 } 1478 } 1479 1480 log(): boolean { 1481 hilog.info(0x0000, 'demotest', 'PageFull1 build called'); 1482 return true; 1483 } 1484} 1485``` 1486<!--code_no_check--> 1487```typescript 1488// pages/PagePlaceholder.ets: 占位页 1489import { MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation'; 1490import { hilog } from '@kit.PerformanceAnalysisKit'; 1491 1492@Component 1493export struct PagePlaceholder { 1494 @State message: string = 'PagePlaceholder'; 1495 @Consume('pageStack') pageStack: MultiNavPathStack; 1496 controller: TextInputController = new TextInputController() 1497 text: String = ''; 1498 lastBackTime: number = 0; 1499 1500 build() { 1501 if (this.log()) { 1502 NavDestination() { 1503 Column() { 1504 Column() { 1505 Text(this.message) 1506 .fontSize(50) 1507 .fontWeight(FontWeight.Bold) 1508 } 1509 .width('100%') 1510 .height('8%') 1511 1512 Stack({alignContent: Alignment.Center}) { 1513 Text('Placeholder示例页面') 1514 .fontSize(80) 1515 .fontWeight(FontWeight.Bold) 1516 .fontColor(Color.Red) 1517 } 1518 .width('100%') 1519 .height('92%') 1520 } 1521 }.hideTitleBar(true) 1522 } 1523 } 1524 1525 log(): boolean { 1526 hilog.info(0x0000, 'demotest', 'PagePlaceholder build called'); 1527 return true; 1528 } 1529} 1530```