1# MultiNavigation 2 3MultiNavigation用于在大尺寸设备上分栏显示、进行路由跳转。 4 5> **说明：** 6> 7> 该组件从API version 14开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> 由于MultiNavigation存在多重栈嵌套，调用本文档明确说明的不支持接口或不在本文档支持接口列表中的接口(例如getParent、setInterception、pushDestination等)，可能会发生无法预期的问题。 10> 11> MultiNavigation在深层嵌套场景下，可能存在路由动效异常的问题。 12 13## 导入模块 14 15``` 16import { MultiNavigation, MultiNavPathStack, SplitPolicy } from '@kit.ArkUI'; 17``` 18 19## 子组件 20 21不可以包含子组件。 22 23## MultiNavigation 24 25MultiNavigation({navDestination: navDestination, multiStack: MultiNavPathStack, onNavigationModeChange?: OnNavigationModeChangeCallback, onHomeShowOnTop?: OnHomeShowOnTopCallback}) 26 27创建并初始化MultiNavigation组件。 28 29MultiNavigation组件遵循默认的左起右清栈规则，这意味着从左侧主页点击时，会触发详情页的加载并同时清除右侧所有其他详情页，确保右侧仅展示最新加载的详情页。然而，若在右侧的详情页上再次执行详情页加载操作，系统将不会执行清栈动作。 30 31**装饰器类型：**@Component 32 33**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 34 35**系统能力：** SystemCapability.ArkUI.ArkUI.Full 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 | 否 | 是否支持转场动画。<br/>默认值：true<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 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 | 否 | 是否支持转场动画。<br/>默认值：true<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 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 | 否 | 是否支持转场动画。<br/>默认值：true<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 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 | 否 | 是否支持转场动画。<br/>默认值：true<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 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 | 否 | 是否支持转场动画。<br/>默认值：true<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 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页面的索引值数组。<br/>number类型的取值范围：[0, +∞) | 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 | 否 | 是否支持转场动画。<br/>默认值：true<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 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 | 否 | 是否支持转场动画。<br/>默认值：true<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 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 | 否 | 是否支持转场动画。<br/>默认值：true<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 296 297**返回值：** 298 299| 类型 | 说明 | 300| ------ | ---------------------------------------- | 301| number | 如果栈中存在名为name的NavDestination页面，则返回由栈底开始第一个名为name的NavDestination页面的索引，否则返回-1。<br/>取值范围：[-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 | 否 | 是否支持转场动画。<br/>默认值：true<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 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页面的位置索引。<br/>取值范围：[0, +∞) | 342| animated | boolean | 否 | 是否支持转场动画。<br/>默认值：true<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 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 | 否 | 是否支持转场动画。<br/>默认值：true<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 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 | 否 | 是否支持转场动画。<br/>默认值：true<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 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页面的位置索引。<br/>取值范围：[0, +∞) | 428| animated | boolean | 否 | 是否支持转场动画。<br/>默认值：true<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 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 | 否 | 是否支持转场动画。<br/>默认值：true<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 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页面的位置索引。<br/>取值范围：[0, +∞) | 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页面的位置索引。<br/>number类型的取值范围：[0, +∞) | 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 | 返回栈大小。<br/>取值范围：[0, +∞) | 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 | 是 | 是否关闭转场动画。<br/>默认值：false<br/>true：关闭转场动画。<br/>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 | 切换成功或失败。<br/>true：切换成功。<br/>false：切换失败。 | 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 | 是 | 是否保留栈底页面。<br/>默认值：false<br/>true：保留栈底页面。<br/>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<!--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, 对应首页 764import { MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation'; 765import { hilog } from '@kit.PerformanceAnalysisKit'; 766 767@Component 768export struct PageHome1 { 769 @State message: string = 'PageHome1'; 770 @Consume('pageStack') pageStack: MultiNavPathStack; 771 controller: TextInputController = new TextInputController() 772 text: String = ''; 773 index: number = 0; 774 param: Object = new Object(); 775 lastBackTime: number = 0; 776 777 build() { 778 if (this.log()) { 779 NavDestination() { 780 Column() { 781 Column() { 782 Text(this.message) 783 .fontSize(40) 784 .fontWeight(FontWeight.Bold) 785 } 786 .width('100%') 787 .height('8%') 788 Scroll(){ 789 Column() { 790 Button('OpenHome', { stateEffect: true, type: ButtonType.Capsule}) 791 .width('50%') 792 .height(40) 793 .margin(20) 794 .onClick(() => { 795 if (this.pageStack !== undefined && this.pageStack !== null) { 796 this.pageStack.pushPathByName('PageHome1', 'testParam', true, SplitPolicy.HOME_PAGE); 797 this.index++; 798 } 799 }) 800 Button('OpenDetail', { stateEffect: true, type: ButtonType.Capsule}) 801 .width('50%') 802 .height(40) 803 .margin(20) 804 .onClick(() => { 805 if (this.pageStack !== undefined && this.pageStack !== null) { 806 this.pageStack.pushPathByName('PageDetail1', 'testParam'); 807 this.index++; 808 } 809 }) 810 Button('OpenFull', { stateEffect: true, type: ButtonType.Capsule}) 811 .width('50%') 812 .height(40) 813 .margin(20) 814 .onClick(() => { 815 if (this.pageStack !== undefined && this.pageStack !== null) { 816 this.pageStack.pushPathByName('PageFull1', 'testParam', true, SplitPolicy.FULL_PAGE); 817 } 818 }) 819 TextInput({placeholder: 'input your poptoindex ...', controller: this.controller }) 820 .placeholderColor(Color.Grey) 821 .placeholderFont({ size: 14, weight: 400 }) 822 .caretColor(Color.Blue) 823 .width('50%') 824 .height(40) 825 .margin(20) 826 .type(InputType.Number) 827 .fontSize(14) 828 .fontColor(Color.Black) 829 .onChange((value: String) => { 830 this.text = value 831 }) 832 Button('poptoindex', { stateEffect: true, type: ButtonType.Capsule}) 833 .width('50%') 834 .height(40) 835 .margin(20) 836 .onClick(() => { 837 if (this.pageStack !== undefined && this.pageStack !== null) { 838 this.pageStack.popToIndex(Number(this.text)); 839 this.controller.caretPosition(1) 840 } 841 }) 842 Button('OpenDetailWithName', { stateEffect: true, type: ButtonType.Capsule}) 843 .width('50%') 844 .height(40) 845 .margin(20) 846 .onClick(() => { 847 if (this.pageStack !== undefined && this.pageStack !== null) { 848 this.pageStack.pushPathByName('PageDetail1', 'testParam', undefined, true); 849 } 850 }) 851 Button('pop', { stateEffect: true, type: ButtonType.Capsule}) 852 .width('50%') 853 .height(40) 854 .margin(20) 855 .onClick(() => { 856 if (this.pageStack !== undefined && this.pageStack !== null) { 857 this.pageStack.pop(); 858 } 859 }) 860 Button('moveToTopByName: PageDetail1', { stateEffect: true, type: ButtonType.Capsule}) 861 .width('50%') 862 .height(40) 863 .margin(10) 864 .onClick(() => { 865 if (this.pageStack !== undefined && this.pageStack !== null) { 866 let indexFound = this.pageStack.moveToTop('PageDetail1'); 867 hilog.info(0x0000, 'demoTest', 'moveToTopByName,indexFound:' + indexFound); 868 } 869 }) 870 Button('removeByName HOME', { stateEffect: true, type: ButtonType.Capsule}) 871 .width('50%') 872 .height(40) 873 .margin(20) 874 .onClick(() => { 875 if (this.pageStack !== undefined && this.pageStack !== null) { 876 this.pageStack.removeByName('PageHome1'); 877 } 878 }) 879 Button('removeByIndexes 0135', { stateEffect: true, type: ButtonType.Capsule}) 880 .width('50%') 881 .height(40) 882 .margin(20) 883 .onClick(() => { 884 if (this.pageStack !== undefined && this.pageStack !== null) { 885 this.pageStack.removeByIndexes([0,1,3,5]); 886 } 887 }) 888 Button('getAllPathName', { stateEffect: true, type: ButtonType.Capsule}) 889 .width('50%') 890 .height(40) 891 .margin(20) 892 .onClick(() => { 893 if (this.pageStack !== undefined && this.pageStack !== null) { 894 let result = this.pageStack.getAllPathName(); 895 hilog.info(0x0000, 'demotest', 'getAllPathName: ' + result.toString()); 896 } 897 }) 898 Button('getParamByIndex0', { stateEffect: true, type: ButtonType.Capsule}) 899 .width('50%') 900 .height(40) 901 .margin(20) 902 .onClick(() => { 903 if (this.pageStack !== undefined && this.pageStack !== null) { 904 let result = this.pageStack.getParamByIndex(0); 905 hilog.info(0x0000, 'demotest', 'getParamByIndex: ' + result); 906 } 907 }) 908 Button('getParamByNameHomePage', { stateEffect: true, type: ButtonType.Capsule}) 909 .width('50%') 910 .height(40) 911 .margin(20) 912 .onClick(() => { 913 if (this.pageStack !== undefined && this.pageStack !== null) { 914 let result = this.pageStack.getParamByName('PageHome1'); 915 hilog.info(0x0000, 'demotest', 'getParamByName: ' + result.toString()); 916 } 917 }) 918 Button('getIndexByNameHomePage', { stateEffect: true, type: ButtonType.Capsule}) 919 .width('50%') 920 .height(40) 921 .margin(20) 922 .onClick(() => { 923 if (this.pageStack !== undefined && this.pageStack !== null) { 924 let result = this.pageStack.getIndexByName('PageHome1'); 925 hilog.info(0x0000, 'demotest', 'getIndexByName: ' + result); 926 } 927 }) 928 Button('keepBottomPage True', { stateEffect: true, type: ButtonType.Capsule}) 929 .width('50%') 930 .height(40) 931 .margin(10) 932 .onClick(() => { 933 if (this.pageStack !== undefined && this.pageStack !== null) { 934 this.pageStack.keepBottomPage(true); 935 } 936 }) 937 Button('keepBottomPage False', { stateEffect: true, type: ButtonType.Capsule}) 938 .width('50%') 939 .height(40) 940 .margin(10) 941 .onClick(() => { 942 if (this.pageStack !== undefined && this.pageStack !== null) { 943 this.pageStack.keepBottomPage(false); 944 } 945 }) 946 Button('setPlaceholderPage', { stateEffect: true, type: ButtonType.Capsule}) 947 .width('50%') 948 .height(40) 949 .margin(10) 950 .onClick(() => { 951 if (this.pageStack !== undefined && this.pageStack !== null) { 952 this.pageStack.setPlaceholderPage({ name: 'PagePlaceholder' }); 953 } 954 }) 955 }.backgroundColor(0xFFFFFF).width('100%').padding(10).borderRadius(15) 956 } 957 .width('100%') 958 } 959 .width('100%') 960 .height('92%') 961 }.hideTitleBar(true) 962 } 963 } 964 965 log(): boolean { 966 hilog.info(0x0000, 'demotest', 'PageHome1 build called'); 967 return true; 968 } 969} 970``` 971<!--code_no_check--> 972```typescript 973// pages/PageDetail1.ets：详情页 974import { MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation'; 975import { hilog } from '@kit.PerformanceAnalysisKit'; 976 977@Component 978export struct PageDetail1 { 979 @State message: string = 'PageDetail1'; 980 @Consume('pageStack') pageStack: MultiNavPathStack; 981 controller: TextInputController = new TextInputController() 982 text: String = ''; 983 param: Object = new Object(); 984 985 build() { 986 if (this.log()) { 987 NavDestination() { 988 Column() { 989 Column() { 990 Text(this.message) 991 .fontSize(40) 992 .fontWeight(FontWeight.Bold) 993 } 994 .height('8%') 995 .width('100%') 996 Scroll(){ 997 Column(){ 998 Button('OpenHome', { stateEffect: true, type: ButtonType.Capsule}) 999 .width('50%') 1000 .height(40) 1001 .margin(20) 1002 .onClick(() => { 1003 if (this.pageStack !== undefined && this.pageStack !== null) { 1004 this.pageStack.pushPathByName('PageHome1', 'testParam', true, SplitPolicy.HOME_PAGE); 1005 } 1006 }) 1007 Button('OpenDetail', { stateEffect: true, type: ButtonType.Capsule}) 1008 .width('50%') 1009 .height(40) 1010 .margin(20) 1011 .onClick(() => { 1012 if (this.pageStack !== undefined && this.pageStack !== null) { 1013 this.pageStack.pushPathByName('PageDetail1', 'testParam'); 1014 } 1015 }) 1016 Button('OpenFull', { stateEffect: true, type: ButtonType.Capsule}) 1017 .width('50%') 1018 .height(40) 1019 .margin(20) 1020 .onClick(() => { 1021 if (this.pageStack !== undefined && this.pageStack !== null) { 1022 this.pageStack.pushPathByName('PageFull1', 'testParam', true, SplitPolicy.FULL_PAGE); 1023 } 1024 }) 1025 Button('ReplaceDetail', { stateEffect: true, type: ButtonType.Capsule}) 1026 .width('50%') 1027 .height(40) 1028 .margin(20) 1029 .onClick(() => { 1030 if (this.pageStack !== undefined && this.pageStack !== null) { 1031 this.pageStack.replacePathByName('PageDetail2', 'testParam'); 1032 } 1033 }) 1034 Button('removeByName PageDetail1', { stateEffect: true, type: ButtonType.Capsule}) 1035 .width('50%') 1036 .height(40) 1037 .margin(20) 1038 .onClick(() => { 1039 if (this.pageStack !== undefined && this.pageStack !== null) { 1040 this.pageStack.removeByName('PageDetail1'); 1041 } 1042 }) 1043 Button('removeByIndexes 0135', { stateEffect: true, type: ButtonType.Capsule}) 1044 .width('50%') 1045 .height(40) 1046 .margin(20) 1047 .onClick(() => { 1048 if (this.pageStack !== undefined && this.pageStack !== null) { 1049 this.pageStack.removeByIndexes([0,1,3,5]); 1050 } 1051 }) 1052 Button('switchFullScreenState true', { stateEffect: true, type: ButtonType.Capsule}) 1053 .width('50%') 1054 .height(40) 1055 .margin(20) 1056 .onClick(() => { 1057 if (this.pageStack !== undefined && this.pageStack !== null) { 1058 this.pageStack.switchFullScreenState(true); 1059 } 1060 }) 1061 Button('switchFullScreenState false', { stateEffect: true, type: ButtonType.Capsule}) 1062 .width('50%') 1063 .height(40) 1064 .margin(20) 1065 .onClick(() => { 1066 if (this.pageStack !== undefined && this.pageStack !== null) { 1067 this.pageStack.switchFullScreenState(false); 1068 } 1069 }) 1070 Button('pop', { stateEffect: true, type: ButtonType.Capsule}) 1071 .width('50%') 1072 .height(40) 1073 .margin(20) 1074 .onClick(() => { 1075 if (this.pageStack !== undefined && this.pageStack !== null) { 1076 this.pageStack.pop('123'); 1077 } 1078 }) 1079 Button('popToHome1', { stateEffect: true, type: ButtonType.Capsule}) 1080 .width('50%') 1081 .height(40) 1082 .margin(20) 1083 .onClick(() => { 1084 if (this.pageStack !== undefined && this.pageStack !== null) { 1085 this.pageStack.popToName('PageHome1'); 1086 } 1087 }) 1088 TextInput({placeholder: 'input your poptoindex ...', controller: this.controller }) 1089 .placeholderColor(Color.Grey) 1090 .placeholderFont({ size: 14, weight: 400 }) 1091 .caretColor(Color.Blue) 1092 .type(InputType.Number) 1093 .width('50%') 1094 .height(40) 1095 .margin(20) 1096 .fontSize(14) 1097 .fontColor(Color.Black) 1098 .onChange((value: String) => { 1099 this.text = value 1100 }) 1101 Button('poptoindex', { stateEffect: true, type: ButtonType.Capsule}) 1102 .width('50%') 1103 .height(40) 1104 .margin(20) 1105 .onClick(() => { 1106 if (this.pageStack !== undefined && this.pageStack !== null) { 1107 this.pageStack.popToIndex(Number(this.text)); 1108 this.controller.caretPosition(1) 1109 } 1110 }) 1111 Button('moveIndexToTop', { stateEffect: true, type: ButtonType.Capsule}) 1112 .width('50%') 1113 .height(40) 1114 .margin(20) 1115 .onClick(() => { 1116 if (this.pageStack !== undefined && this.pageStack !== null) { 1117 this.pageStack.moveIndexToTop(Number(this.text)); 1118 this.controller.caretPosition(1) 1119 } 1120 }) 1121 Button('clear', { stateEffect: true, type: ButtonType.Capsule}) 1122 .width('50%') 1123 .height(40) 1124 .margin(20) 1125 .onClick(() => { 1126 if (this.pageStack !== undefined && this.pageStack !== null) { 1127 this.pageStack.clear(); 1128 } 1129 }) 1130 Button('disableAnimation', { stateEffect: true, type: ButtonType.Capsule}) 1131 .width('50%') 1132 .height(40) 1133 .margin(20) 1134 .onClick(() => { 1135 if (this.pageStack !== undefined && this.pageStack !== null) { 1136 this.pageStack.disableAnimation(true); 1137 } 1138 }) 1139 Button('enableAnimation', { stateEffect: true, type: ButtonType.Capsule}) 1140 .width('50%') 1141 .height(40) 1142 .margin(20) 1143 .onClick(() => { 1144 if (this.pageStack !== undefined && this.pageStack !== null) { 1145 this.pageStack.disableAnimation(false); 1146 } 1147 }) 1148 Button('setHomeWidthRange(20, 80)', { stateEffect: true, type: ButtonType.Capsule}) 1149 .width('50%') 1150 .height(40) 1151 .margin(20) 1152 .onClick(() => { 1153 if (this.pageStack !== undefined && this.pageStack !== null) { 1154 this.pageStack.setHomeWidthRange(20, 80); 1155 } 1156 }) 1157 Button('setHomeWidthRange(-1, 20)', { stateEffect: true, type: ButtonType.Capsule}) 1158 .width('50%') 1159 .height(40) 1160 .margin(20) 1161 .onClick(() => { 1162 if (this.pageStack !== undefined && this.pageStack !== null) { 1163 this.pageStack.setHomeWidthRange(-1, 20); 1164 } 1165 }) 1166 Button('setHomeWidthRange(20, 120)', { stateEffect: true, type: ButtonType.Capsule}) 1167 .width('50%') 1168 .height(40) 1169 .margin(20) 1170 .onClick(() => { 1171 if (this.pageStack !== undefined && this.pageStack !== null) { 1172 this.pageStack.setHomeWidthRange(20, 120); 1173 } 1174 }) 1175 } 1176 .width('100%') 1177 } 1178 .width('100%') 1179 .height('92%') 1180 } 1181 }.hideTitleBar(true) 1182 } 1183 } 1184 1185 log(): boolean { 1186 hilog.info(0x0000, 'demotest', 'PageDetail1 build called'); 1187 return true; 1188 } 1189} 1190``` 1191<!--code_no_check--> 1192```typescript 1193// pages/PageDetail2.ets: 详情页 1194import { MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation'; 1195import { hilog } from '@kit.PerformanceAnalysisKit'; 1196 1197@Component 1198export struct PageDetail2 { 1199 @State message: string = 'PageDetail2'; 1200 @Consume('pageStack') pageStack: MultiNavPathStack; 1201 controller: TextInputController = new TextInputController() 1202 text: String = ''; 1203 param: Object = new Object(); 1204 1205 build() { 1206 if (this.log()) { 1207 NavDestination() { 1208 Column() { 1209 Column() { 1210 Text(this.message) 1211 .fontSize(40) 1212 .fontWeight(FontWeight.Bold) 1213 } 1214 .width('100%') 1215 .height('8%') 1216 Scroll(){ 1217 Column() { 1218 Button('OpenHome', { stateEffect: true, type: ButtonType.Capsule}) 1219 .width('50%') 1220 .height(40) 1221 .margin(20) 1222 .onClick(() => { 1223 if (this.pageStack !== undefined && this.pageStack !== null) { 1224 this.pageStack.pushPathByName('PageHome1', 'testParam', true, SplitPolicy.HOME_PAGE); 1225 } 1226 }) 1227 Button('OpenDetail', { stateEffect: true, type: ButtonType.Capsule}) 1228 .width('50%') 1229 .height(40) 1230 .margin(20) 1231 .onClick(() => { 1232 if (this.pageStack !== undefined && this.pageStack !== null) { 1233 this.pageStack.pushPathByName('PageDetail1', 'testParam'); 1234 } 1235 }) 1236 Button('OpenFull', { stateEffect: true, type: ButtonType.Capsule}) 1237 .width('50%') 1238 .height(40) 1239 .margin(20) 1240 .onClick(() => { 1241 if (this.pageStack !== undefined && this.pageStack !== null) { 1242 this.pageStack.pushPathByName('PageFull1', 'testParam', true, SplitPolicy.FULL_PAGE); 1243 } 1244 }) 1245 Button('ReplaceDetail', { stateEffect: true, type: ButtonType.Capsule}) 1246 .width('50%') 1247 .height(40) 1248 .margin(20) 1249 .onClick(() => { 1250 if (this.pageStack !== undefined && this.pageStack !== null) { 1251 this.pageStack.replacePathByName('PageDetail2', 'testParam'); 1252 } 1253 }) 1254 TextInput({placeholder: 'input your poptoindex ...', controller: this.controller }) 1255 .placeholderColor(Color.Grey) 1256 .placeholderFont({ size: 14, weight: 400 }) 1257 .caretColor(Color.Blue) 1258 .type(InputType.Number) 1259 .width('50%') 1260 .height(40) 1261 .margin(20) 1262 .fontSize(14) 1263 .fontColor(Color.Black) 1264 .onChange((value: String) => { 1265 this.text = value 1266 }) 1267 Button('moveIndexToTop', { stateEffect: true, type: ButtonType.Capsule}) 1268 .width('50%') 1269 .height(40) 1270 .margin(20) 1271 .onClick(() => { 1272 if (this.pageStack !== undefined && this.pageStack !== null) { 1273 this.pageStack.moveIndexToTop(Number(this.text)); 1274 this.controller.caretPosition(1) 1275 } 1276 }) 1277 Button('pop', { stateEffect: true, type: ButtonType.Capsule}) 1278 .width('50%') 1279 .height(40) 1280 .margin(20) 1281 .onClick(() => { 1282 if (this.pageStack !== undefined && this.pageStack !== null) { 1283 this.pageStack.pop(); 1284 } 1285 }) 1286 TextInput({placeholder: 'input your poptoindex ...', controller: this.controller }) 1287 .placeholderColor(Color.Grey) 1288 .placeholderFont({ size: 14, weight: 400 }) 1289 .caretColor(Color.Blue) 1290 .type(InputType.Number) 1291 .width('50%') 1292 .height(40) 1293 .margin(20) 1294 .fontSize(14) 1295 .fontColor(Color.Black) 1296 .onChange((value: String) => { 1297 this.text = value 1298 }) 1299 Button('poptoindex', { stateEffect: true, type: ButtonType.Capsule}) 1300 .width('50%') 1301 .height(40) 1302 .margin(20) 1303 .onClick(() => { 1304 if (this.pageStack !== undefined && this.pageStack !== null) { 1305 this.pageStack.popToIndex(Number(this.text)); 1306 this.controller.caretPosition(1) 1307 } 1308 }) 1309 Button('clear', { stateEffect: true, type: ButtonType.Capsule}) 1310 .width('50%') 1311 .height(40) 1312 .margin(20) 1313 .onClick(() => { 1314 if (this.pageStack !== undefined && this.pageStack !== null) { 1315 this.pageStack.clear(); 1316 } 1317 }) 1318 Button('disableAnimation', { stateEffect: true, type: ButtonType.Capsule}) 1319 .width('50%') 1320 .height(40) 1321 .margin(20) 1322 .onClick(() => { 1323 if (this.pageStack !== undefined && this.pageStack !== null) { 1324 this.pageStack.disableAnimation(true); 1325 } 1326 }) 1327 Button('enableAnimation', { stateEffect: true, type: ButtonType.Capsule}) 1328 .width('50%') 1329 .height(40) 1330 .margin(20) 1331 .onClick(() => { 1332 if (this.pageStack !== undefined && this.pageStack !== null) { 1333 this.pageStack.disableAnimation(false); 1334 } 1335 }) 1336 } 1337 .width('100%') 1338 } 1339 .width('100%') 1340 .height('92%') 1341 } 1342 } 1343 .hideTitleBar(true) 1344 } 1345 } 1346 1347 log(): boolean { 1348 hilog.info(0x0000, 'demotest', 'PageDetail2 build called'); 1349 return true; 1350 } 1351} 1352``` 1353<!--code_no_check--> 1354```typescript 1355// pages/PageFull1.ets: 不参与分栏的页面，默认全屏展示 1356import { MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation'; 1357import { hilog } from '@kit.PerformanceAnalysisKit'; 1358 1359@Component 1360export struct PageFull1 { 1361 @State message: string = 'PageFull1'; 1362 @Consume('pageStack') pageStack: MultiNavPathStack; 1363 controller: TextInputController = new TextInputController() 1364 text: String = ''; 1365 1366 build() { 1367 if (this.log()) { 1368 NavDestination() { 1369 Column() { 1370 Column() { 1371 Text(this.message) 1372 .fontSize(40) 1373 .fontWeight(FontWeight.Bold) 1374 } 1375 .width('100%') 1376 .height('8%') 1377 1378 Scroll() { 1379 Column() { 1380 Button('OpenHome', { stateEffect: true, type: ButtonType.Capsule }) 1381 .width('50%') 1382 .height(40) 1383 .margin(20) 1384 .onClick(() => { 1385 if (this.pageStack !== undefined && this.pageStack !== null) { 1386 this.pageStack.pushPathByName('PageHome1', 'testParam', true, SplitPolicy.HOME_PAGE); 1387 } 1388 }) 1389 Button('OpenDetail', { stateEffect: true, type: ButtonType.Capsule }) 1390 .width('50%') 1391 .height(40) 1392 .margin(20) 1393 .onClick(() => { 1394 if (this.pageStack !== undefined && this.pageStack !== null) { 1395 this.pageStack.pushPathByName('PageDetail1', 'testParam'); 1396 } 1397 }) 1398 Button('OpenFull', { stateEffect: true, type: ButtonType.Capsule }) 1399 .width('50%') 1400 .height(40) 1401 .margin(20) 1402 .onClick(() => { 1403 if (this.pageStack !== undefined && this.pageStack !== null) { 1404 this.pageStack.pushPathByName('PageFull1', 'testParam', true, SplitPolicy.FULL_PAGE); 1405 } 1406 }) 1407 Button('ReplaceFULL', { stateEffect: true, type: ButtonType.Capsule }) 1408 .width('50%') 1409 .height(40) 1410 .margin(20) 1411 .onClick(() => { 1412 if (this.pageStack !== undefined && this.pageStack !== null) { 1413 this.pageStack.replacePathByName('PageFull1', 'testParam', true); 1414 } 1415 }) 1416 Button('removeByName PageFull1', { stateEffect: true, type: ButtonType.Capsule }) 1417 .width('50%') 1418 .height(40) 1419 .margin(20) 1420 .onClick(() => { 1421 if (this.pageStack !== undefined && this.pageStack !== null) { 1422 this.pageStack.removeByName('PageFull1'); 1423 } 1424 }) 1425 Button('removeByIndexes 0135', { stateEffect: true, type: ButtonType.Capsule }) 1426 .width('50%') 1427 .height(40) 1428 .margin(20) 1429 .onClick(() => { 1430 if (this.pageStack !== undefined && this.pageStack !== null) { 1431 this.pageStack.removeByIndexes([0, 1, 3, 5]); 1432 } 1433 }) 1434 Button('pop', { stateEffect: true, type: ButtonType.Capsule }) 1435 .width('50%') 1436 .height(40) 1437 .margin(20) 1438 .onClick(() => { 1439 if (this.pageStack !== undefined && this.pageStack !== null) { 1440 this.pageStack.pop(); 1441 } 1442 }) 1443 TextInput({ placeholder: 'input your poptoindex ...', controller: this.controller }) 1444 .placeholderColor(Color.Grey) 1445 .placeholderFont({ size: 14, weight: 400 }) 1446 .caretColor(Color.Blue) 1447 .width('50%') 1448 .height(40) 1449 .margin(20) 1450 .type(InputType.Number) 1451 .fontSize(14) 1452 .fontColor(Color.Black) 1453 .onChange((value: String) => { 1454 this.text = value 1455 }) 1456 Button('poptoindex', { stateEffect: true, type: ButtonType.Capsule }) 1457 .width('50%') 1458 .height(40) 1459 .margin(20) 1460 .onClick(() => { 1461 if (this.pageStack !== undefined && this.pageStack !== null) { 1462 this.pageStack.popToIndex(Number(this.text)); 1463 this.controller.caretPosition(1) 1464 } 1465 }) 1466 } 1467 .width('100%') 1468 } 1469 .width('100%') 1470 .height('92%') 1471 } 1472 } 1473 .hideTitleBar(true) 1474 .onBackPressed(() => { 1475 hilog.info(0x0000, 'demotest', 'PageFull1 onBackPressed: '); 1476 return false; 1477 }) 1478 } 1479 } 1480 1481 log(): boolean { 1482 hilog.info(0x0000, 'demotest', 'PageFull1 build called'); 1483 return true; 1484 } 1485} 1486``` 1487<!--code_no_check--> 1488```typescript 1489// pages/PagePlaceholder.ets: 占位页 1490import { MultiNavPathStack, SplitPolicy } from '@ohos.arkui.advanced.MultiNavigation'; 1491import { hilog } from '@kit.PerformanceAnalysisKit'; 1492 1493@Component 1494export struct PagePlaceholder { 1495 @State message: string = 'PagePlaceholder'; 1496 @Consume('pageStack') pageStack: MultiNavPathStack; 1497 controller: TextInputController = new TextInputController() 1498 text: String = ''; 1499 lastBackTime: number = 0; 1500 1501 build() { 1502 if (this.log()) { 1503 NavDestination() { 1504 Column() { 1505 Column() { 1506 Text(this.message) 1507 .fontSize(50) 1508 .fontWeight(FontWeight.Bold) 1509 } 1510 .width('100%') 1511 .height('8%') 1512 1513 Stack({alignContent: Alignment.Center}) { 1514 Text('Placeholder示例页面') 1515 .fontSize(80) 1516 .fontWeight(FontWeight.Bold) 1517 .fontColor(Color.Red) 1518 } 1519 .width('100%') 1520 .height('92%') 1521 } 1522 }.hideTitleBar(true) 1523 } 1524 } 1525 1526 log(): boolean { 1527 hilog.info(0x0000, 'demotest', 'PagePlaceholder build called'); 1528 return true; 1529 } 1530} 1531```