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