1# Navigation 2 3Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，其内部默认包含了标题栏、内容区和工具栏，其中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（[NavDestination](ts-basic-components-navdestination.md)的子组件），首页和非首页通过路由进行切换。 4 5> **说明：** 6> 7> - 该组件从API version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> - 该组件从API version 11开始默认支持安全区避让特性(默认值为：expandSafeArea([SafeAreaType.SYSTEM, SafeAreaType.KEYBOARD, SafeAreaType.CUTOUT], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]))，开发者可以重写该属性覆盖默认行为，API version 11之前的版本需配合[expandSafeArea](ts-universal-attributes-expand-safe-area.md)属性实现安全区避让。 10> 11> - [NavBar](#navbar12)嵌套使用Navigation时，内层Navigation的生命周期不和外层Navigation以及[全模态](ts-universal-attributes-modal-transition.md#全屏模态转场)的生命周期进行联动。 12> 13> - Navigation未设置主副标题并且没有返回键时，不显示标题栏。 14 15 16## 子组件 17 18可以包含子组件。 19 20从API version 9开始，推荐与[NavRouter](ts-basic-components-navrouter.md)组件搭配使用。 21 22从API version 10开始，推荐使用[NavPathStack](#navpathstack10)配合[navDestination](#navdestination10)属性进行页面路由。 23 24## 接口 25 26### Navigation 27 28Navigation() 29 30创建路由导航的根视图容器，适用于使用[NavRouter](ts-basic-components-navrouter.md)组件进行页面路由。 31 32**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 33 34**系统能力：** SystemCapability.ArkUI.ArkUI.Full 35 36### Navigation<sup>10+</sup> 37 38Navigation(pathInfos: NavPathStack) 39 40绑定路由栈到Navigation组件，适用于使用[NavPathStack](#navpathstack10)配合[navDestination](#navdestination10)属性进行页面路由。 41 42**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 43 44**系统能力：** SystemCapability.ArkUI.ArkUI.Full 45 46**参数：** 47 48| 参数名 | 类型 | 必填 | 说明 | 49| --------- | ------------------------------- | ---- | ------ | 50| pathInfos | [NavPathStack](#navpathstack10) | 是 | 路由栈信息。 | 51 52## 属性 53 54除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 55 56### title 57 58title(value: ResourceStr | CustomBuilder | NavigationCommonTitle | NavigationCustomTitle, options?: NavigationTitleOptions) 59 60设置页面标题。 61 62**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 63 64**系统能力：** SystemCapability.ArkUI.ArkUI.Full 65 66**参数：** 67 68| 参数名 | 类型 | 必填 | 说明 | 69| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 70| value | [ResourceStr](ts-types.md#resourcestr)<sup>10+</sup> \| [CustomBuilder](ts-types.md#custombuilder8) \| [NavigationCommonTitle](#navigationcommontitle9)<sup>9+</sup> \| [NavigationCustomTitle](#navigationcustomtitle9)<sup>9+</sup> | 是 | 页面标题，使用NavigationCustomTitle类型设置height高度时，[titleMode](#titlemode)属性不会生效。字符串超长时，如果不设置副标题，先缩小再换行（2行）最后截断。如果设置副标题，先缩小最后截断。 | 71| options | [NavigationTitleOptions](#navigationtitleoptions11)<sup>11+</sup> | 否 | 标题栏选项。包含标题栏背景颜色、标题栏背景模糊样式及模糊选项、标题栏背景属性、标题栏布局方式、标题栏起始端内间距、标题栏结束端内间距、主标题属性修改器、子标题属性修改器、是否响应悬停态。 | 72 73### menus 74 75menus(value: Array<NavigationMenuItem> | CustomBuilder) 76 77> **说明：** 78> 79> 不支持通过SymbolGlyphModifier对象的fontSize属性修改图标大小、effectStrategy属性修改动效、symbolEffect属性修改动效类型。 80 81 82设置页面右上角菜单。不设置时不显示菜单项。使用Array<[NavigationMenuItem](#navigationmenuitem)> 写法时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。 83 84**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 85 86**系统能力：** SystemCapability.ArkUI.ArkUI.Full 87 88**参数：** 89 90| 参数名 | 类型 | 必填 | 说明 | 91| ------ | ------------------------------------------------------------ | ---- | ---------------- | 92| value | Array<[NavigationMenuItem](#navigationmenuitem)> \| [CustomBuilder](ts-types.md#custombuilder8) | 是 | 页面右上角菜单。 | 93 94### titleMode 95 96titleMode(value: NavigationTitleMode) 97 98设置页面标题栏显示模式。 99 100**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 101 102**系统能力：** SystemCapability.ArkUI.ArkUI.Full 103 104**参数：** 105 106| 参数名 | 类型 | 必填 | 说明 | 107| ------ | --------------------------------------------------- | ---- | --------------------------------------------------------- | 108| value | [NavigationTitleMode](#navigationtitlemode枚举说明) | 是 | 页面标题栏显示模式。<br/>默认值：NavigationTitleMode.Free | 109 110### toolbarConfiguration<sup>10+</sup> 111 112toolbarConfiguration(value: Array<ToolbarItem> | CustomBuilder, options?: NavigationToolbarOptions) 113 114> **说明：** 115> 116> 不支持通过SymbolGlyphModifier对象的fontSize属性修改图标大小、effectStrategy属性修改动效、symbolEffect属性修改动效类型。 117 118 119设置工具栏内容。不设置时不显示工具栏。 120 121**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 122 123**系统能力：** SystemCapability.ArkUI.ArkUI.Full 124 125**参数：** 126 127| 参数名 | 类型 | 必填 | 说明 | 128| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 129| value | Array<[ToolbarItem](#toolbaritem10)> \| [CustomBuilder](ts-types.md#custombuilder8) | 是 | 工具栏内容，使用Array<[ToolbarItem](#toolbaritem10)>写法设置的工具栏有如下特性：<br/>工具栏所有选项均分底部工具栏，在每个均分内容区布局文本和图标。<br/>文本超长时，若工具栏选项个数小于5个，优先拓展选项的宽度，最大宽度与屏幕等宽，其次逐级缩小，缩小之后换行，最后截断。<br/>竖屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。横屏时，如果为[Split](#navigationmode9枚举说明)模式，仍按照竖屏规则显示，如果为[Stack](#navigationmode9枚举说明)模式需配合menus属性的Array<[NavigationMenuItem](#navigationmenuitem)>使用，底部工具栏会自动隐藏，同时底部工具栏所有选项移动至页面右上角菜单。<br/>使用[CustomBuilder](ts-types.md#custombuilder8)写法为用户自定义工具栏选项，除均分底部工具栏外不具备以上功能。 | 130| options | [NavigationToolbarOptions](#navigationtoolbaroptions11)<sup>11+</sup> | 否 | 工具栏选项。 包含工具栏背景颜色、工具栏背景模糊样式及选项、工具栏背景属性、工具栏布局方式、是否隐藏工具栏的文本、工具栏更多图标的菜单选项。 | 131 132### hideToolBar 133 134hideToolBar(value: boolean) 135 136设置是否隐藏工具栏。 137 138**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 139 140**系统能力：** SystemCapability.ArkUI.ArkUI.Full 141 142**参数：** 143 144| 参数名 | 类型 | 必填 | 说明 | 145| ------ | ------- | ---- | ------------------------------------------------------------ | 146| value | boolean | 是 | 是否隐藏工具栏。<br/>默认值：false。<br/>true：隐藏工具栏。<br/>false：显示工具栏。 | 147 148### hideToolBar<sup>13+</sup> 149 150hideToolBar(hide: boolean, animated: boolean) 151 152设置是否隐藏工具栏。与[hideToolBar](#hidetoolbar)相比，新增工具栏显隐时是否使用动画。 153 154**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 155 156**系统能力：** SystemCapability.ArkUI.ArkUI.Full 157 158**参数：** 159 160| 参数名 | 类型 | 必填 | 说明 | 161| ------ | ------- | ---- | ------------------------------------------------------------ | 162| hide | boolean | 是 | 是否隐藏工具栏。<br/>默认值：false。<br/>true：隐藏工具栏。<br/>false：显示工具栏。 | 163| animated | boolean | 是 | 设置是否使用动画显隐工具栏。<br/>默认值：false。<br/>true：使用动画显示隐藏工具栏。<br/>false：不使用动画显示隐藏工具栏。 | 164 165### hideTitleBar 166 167hideTitleBar(value: boolean) 168 169设置是否隐藏标题栏。 170 171**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 172 173**系统能力：** SystemCapability.ArkUI.ArkUI.Full 174 175**参数：** 176 177| 参数名 | 类型 | 必填 | 说明 | 178| ------ | ------- | ---- | ------------------------------------------------------------ | 179| value | boolean | 是 | 是否隐藏标题栏。<br/>默认值：false。<br/>true：隐藏标题栏。<br/>false：显示标题栏。 | 180 181### hideTitleBar<sup>13+</sup> 182 183hideTitleBar(hide: boolean, animated: boolean) 184 185设置是否隐藏标题栏。与[hideTitleBar](#hidetitlebar)相比，新增标题栏显隐时是否使用动画。 186 187**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 188 189**系统能力：** SystemCapability.ArkUI.ArkUI.Full 190 191**参数：** 192 193| 参数名 | 类型 | 必填 | 说明 | 194| ------ | ------- | ---- | ------------------------------------------------------------ | 195| hide | boolean | 是 | 是否隐藏标题栏。<br/>默认值：false。<br/>true：隐藏标题栏。<br/>false：显示标题栏。 | 196| animated | boolean | 是 | 设置是否使用动画显隐标题栏。<br/>默认值：false。<br/>true：使用动画显示隐藏标题栏。<br/>false：不使用动画显示隐藏标题栏。 | 197 198### hideBackButton 199 200hideBackButton(value: boolean) 201 202设置是否隐藏标题栏中的返回键。返回键仅针对[titleMode](#titlemode)为NavigationTitleMode.Mini时才生效。 203 204**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 205 206**系统能力：** SystemCapability.ArkUI.ArkUI.Full 207 208**参数：** 209 210| 参数名 | 类型 | 必填 | 说明 | 211| ------ | ------- | ---- | ------------------------------------------------------------ | 212| value | boolean | 是 | 是否隐藏标题栏中的返回键。 <br/>默认值：false。<br/>true：隐藏返回键。<br/>false：显示返回键。 | 213 214### navBarWidth<sup>9+</sup> 215 216navBarWidth(value: Length) 217 218设置导航栏宽度。仅在Navigation组件分栏时生效。 219 220从API version 18开始，该参数支持[!!](../../../ui/state-management/arkts-new-binding.md#组件参数双向绑定)双向绑定变量。 221 222**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 223 224**系统能力：** SystemCapability.ArkUI.ArkUI.Full 225 226**参数：** 227 228| 参数名 | 类型 | 必填 | 说明 | 229| ------ | ---------------------------- | ---- | ----------------------------------------- | 230| value | [Length](ts-types.md#length) | 是 | 导航栏宽度。<br/>默认值：240<br/>单位：vp<br/>undefined：行为不做处理，导航栏宽度与默认值保持一致。 | 231 232### navBarPosition<sup>9+</sup> 233 234navBarPosition(value: NavBarPosition) 235 236设置导航栏位置。仅在Navigation组件分栏时生效。 237 238**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 239 240**系统能力：** SystemCapability.ArkUI.ArkUI.Full 241 242**参数：** 243 244| 参数名 | 类型 | 必填 | 说明 | 245| ------ | ------------------------------------------ | ---- | --------------------------------------------- | 246| value | [NavBarPosition](#navbarposition9枚举说明) | 是 | 导航栏位置。<br/>默认值：NavBarPosition.Start | 247 248### mode<sup>9+</sup> 249 250mode(value: NavigationMode) 251 252设置导航栏的显示模式，支持单栏（Stack）、分栏（Split）和自适应（Auto）。 253 254**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 255 256**系统能力：** SystemCapability.ArkUI.ArkUI.Full 257 258**参数：** 259 260| 参数名 | 类型 | 必填 | 说明 | 261| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 262| value | [NavigationMode](#navigationmode9枚举说明) | 是 | 导航栏的显示模式。<br/>默认值：NavigationMode.Auto<br/>自适应：基于组件宽度自适应单栏和双栏。 | 263 264### backButtonIcon<sup>9+</sup> 265 266backButtonIcon(value: string | PixelMap | Resource | SymbolGlyphModifier) 267 268> **说明：** 269> 270> 不支持通过SymbolGlyphModifier对象的fontSize属性修改图标大小、effectStrategy属性修改动效、symbolEffect属性修改动效类型。 271 272 273设置标题栏中返回键图标。 274 275**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 276 277**系统能力：** SystemCapability.ArkUI.ArkUI.Full 278 279**参数：** 280 281| 参数名 | 类型 | 必填 | 说明 | 282| ------ | ------------------------------------------------------------ | ---- | -------------------- | 283| value | string \| [PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) \| [SymbolGlyphModifier<sup>12+</sup>](ts-universal-attributes-attribute-modifier.md) | 是 | 标题栏中返回键图标。 | 284 285### hideNavBar<sup>9+</sup> 286 287hideNavBar(value: boolean) 288 289设置是否隐藏导航栏。设置为true时，隐藏Navigation的导航栏，包括标题栏、内容区和工具栏。如果此时路由栈中存在NavDestination页面，则直接显示栈顶NavDestination页面，反之显示空白。 290 291从API version 9开始到API version 10仅在双栏模式下生效。从API version 11开始在单栏、双栏与自适应模式均生效。 292 293**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 294 295**系统能力：** SystemCapability.ArkUI.ArkUI.Full 296 297**参数：** 298 299| 参数名 | 类型 | 必填 | 说明 | 300| ------ | ------- | ---- | ---------------------------------- | 301| value | boolean | 是 | 是否隐藏导航栏。<br/>默认值：false。 <br/>true：隐藏导航栏。<br/>false：显示导航栏。 | 302 303### navDestination<sup>10+</sup> 304 305navDestination(builder: (name: string, param: unknown) => void) 306 307创建NavDestination组件。使用builder函数，基于name和param构造NavDestination组件。builder下只能有一个根节点。builder中允许在NavDestination组件外包含一层自定义组件， 但自定义组件不允许设置属性和事件，否则仅显示空白。 308 309**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 310 311**系统能力：** SystemCapability.ArkUI.ArkUI.Full 312 313**参数：** 314 315| 参数名 | 类型 | 必填 | 说明 | 316| ------- | -------------------------------------- | ---- | ------------------------ | 317| builder | (name: string, param: unknown) => void | 是 | 创建NavDestination组件。name：NavDestination页面名称。param：开发者设置的NavDestination页面详细参数。 | 318 319### navBarWidthRange<sup>10+</sup> 320 321navBarWidthRange(value: [Dimension, Dimension]) 322 323设置导航栏最小和最大宽度（双栏模式下生效）。 324 325**规则：** 优先级规则详见[minContentWidth](#mincontentwidth10)说明。 326 327**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 328 329**系统能力：** SystemCapability.ArkUI.ArkUI.Full 330 331**参数：** 332 333| 参数名 | 类型 | 必填 | 说明 | 334| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 335| value | [[Dimension](ts-types.md#dimension10), [Dimension](ts-types.md#dimension10)] | 是 | 导航栏最小和最大宽度。<br/>默认值：最小默认值 240，最大默认值为组件宽度的40% ，且不大于 432，如果只设置一个值，则未设置的值按照默认值计算。<br/>单位：vp | 336 337### minContentWidth<sup>10+</sup> 338 339minContentWidth(value: Dimension) 340 341设置导航栏内容区最小宽度（双栏模式下生效）。 342 343**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 344 345**系统能力：** SystemCapability.ArkUI.ArkUI.Full 346 347**参数：** 348 349| 参数名 | 类型 | 必填 | 说明 | 350| ------- | ------------------------------------ | ---- | ------------------------------------------------------------ | 351| value | [Dimension](ts-types.md#dimension10) | 是 | 导航栏内容区最小宽度。<br/>默认值：360<br/>单位：vp<br/>undefined：行为不做处理，导航栏内容区最小宽度与默认值保持一致。<br/>Auto模式断点计算：默认600vp，minNavBarWidth(240vp) + minContentWidth (360vp) | 352 353> **说明：** 354> 355> 优先级规则： 356> 357> 1. 仅设置navBarWidth，不支持Navigation分割线拖拽。 358> 359> 2. navBarWidthRange指定分割线可以拖拽范围。如果不设置值，则按照默认值处理。拖拽范围需要满足navBarWidthRange设置的范围和minContentWidth限制。 360> 361> 3. Navigation显示范围缩小：a. 缩小内容区大小。如果不设置minContentWidth属性，则可以缩小内容区至0， 否则最小缩小至minContentWidth。b. 缩小导航栏大小，缩小时需要满足导航栏宽度大于navBarRange的下限。c. 对显示内容进行裁切。 362 363### ignoreLayoutSafeArea<sup>12+</sup> 364 365ignoreLayoutSafeArea(types?: Array<LayoutSafeAreaType>, edges?: Array<LayoutSafeAreaEdge>) 366 367控制组件的布局，使其扩展到非安全区域 368 369**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 370 371**系统能力：** SystemCapability.ArkUI.ArkUI.Full 372 373**参数：** 374 375| 参数名 | 类型 | 必填 | 说明 | 376| ------ | -------------------------------------------------- | ---- | ------------------------------------------------------------ | 377| types | Array <[LayoutSafeAreaType](ts-types.md#layoutsafeareatype12)> | 否 | 配置扩展安全区域的类型。<br />默认值：<br />[LayoutSafeAreaType.SYSTEM] | 378| edges | Array <[LayoutSafeAreaEdge](ts-types.md#layoutsafeareaedge12)> | 否 | 配置扩展安全区域的方向。<br /> 默认值：<br />[LayoutSafeAreaEdge.TOP, LayoutSafeAreaEdge.BOTTOM]。| 379 380> **说明：** 381> 382> 组件设置ignoreLayoutSafeArea之后生效的条件为： 383> 设置LayoutSafeAreaType.SYSTEM时，组件的边界与非安全区域重合时组件能够延伸到非安全区域下。例如：设备顶部状态栏高度100，组件在屏幕中纵向方位的绝对偏移需要在0到100之间。 384> 385> 若组件延伸到非安全区域内，此时在非安全区域里触发的事件（例如：点击事件）等可能会被系统拦截，优先响应状态栏等系统组件。 386 387### systemBarStyle<sup>12+</sup> 388 389systemBarStyle(style: Optional<SystemBarStyle>) 390 391当Navigation中显示Navigation首页时，设置对应系统状态栏的样式。 392 393**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 394 395**系统能力：** SystemCapability.ArkUI.ArkUI.Full 396 397**参数：** 398 399| 参数名 | 类型 | 必填 | 说明 | 400| ------ | -------------- | ---- | ------------------ | 401| style | [Optional](ts-universal-attributes-custom-property.md#optional12)<[SystemBarStyle](#systembarstyle12)> | 是 | 系统状态栏样式。 | 402 403> **使用说明：** 404> 405> 1. 不建议混合使用systemBarStyle属性和window设置状态栏样式的相关接口，例如：[setWindowSystemBarProperties](../js-apis-window.md#setwindowsystembarproperties9)。 406> 2. 初次设置Navigation/NavDestination的systemBarStyle属性时，会备份当前状态栏样式用于后续的恢复场景。 407> 3. Navigation总是以首页（页面栈内没有NavDestination时）或者栈顶NavDestination设置的状态栏样式为准。 408> 4. Navigation首页或者任何栈顶NavDestination页面，如果设置了有效的systemBarStyle，则会使用设置的样式，反之如果之前已经备份了样式，则使用备份的样式，否则不做任何处理。 409> 5. [Split](#navigationmode9枚举说明)模式下的Navigation，如果内容区没有NavDestination，则遵从Navigation首页的设置，反之则遵从栈顶NavDestination的设置。 410> 6. 仅支持在主窗口的主页面中使用systemBarStyle设置状态栏样式。 411> 7. 仅当Navigation占满整个页面时，设置的样式才会生效，当Navigation没有占满整个页面时，如果有备份的样式，则恢复备份的样式。 412> 8. 当页面设置不同样式时，在页面转场开始时生效。 413> 9. 非全屏窗口下，Navigation/NavDestination设置的状态栏不生效。 414 415### recoverable<sup>14+</sup> 416 417recoverable(recoverable: Optional<boolean>) 418 419配置Navigation是否可恢复。如配置为可恢复，当应用进程异常退出并重新冷启动时，可自动创建该Navigation，并恢复至异常退出时的页面栈。 420 421**系统能力：** SystemCapability.ArkUI.ArkUI.Full 422 423**参数：** 424 425| 参数名 | 类型 | 必填 | 说明 | 426| ------ | -------------- | ---- | ------------------ | 427| recoverable | [Optional](ts-universal-attributes-custom-property.md#optional12)<boolean> | 是 | Navigation是否可恢复，默认为不可恢复。<br/>默认值：false。<br/>true：页面栈可恢复。<br/>false：页面栈不可恢复。| 428 429> **使用说明：** 430> 431> 1. 使用该接口需要先设置Navigation的[id属性](ts-universal-attributes-component-id.md#id)，否则该接口无效。 432> 2. 该接口需要配合NavDestination的[recoverable](./ts-basic-components-navdestination.md#recoverable14)接口使用。 433> 3. 恢复的过程中不可序列化的信息，例如不可序列化的参数与用户设置的onPop等，会被丢弃，无法恢复。 434 435### enableDragBar<sup>14+</sup> 436 437enableDragBar(isEnabled: Optional<boolean>) 438 439控制分栏场景下是否显示拖拽条。 440 441**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 442 443**系统能力：** SystemCapability.ArkUI.ArkUI.Full 444 445**参数：** 446 447| 参数名 | 类型 | 必填 | 说明 | 448| ------ | -------------- | ---- | ------------------ | 449| isEnabled | [Optional](ts-universal-attributes-custom-property.md#optional12)<boolean> | 是 | 是否开启拖拽条，默认为无拖拽条样式。<br/>默认值：false。<br/>true：有拖拽条样式。<br/>false：无拖拽条样式。| 450 451### enableModeChangeAnimation<sup>15+</sup> 452 453enableModeChangeAnimation(isEnabled: Optional<boolean>) 454 455控制是否开启单双栏切换时的动效。 456 457**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 458 459**系统能力：** SystemCapability.ArkUI.ArkUI.Full 460 461**参数：** 462 463| 参数名 | 类型 | 必填 | 说明 | 464| ------ | -------------- | ---- | ------------------ | 465| isEnabled | [Optional](ts-universal-attributes-custom-property.md#optional12)<boolean> | 是 | 是否开启单双栏切换动效。<br/>默认值：true。<br/>true：开启单双栏切换动效。<br/>false：关闭单双栏切换动效。| 466 467### subTitle<sup>(deprecated)</sup> 468 469subTitle(value: string) 470 471设置页面副标题。 472 473从API version 9开始废弃，建议使用[title](#title)代替。 474 475**系统能力：** SystemCapability.ArkUI.ArkUI.Full 476 477**参数：** 478 479| 参数名 | 类型 | 必填 | 说明 | 480| ------ | ------ | ---- | ------------ | 481| value | string | 是 | 页面副标题。 | 482 483### toolBar<sup>(deprecated)</sup> 484 485toolBar(value: object | CustomBuilder) 486 487设置工具栏内容。不设置时不显示工具栏。items均分底部工具栏，在每个均分内容区布局文本和图标，文本超长时，逐级缩小，缩小之后换行，最后截断。 488 489从API version 10开始，该接口不再维护，推荐使用[toolbarConfiguration](#toolbarconfiguration10)代替。 490 491**系统能力：** SystemCapability.ArkUI.ArkUI.Full 492 493**参数：** 494 495| 参数名 | 类型 | 必填 | 说明 | 496| ------ | ------------------------------------------------------------ | ---- | ------------ | 497| value | object \| [CustomBuilder](ts-types.md#custombuilder8) | 是 | 工具栏内容。 | 498 499**object类型说明：** 500 501| 名称 | 类型 | 必填 | 说明 | 502| ------ | ------------- | ---- | --------------- | 503| value | string | 是 | 工具栏单个选项的显示文本。 | 504| icon | string | 否 | 工具栏单个选项的图标资源路径。 | 505| action | () => void | 否 | 当前选项被选中的事件回调。 | 506 507## 事件 508 509### onTitleModeChange 510 511onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void) 512 513当[titleMode](#titlemode)为NavigationTitleMode.Free时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。 514 515**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 516 517**系统能力：** SystemCapability.ArkUI.ArkUI.Full 518 519**参数：** 520 521| 参数名 | 类型 | 必填 | 说明 | 522| --------- | --------------------------------------------------- | ---- | ---------- | 523| titleMode | [NavigationTitleMode](#navigationtitlemode枚举说明) | 是 | 标题模式。 | 524 525### onNavBarStateChange<sup>9+</sup> 526 527onNavBarStateChange(callback: (isVisible: boolean) => void) 528 529导航栏显示状态切换时触发该回调。 530 531**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 532 533**系统能力：** SystemCapability.ArkUI.ArkUI.Full 534 535**参数：** 536 537| 参数名 | 类型 | 必填 | 说明 | 538| --------- | ------- | ---- | ---------------------------------------------- | 539| isVisible | boolean | 是 | isVisible为true时表示显示，为false时表示隐藏。 | 540 541### onNavigationModeChange<sup>11+</sup> 542 543onNavigationModeChange(callback: (mode: NavigationMode) => void) 544 545当Navigation首次显示或者单双栏状态发生变化时触发该回调。 546 547**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 548 549**系统能力：** SystemCapability.ArkUI.ArkUI.Full 550 551**参数：** 552 553| 参数名 | 类型 | 必填 | 说明 | 554| --------- | ------- | ---- | ---------------------------------------------- | 555| mode | [NavigationMode](#navigationmode9枚举说明) | 是 | NavigationMode.Split：当前Navigation显示为双栏;<br/>NavigationMode.Stack：当前Navigation显示为单栏。| 556 557### customNavContentTransition<sup>11+</sup> 558 559customNavContentTransition(delegate:(from: NavContentInfo, to: NavContentInfo, operation: NavigationOperation) => NavigationAnimatedTransition | undefined) 560 561自定义转场动画回调。 562 563**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 564 565**系统能力：** SystemCapability.ArkUI.ArkUI.Full 566 567**参数：** 568 569| 参数名 | 类型 | 必填 | 说明 | 570| --------- | ----------------------------------------------------- | ---- | ----------------------- | 571| from | [NavContentInfo](#navcontentinfo11) | 是 | 退场Destination的页面。 | 572| to | [NavContentInfo](#navcontentinfo11) | 是 | 进场Destination的页面。 | 573| operation | [NavigationOperation](#navigationoperation11枚举说明) | 是 | 转场类型。 | 574 575**返回值：** 576 577| 类型 | 说明 | 578| ------------------------------------------------------------ | ------------------------------------------------------------ | 579| [NavigationAnimatedTransition](#navigationanimatedtransition11) \| undefined | <br/>NavigationAnimatedTransition：自定义转场动画协议。<br/>undefined：返回未定义，执行默认转场动效。 | 580 581## NavPathStack<sup>10+</sup> 582 583Navigation路由栈，从API version 12开始，NavPathStack允许被继承。开发者可以在派生类中新增属性方法，也可以重写基类NavPathStack的方法。派生类对象可以替代基类NavPathStack对象使用。使用示例参见[示例10](#示例10定义路由栈派生类)。 584 585> **说明：** 586> 587> 1.连续调用多个页面栈操作方法时，中间过程会被忽略，显示最终的栈操作结果。<br/> 588> 例如：在Page1页面先pop再push一个Page1，系统会认为操作前和操作后的结果一致而不进行任何操作，如果需要强行push一个Page1实例，可以使用NEW_INSTANCE模式。 589> 590> 2.不建议开发者通过监听生命周期的方式管理自己的页面栈。 591 592### constructor 593 594constructor() 595 596创建NavPathStack对象。 597 598**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 599 600**系统能力：** SystemCapability.ArkUI.ArkUI.Full 601 602### pushPath<sup>10+</sup> 603 604pushPath(info: NavPathInfo, animated?: boolean): void 605 606将info指定的NavDestination页面信息入栈。 607 608**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 609 610**系统能力：** SystemCapability.ArkUI.ArkUI.Full 611 612**参数：** 613 614| 参数名 | 类型 | 必填 | 说明 | 615| ---- | ----------------------------- | ---- | -------------------- | 616| info | [NavPathInfo](#navpathinfo10) | 是 | NavDestination页面的信息。 | 617| animated<sup>11+</sup> | boolean | 否 | 是否支持转场动画，<br/>默认值：true。<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 618 619### pushPath<sup>12+</sup> 620 621pushPath(info: NavPathInfo, options?: NavigationOptions): void 622 623将info指定的NavDestination页面信息入栈，具体根据options中指定不同的[LaunchMode](#launchmode12枚举说明)，有不同的行为。 624 625**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 626 627**系统能力：** SystemCapability.ArkUI.ArkUI.Full 628 629**参数：** 630 631| 参数名 | 类型 | 必填 | 说明 | 632| ---- | ----------------------------- | ---- | -------------------- | 633| info | [NavPathInfo](#navpathinfo10) | 是 | NavDestination页面的信息。 | 634| options | [NavigationOptions](#navigationoptions12) | 否 | 页面栈操作选项。 | 635 636### pushPathByName<sup>10+</sup> 637 638pushPathByName(name: string, param: unknown, animated?: boolean): void 639 640将name指定的NavDestination页面信息入栈，传递的数据为param。 641 642**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 643 644**系统能力：** SystemCapability.ArkUI.ArkUI.Full 645 646**参数：** 647 648| 参数名 | 类型 | 必填 | 说明 | 649| ----- | ------- | ---- | --------------------- | 650| name | string | 是 | NavDestination页面名称。 | 651| param | unknown | 是 | 开发者设置的NavDestination页面详细参数。 | 652| animated<sup>11+</sup> | boolean | 否 | 是否支持转场动画，<br/>默认值：true。<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 653 654### pushPathByName<sup>11+</sup> 655 656pushPathByName(name: string, param: Object, onPop: Callback\<PopInfo>, animated?: boolean): void 657 658将name指定的NavDestination页面信息入栈，传递的数据为param，添加onPop回调接收入栈页面出栈时的返回结果，并进行处理。 659 660**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 661 662**系统能力：** SystemCapability.ArkUI.ArkUI.Full 663 664**参数：** 665 666| 参数名 | 类型 | 必填 | 说明 | 667|------|------|------|------| 668| name | string | 是 | NavDestination页面名称。 | 669| param | Object | 是 | 开发者设置的NavDestination页面详细参数。 | 670| onPop | Callback\<[PopInfo](#popinfo11)> | 是 | Callback回调，用于页面出栈时触发该回调处理返回结果。仅[pop](#pop11)、[popToName](#poptoname11)、[popToIndex](#poptoindex11)中设置result参数后触发。 | 671| animated | boolean | 否 | 是否支持转场动画，<br/>默认值：true。<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 672 673### pushDestination<sup>11+</sup> 674 675pushDestination(info: NavPathInfo, animated?: boolean): Promise<void> 676 677将info指定的NavDestination页面信息入栈，使用Promise异步回调返回接口调用结果。 678 679**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 680 681**系统能力：** SystemCapability.ArkUI.ArkUI.Full 682 683**参数：** 684 685| 参数名 | 类型 | 必填 | 说明 | 686| ---- | ----------------------------- | ---- | -------------------- | 687| info | [NavPathInfo](#navpathinfo10) | 是 | NavDestination页面的信息。 | 688| animated | boolean | 否 | 是否支持转场动画，<br/>默认值：true。<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 689 690**返回值：** 691 692| 类型 | 说明 | 693| ------------------- | --------- | 694| Promise<void> | 异常返回结果。 | 695 696**错误码：** 697 698以下错误码的详细介绍请参见[通用错误码](../../errorcode-universal.md)和[ohos.router(页面路由)](../errorcode-router.md)错误码。 699 700| 错误码ID | 错误信息 | 701| --------- | ------- | 702| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 703| 100001 | Internal error.| 704| 100005 | Builder function not registered. | 705| 100006 | NavDestination not found.| 706 707### pushDestination<sup>12+</sup> 708 709pushDestination(info: NavPathInfo, options?: NavigationOptions): Promise<void> 710 711将info指定的NavDestination页面信息入栈，使用Promise异步回调返回接口调用结果，具体根据options中指定不同的[LaunchMode](#launchmode12枚举说明)，有不同的行为。 712 713**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 714 715**系统能力：** SystemCapability.ArkUI.ArkUI.Full 716 717**参数：** 718 719| 参数名 | 类型 | 必填 | 说明 | 720| ---- | ----------------------------- | ---- | -------------------- | 721| info | [NavPathInfo](#navpathinfo10) | 是 | NavDestination页面的信息。 | 722| options | [NavigationOptions](#navigationoptions12) | 否 | 页面栈操作选项。 | 723 724**返回值：** 725 726| 类型 | 说明 | 727| ------------------- | --------- | 728| Promise<void> | 异常返回结果。 | 729 730**错误码：** 731 732以下错误码的详细介绍请参见[通用错误码](../../errorcode-universal.md)和[ohos.router(页面路由)](../errorcode-router.md)错误码。 733 734| 错误码ID | 错误信息 | 735| --------- | ------- | 736| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 737| 100001 | Internal error.| 738| 100005 | Builder function not registered. | 739| 100006 | NavDestination not found.| 740 741### pushDestinationByName<sup>11+</sup> 742 743pushDestinationByName(name: string, param: Object, animated?: boolean): Promise<void> 744 745将name指定的NavDestination页面信息入栈，传递的数据为param，使用Promise异步回调返回接口调用结果。 746 747**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 748 749**系统能力：** SystemCapability.ArkUI.ArkUI.Full 750 751**参数：** 752 753| 参数名 | 类型 | 必填 | 说明 | 754| ----- | ------- | ---- | --------------------- | 755| name | string | 是 | NavDestination页面名称。 | 756| param | Object | 是 | 开发者设置的NavDestination页面详细参数。 | 757| animated | boolean | 否 | 是否支持转场动画，<br/>默认值：true。<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 758 759**返回值：** 760 761| 类型 | 说明 | 762| ------------------- | --------- | 763| Promise<void> | 异常返回结果。 | 764 765**错误码：** 766 767以下错误码的详细介绍请参见[通用错误码](../../errorcode-universal.md)和[ohos.router(页面路由)](../errorcode-router.md)错误码。 768 769| 错误码ID | 错误信息 | 770| --------- | ------- | 771| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 772| 100001 | Internal error.| 773| 100005 | Builder function not registered. | 774| 100006 | NavDestination not found.| 775 776### pushDestinationByName<sup>11+</sup> 777 778pushDestinationByName(name: string, param: Object, onPop: Callback\<PopInfo>, animated?: boolean): Promise<void> 779 780将name指定的NavDestination页面信息入栈，传递的数据为param，并且添加用于页面出栈时处理返回结果的onPop回调，使用Promise异步回调返回接口调用结果。 781 782**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 783 784**系统能力：** SystemCapability.ArkUI.ArkUI.Full 785 786**参数：** 787 788| 参数名 | 类型 | 必填 | 说明 | 789| ----- | ------- | ---- | --------------------- | 790| name | string | 是 | NavDestination页面名称。 | 791| param | Object | 是 | 开发者设置的NavDestination页面详细参数。 | 792| onPop | Callback\<[PopInfo](#popinfo11)> | 是 | Callback回调，用于页面出栈时处理返回结果。仅[pop](#pop11)、[popToName](#poptoname11)、[popToIndex](#poptoindex11)中设置result参数后触发。 | 793| animated | boolean | 否 | 是否支持转场动画，<br/>默认值：true。<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 794 795**返回值：** 796 797| 类型 | 说明 | 798| ------------------- | --------- | 799| Promise<void> | 异常返回结果。 | 800 801**错误码：** 802 803以下错误码的详细介绍请参见[通用错误码](../../errorcode-universal.md)和[ohos.router(页面路由)](../errorcode-router.md)错误码。 804 805| 错误码ID | 错误信息 | 806| --------- | ------- | 807| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 808| 100001 | Internal error.| 809| 100005 | Builder function not registered. | 810| 100006 | NavDestination not found.| 811 812### replacePath<sup>11+</sup> 813 814replacePath(info: NavPathInfo, animated?: boolean): void 815 816将当前页面栈栈顶退出，将info指定的NavDestination页面信息入栈。 817 818**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 819 820**系统能力：** SystemCapability.ArkUI.ArkUI.Full 821 822**参数：** 823 824| 参数名 | 类型 | 必填 | 说明 | 825| ---- | ----------------------------- | ---- | -------------------- | 826| info | [NavPathInfo](#navpathinfo10) | 是 | 新栈顶页面参数信息。 | 827| animated<sup>11+</sup> | boolean | 否 | 是否支持转场动画，<br/>默认值：true。<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 828 829### replacePath<sup>12+</sup> 830 831replacePath(info: NavPathInfo, options?: NavigationOptions): void 832 833替换页面栈操作，具体根据options中指定不同的[LaunchMode](#launchmode12枚举说明)，有不同的行为。 834 835**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 836 837**系统能力：** SystemCapability.ArkUI.ArkUI.Full 838 839**参数：** 840 841| 参数名 | 类型 | 必填 | 说明 | 842| ---- | ----------------------------- | ---- | -------------------- | 843| info | [NavPathInfo](#navpathinfo10) | 是 | 新栈顶页面参数信息。 | 844| options | [NavigationOptions](#navigationoptions12) | 否 | 页面栈操作选项。 | 845 846### replacePathByName<sup>11+</sup> 847 848replacePathByName(name: string, param: Object, animated?: boolean): void 849 850将当前页面栈栈顶退出，将name指定的页面入栈。 851 852**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 853 854**系统能力：** SystemCapability.ArkUI.ArkUI.Full 855 856**参数：** 857 858| 参数名 | 类型 | 必填 | 说明 | 859| ----- | ------- | ---- | --------------------- | 860| name | string | 是 | NavDestination页面名称。 | 861| param | Object | 是 | 开发者设置的NavDestination页面详细参数。 | 862| animated<sup>11+</sup> | boolean | 否 | 是否支持转场动画，<br/>默认值：true。<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 863 864### replaceDestination<sup>18+</sup> 865 866replaceDestination(info: NavPathInfo, options?: NavigationOptions): Promise<void> 867 868替换页面栈操作。使用Promise异步回调返回接口调用结果，具体根据options中指定不同的[LaunchMode](#launchmode12枚举说明)，有不同的行为。 869 870**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 871 872**系统能力：** SystemCapability.ArkUI.ArkUI.Full 873 874**参数：** 875 876| 参数名 | 类型 | 必填 | 说明 | 877| ---- | ----------------------------- | ---- | -------------------- | 878| info | [NavPathInfo](#navpathinfo10) | 是 | NavDestination页面的信息。 | 879| options | [NavigationOptions](#navigationoptions12) | 否 | 页面栈操作选项。 | 880 881**返回值：** 882 883| 类型 | 说明 | 884| ------------------- | --------- | 885| Promise<void> | 异常返回结果。 | 886 887**错误码：** 888 889以下错误码的详细介绍请参见[通用错误码](../../errorcode-universal.md)和[ohos.router(页面路由)](../errorcode-router.md)错误码。 890 891| 错误码ID | 错误信息 | 892| --------- | ------- | 893| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 894| 100001 | Internal error.| 895| 100005 | Builder function not registered. | 896| 100006 | NavDestination not found.| 897 898### removeByIndexes<sup>11+</sup> 899 900removeByIndexes(indexes: Array<number\>): number 901 902将页面栈内索引值在indexes中的NavDestination页面删除。 903 904**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 905 906**系统能力：** SystemCapability.ArkUI.ArkUI.Full 907 908**参数：** 909 910| 参数名 | 类型 | 必填 | 说明 | 911| ----- | ------- | ---- | --------------------- | 912| indexes | Array<number\> | 是 | 待删除NavDestination页面的索引值数组。 索引值从0开始。 | 913 914**返回值：** 915 916| 类型 | 说明 | 917| ----------- | ------------------------ | 918| number | 返回删除的NavDestination页面数量。 | 919 920### removeByName<sup>11+</sup> 921 922removeByName(name: string): number 923 924将页面栈内指定name的NavDestination页面删除。 925 926**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 927 928**系统能力：** SystemCapability.ArkUI.ArkUI.Full 929 930**参数：** 931 932| 参数名 | 类型 | 必填 | 说明 | 933| ----- | ------- | ---- | --------------------- | 934| name | string | 是 | 删除的NavDestination页面的名字。 | 935 936**返回值：** 937 938| 类型 | 说明 | 939| ----------- | ------------------------ | 940| number | 返回删除的NavDestination页面数量。 | 941 942### removeByNavDestinationId<sup>12+</sup> 943 944removeByNavDestinationId(navDestinationId: string): boolean 945 946将页面栈内指定navDestinationId的NavDestination页面删除。navDestinationId可以在NavDestination的[onReady](ts-basic-components-navdestination.md#onready11)回调中获取，也可以在[NavDestinationInfo](../js-apis-arkui-observer.md#navdestinationinfo)中获取。 947 948**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 949 950**系统能力：** SystemCapability.ArkUI.ArkUI.Full 951 952**参数：** 953 954| 参数名 | 类型 | 必填 | 说明 | 955| ----- | ------- | ---- | --------------------- | 956| navDestinationId | string | 是 | 删除的NavDestination页面的唯一标识符navDestinationId。 | 957 958**返回值：** 959 960| 类型 | 说明 | 961| ----------- | ------------------------ | 962| boolean | 返回是否成功删除该页面，<br/>true：删除成功。<br/>false：删除失败。 | 963 964### pop<sup>10+</sup> 965 966pop(animated?: boolean): NavPathInfo | undefined 967 968弹出路由栈栈顶元素。 969 970**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 971 972**系统能力：** SystemCapability.ArkUI.ArkUI.Full 973 974**参数：** 975 976| 参数名 | 类型 | 必填 | 说明 | 977| ---- | ----------------------------- | ---- | -------------------- | 978| animated<sup>11+</sup> | boolean | 否 | 是否支持转场动画，<br/>默认值：true。<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 979 980**返回值：** 981 982| 类型 | 说明 | 983| ----------- | ------------------------ | 984| [NavPathInfo](#navpathinfo10) | 返回栈顶NavDestination页面的信息。 | 985| undefined | 当路由栈为空时返回undefined。 | 986 987### pop<sup>11+</sup> 988 989pop(result: Object, animated?: boolean): NavPathInfo | undefined 990 991弹出路由栈栈顶元素，并触发onPop回调传入页面处理结果。 992 993**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 994 995**系统能力：** SystemCapability.ArkUI.ArkUI.Full 996 997**参数：** 998 999| 参数名 | 类型 | 必填 | 说明 | 1000| ---- | ----------------------------- | ---- | -------------------- | 1001| result | Object | 是 | 页面自定义处理结果。不支持boolean类型。 | 1002| animated | boolean | 否 | 是否支持转场动画，<br/>默认值：true。<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 1003 1004**返回值：** 1005 1006| 类型 | 说明 | 1007| ----------- | ------------------------ | 1008| [NavPathInfo](#navpathinfo10) | 返回栈顶NavDestination页面的信息。 | 1009| undefined | 当路由栈为空时返回undefined。 | 1010 1011### popToName<sup>10+</sup> 1012 1013popToName(name: string, animated?: boolean): number 1014 1015回退路由栈到由栈底开始第一个名为name的NavDestination页面。 1016 1017**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1018 1019**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1020 1021**参数：** 1022 1023| 参数名 | 类型 | 必填 | 说明 | 1024| ---- | ------ | ---- | ------------------- | 1025| name | string | 是 | NavDestination页面名称。 | 1026| animated<sup>11+</sup> | boolean | 否 | 是否支持转场动画，<br/>默认值：true。<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 1027 1028**返回值：** 1029 1030| 类型 | 说明 | 1031| ------ | ---------------------------------------- | 1032| number | 如果栈中存在名为name的NavDestination页面，则返回由栈底开始第一个名为name的NavDestination页面的索引，否则返回-1。 | 1033 1034### popToName<sup>11+</sup> 1035 1036popToName(name: string, result: Object, animated?: boolean): number 1037 1038回退路由栈到由栈底开始第一个名为name的NavDestination页面，并触发onPop回调传入页面处理结果。 1039 1040**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1041 1042**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1043 1044**参数：** 1045 1046| 参数名 | 类型 | 必填 | 说明 | 1047| ---- | ------ | ---- | ------------------- | 1048| name | string | 是 | NavDestination页面名称。 | 1049| result | Object | 是 | 页面自定义处理结果。不支持boolean类型。 | 1050| animated | boolean | 否 | 是否支持转场动画，<br/>默认值：true。<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 1051 1052**返回值：** 1053 1054| 类型 | 说明 | 1055| ------ | ---------------------------------------- | 1056| number | 如果栈中存在名为name的NavDestination页面，则返回由栈底开始第一个名为name的NavDestination页面的索引，否则返回-1。 | 1057 1058### popToIndex<sup>10+</sup> 1059 1060popToIndex(index: number, animated?: boolean): void 1061 1062回退路由栈到index指定的NavDestination页面。 1063 1064**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1065 1066**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1067 1068**参数：** 1069 1070| 参数名 | 类型 | 必填 | 说明 | 1071| ----- | ------ | ---- | ---------------------- | 1072| index | number | 是 | NavDestination页面的位置索引。索引值从0开始。 | 1073| animated<sup>11+</sup> | boolean | 否 | 是否支持转场动画，<br/>默认值：true。<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 1074 1075### popToIndex<sup>11+</sup> 1076 1077popToIndex(index: number, result: Object, animated?: boolean): void 1078 1079回退路由栈到index指定的NavDestination页面，并触发onPop回调传入页面处理结果。 1080 1081**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1082 1083**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1084 1085**参数：** 1086 1087| 参数名 | 类型 | 必填 | 说明 | 1088| ----- | ------ | ---- | ---------------------- | 1089| index | number | 是 | NavDestination页面的位置索引。索引值从0开始。 | 1090| result | Object | 是 | 页面自定义处理结果。不支持boolean类型。 | 1091| animated | boolean | 否 | 是否支持转场动画，<br/>默认值：true。<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 1092 1093### moveToTop<sup>10+</sup> 1094 1095moveToTop(name: string, animated?: boolean): number 1096 1097将由栈底开始第一个名为name的NavDestination页面移到栈顶。 1098 1099**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1100 1101**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1102 1103**参数：** 1104 1105| 参数名 | 类型 | 必填 | 说明 | 1106| ---- | ------ | ---- | ------------------- | 1107| name | string | 是 | NavDestination页面名称。 | 1108| animated<sup>11+</sup> | boolean | 否 | 是否支持转场动画，<br/>默认值：true。<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 1109 1110**返回值：** 1111 1112| 类型 | 说明 | 1113| ------ | ---------------------------------------- | 1114| number | 如果栈中存在名为name的NavDestination页面，则返回由栈底开始第一个名为name的NavDestination页面的当前索引，否则返回-1。 | 1115 1116### moveIndexToTop<sup>10+</sup> 1117 1118moveIndexToTop(index: number, animated?: boolean): void 1119 1120将index指定的NavDestination页面移到栈顶。 1121 1122**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1123 1124**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1125 1126**参数：** 1127 1128| 参数名 | 类型 | 必填 | 说明 | 1129| ----- | ------ | ---- | ---------------------- | 1130| index | number | 是 | NavDestination页面的位置索引。索引值从0开始。 | 1131| animated<sup>11+</sup> | boolean | 否 | 是否支持转场动画，<br/>默认值：true。<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 1132 1133### clear<sup>10+</sup> 1134 1135clear(animated?: boolean): void 1136 1137清除栈中所有页面。 1138 1139**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1140 1141**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1142 1143**参数：** 1144 1145| 参数名 | 类型 | 必填 | 说明 | 1146| ----- | ------ | ---- | ---------------------- | 1147| animated<sup>11+</sup> | boolean | 否 | 是否支持转场动画，<br/>默认值：true。<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 1148 1149### getAllPathName<sup>10+</sup> 1150 1151getAllPathName(): Array<string\> 1152 1153获取栈中所有NavDestination页面的名称。 1154 1155**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1156 1157**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1158 1159**返回值：** 1160 1161| 类型 | 说明 | 1162| -------------- | -------------------------- | 1163| Array<string\> | 返回栈中所有NavDestination页面的名称。 | 1164 1165### getParamByIndex<sup>10+</sup> 1166 1167getParamByIndex(index: number): unknown | undefined 1168 1169获取index指定的NavDestination页面的参数信息。 1170 1171**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1172 1173**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1174 1175**参数：** 1176 1177| 参数名 | 类型 | 必填 | 说明 | 1178| ----- | ------ | ---- | ---------------------- | 1179| index | number | 是 | NavDestination页面的位置索引。索引值从0开始。 | 1180 1181**返回值：** 1182 1183| 类型 | 说明 | 1184| --------- | -------------------------- | 1185| unknown | 返回对应NavDestination页面的参数信息。 | 1186| undefined | 传入index无效时返回undefined。 | 1187 1188### getParamByName<sup>10+</sup> 1189 1190getParamByName(name: string): Array<unknown\> 1191 1192获取全部名为name的NavDestination页面的参数信息。 1193 1194**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1195 1196**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1197 1198**参数：** 1199 1200| 参数名 | 类型 | 必填 | 说明 | 1201| ---- | ------ | ---- | ------------------- | 1202| name | string | 是 | NavDestination页面名称。 | 1203 1204**返回值：** 1205 1206| 类型 | 说明 | 1207| --------------- | --------------------------------- | 1208| Array<unknown\> | 返回全部名为name的NavDestination页面的参数信息。 | 1209 1210### getIndexByName<sup>10+</sup> 1211 1212getIndexByName(name: string): Array<number\> 1213 1214获取全部名为name的NavDestination页面的位置索引。 1215 1216**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1217 1218**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1219 1220**参数：** 1221 1222| 参数名 | 类型 | 必填 | 说明 | 1223| ---- | ------ | ---- | ------------------- | 1224| name | string | 是 | NavDestination页面名称。 | 1225 1226**返回值：** 1227 1228| 类型 | 说明 | 1229| -------------- | --------------------------------- | 1230| Array<number\> | 返回全部名为name的NavDestination页面的位置索引。当页面栈中不存在此name，返回空数组。索引取值范围为[0, 页面栈大小-1] | 1231 1232### size<sup>10+</sup> 1233 1234size(): number 1235 1236获取栈大小。 1237 1238**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1239 1240**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1241 1242**返回值：** 1243 1244| 类型 | 说明 | 1245| ------ | ------ | 1246| number | 返回栈大小。<br/>取值范围：[0, +∞) | 1247 1248### disableAnimation<sup>11+</sup> 1249 1250disableAnimation(value: boolean): void 1251 1252关闭（true）或打开（false）当前Navigation中所有转场动画。 1253 1254**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1255 1256**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1257 1258**参数：** 1259 1260| 参数名 | 类型 | 必填 | 说明 | 1261| ----- | ------ | ---- | ---------------------- | 1262| value | boolean | 是 | 是否关闭转场动画，<br/>默认值：false。<br/>true：关闭转场动画。<br/>false：不关闭转场动画。 | 1263 1264### getParent<sup>11+</sup> 1265 1266getParent(): NavPathStack | null 1267 1268获取父NavPathStack。<br/>当出现Navigation嵌套Navigation的情况时（可以是直接嵌套，也可以是间接嵌套），内部Navigation的NavPathStack能够获取到外层Navigation的NavPathStack。 1269 1270**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1271 1272**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1273 1274**返回值：** 1275 1276| 类型 | 说明 | 1277| ------ | ------ | 1278| [NavPathStack](#navpathstack10) \| null | 如果当前NavPathStack所属Navigation的外层有另外的一层Navigation，则能够获取到外层Navigation的NavPathStack。否则获取不到NavPathStack，返回null。 | 1279 1280### setInterception<sup>12+</sup> 1281 1282setInterception(interception: NavigationInterception): void 1283 1284设置Navigation页面跳转拦截回调。 1285 1286**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1287 1288**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1289 1290**参数：** 1291 1292| 参数名 | 类型 | 必填 | 说明 | 1293| ---- | ---- | --- | ---| 1294|interception| [NavigationInterception](#navigationinterception12)| 是 | 设置Navigation跳转拦截对象。| 1295 1296## NavPathInfo<sup>10+</sup> 1297 1298路由页面信息。 1299 1300### constructor 1301 1302constructor(name: string, param: unknown, onPop?: Callback\<PopInfo>, isEntry?: boolean) 1303 1304创建NavPathInfo对象。 1305 1306**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1307 1308**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1309 1310| 参数名 | 类型 | 必填 | 说明 | 1311| ----- | ------- | ---- | --------------------- | 1312| name | string | 是 | NavDestination页面名称。 | 1313| param | unknown | 是 | 开发者设置的NavDestination页面详细参数。 | 1314| onPop<sup>11+</sup> | Callback\<[PopInfo](#popinfo11)> | 否 | NavDestination页面触发[pop](#pop11)、[popToName](#poptoname11)、[popToIndex](#poptoindex11)时返回的回调。仅[pop](#pop11)、[popToName](#poptoname11)、[popToIndex](#poptoindex11)时返回的回调。仅[pop](#pop11)、[popToName](#poptoname11)、[popToIndex](#poptoindex11)时返回的回调。仅[pop](#pop11)、[popToName](#poptoname11)、[popToIndex](#poptoindex11)中设置result参数后触发。 | 1315| isEntry<sup>12+</sup> | boolean | 否 | 标记NavDestination是否为入口页面。<br/>默认值：false。<br/>true：NavDestination是入口页面。<br/>false：NavDestination不是入口页面。 <br/>标记清理时机：1、在当前navDestination页面触发一次全局返回事件。2、应用退至后台。<br/>**说明**：<br/>入口NavDestination不响应应用内的全局back事件，直接触发应用间的全局back事件。 | 1316 1317### 属性 1318 1319NavPathInfo参数信息。 1320 1321**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1322 1323| 名称 | 类型 | 必填 | 说明 | 1324| ----- | ------- | ---- | --------------------- | 1325| name | string | 是 | NavDestination页面名称。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 1326| param | unknown | 否 | 开发者设置的NavDestination页面详细参数。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 1327| onPop<sup>11+</sup> | Callback\<[PopInfo](#popinfo11)> | 否 | NavDestination页面触发[pop](#pop11)、[popToName](#poptoname11)、[popToIndex](#poptoindex11)时返回的回调。仅[pop](#pop11)、[popToName](#poptoname11)、[popToIndex](#poptoindex11)时返回的回调。仅[pop](#pop11)、[popToName](#poptoname11)、[popToIndex](#poptoindex11)时返回的回调。仅[pop](#pop11)、[popToName](#poptoname11)、[popToIndex](#poptoindex11)中设置result参数后触发。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 1328| isEntry<sup>12+</sup> | boolean | 否 | 标记NavDestination是否为入口页面。<br/>默认值：false。<br/>true：NavDestination是入口页面。<br/>false：NavDestination不是入口页面。 <br/>标记清理时机：1、在当前navDestination页面触发一次全局back事件。2、应用退至后台。<br/>**说明**：<br/>入口NavDestination不响应应用内的全局back事件，直接触发应用间的全局back事件。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 1329 1330## PopInfo<sup>11+</sup> 1331 1332下一个页面返回的回调信息载体。 1333 1334**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1335 1336**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1337 1338| 名称 | 类型 | 必填 | 说明 | 1339|------|-----|-----|-----| 1340| info | [NavPathInfo](#navpathinfo10) | 是 | 页面触发返回时的当前页面信息，系统自动获取填入，无需开发者传入。 | 1341| result | Object | 是 | 页面触发返回时的结果，开发者自定义对象。 | 1342 1343## NavContentInfo<sup>11+</sup> 1344 1345跳转Destination信息。 1346 1347**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1348 1349**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1350 1351| 名称 | 类型 | 必填 | 说明 | 1352|-------|-------|------|-------| 1353| name | string | 否 | NavDestination名称，如果为根视图(NavBar)，则返回值为undefined。| 1354| index | number | 是 | NavDestination在NavPathStack中的序号， 如果为根视图(NavBar)，则返回值为 -1。<br/>取值范围：[-1, +∞)。 | 1355| mode | [NavDestinationMode](ts-basic-components-navdestination.md#navdestinationmode枚举说明) | 否 | NavDestination的模式，如果是根视图(NavBar)，则返回值为undefined。| 1356| param<sup>12+</sup> | Object | 否 | NavDestination页面加载的参数。| 1357| navDestinationId<sup>12+</sup> | string | 否 | NavDestination的唯一标识符。| 1358 1359## NavigationAnimatedTransition<sup>11+</sup> 1360 1361自定义转场动画协议，开发者需实现该协议来定义Navigation路由跳转的跳转动画。 1362 1363**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1364 1365**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1366 1367| 名称 | 类型 | 必填 | 说明 | 1368|------|-----|-----|------| 1369| timeout | number | 否 | 动画超时结束时间。<br> 单位：ms。<br/>取值范围：[0, +∞)。<br> 默认值：可交互动画无默认值，不可交互动画默认超时时间为1000ms。| 1370| transition | (transitionProxy：[NavigationTransitionProxy](#navigationtransitionproxy-11)) => void | 是 | 自定义转场动画执行回调。<br> transitionProxy：自定义转场动画代理对象。| 1371| onTransitionEnd | (success：boolean) => void | 否 | 转场完成回调。<br> success：转场是否成功。 | 1372| isInteractive<sup>12+</sup> | boolean | 否 | 本次转场动画是否为可交互转场。<br> 默认值：false。<br/>true：本次转场动画是可交互转场。<br/>false：本次转场动画不是可交互转场。| 1373 1374## NavigationTransitionProxy <sup>11+</sup> 1375 1376自定义转场动画代理对象。 1377 1378**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1379 1380### 属性 1381 1382NavigationTransitionProxy参数信息。 1383 1384**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1385 1386**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1387 1388| 名称 | 类型 | 必填 | 说明 | 1389|------|-------|-----|-------| 1390| from | [NavContentInfo](#navcontentinfo11) | 是 | 退场页面信息。| 1391| to | [NavContentInfo](#navcontentinfo11) | 是 | 进场页面信息。| 1392| isInteractive<sup>12+</sup> | boolean | 否 | 是否为可交互转场动画。<br/>true：本次转场动画是可交互转场。<br/>false：本次转场动画不是可交互转场。| 1393 1394### finishTransition 1395 1396finishTransition(): void; 1397 1398结束本次自定义转场动画，开发者需要主动触发该方法来结束本次转场，否则系统会在timeout的时间后结束本次转场。 1399 1400**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1401 1402**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1403 1404### cancelTransition<sup>12+</sup> 1405 1406cancelTransition?(): void; 1407 1408取消本次交互转场，恢复到页面跳转前的页面栈(不支持取消不可交互转场动画)。 1409 1410**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1411 1412**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1413 1414### updateTransition<sup>12+</sup> 1415 1416updateTransition?(progress: number): void; 1417 1418更新交互转场动画进度(不可交互动画不支持动画进度设置)。 1419 1420**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1421 1422**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1423 1424**参数：** 1425 1426| 参数名 | 类型 | 必填 | 说明 | 1427|------|------|------|-----| 1428| progress | number | 是 | 设置交互转场动画进度百分比。取值范围 0-1。| 1429 1430## NavigationInterception<sup>12+</sup> 1431 1432Navigation跳转拦截对象。 1433 1434**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1435 1436**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1437 1438| 名称 | 类型 | 必填 | 说明 | 1439| ---- | ----- | ----- | ---- | 1440| willShow | [InterceptionShowCallback](#interceptionshowcallback12) | 否 | 页面跳转前拦截，允许操作栈，在当前跳转中生效。| 1441| didShow | [InterceptionShowCallback](#interceptionshowcallback12) | 否 | 页面跳转后回调。在该回调中操作栈在下一次跳转中刷新。| 1442| modeChange | [InterceptionModeCallback](#interceptionmodecallback12) | 否 | Navigation单双栏显示状态发生变更时触发该回调。| 1443 1444### InterceptionShowCallback<sup>12+</sup> 1445 1446type InterceptionShowCallback = (from: NavDestinationContext|NavBar, to: NavDestinationContext|NavBar, operation: NavigationOperation, isAnimated: boolean) => void 1447 1448navigation页面跳转前和页面跳转后的拦截回调。 1449 1450**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1451 1452**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1453 1454| 参数名 | 类型 | 必填 | 说明 | 1455| ------ | ------ | ---- | ---------------- | 1456| from | [NavDestinationContext](ts-basic-components-navdestination.md#navdestinationcontext11) \|[NavBar](#navbar12) | 是 | 页面跳转之前的栈顶页面信息。参数值为navBar，则表示跳转前的页面为Navigation首页。 | 1457| to | [NavDestinationContext](ts-basic-components-navdestination.md#navdestinationcontext11) \|[NavBar](#navbar12) | 是 | 页面跳转之后的栈顶页面信息。参数值为navBar，则表示跳转的目标页面为Navigation首页。 | 1458| operation | [NavigationOperation](#navigationoperation11枚举说明) | 是 | 当前页面跳转类型。 | 1459| isAnimated | boolean | 是 | 页面跳转是否有动画。<br/>true：页面跳转有动画。<br/>false：页面跳转没有动画。 | 1460 1461### InterceptionModeCallback<sup>12+</sup> 1462 1463type InterceptionModeCallback = (mode: NavigationMode) => void 1464 1465navigation单双栏显示状态发生变更时的拦截回调。 1466 1467**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1468 1469**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1470 1471| 参数名 | 类型 | 必填 | 说明 | 1472| ------ | ------ | ---- | ---------------- | 1473| mode | [NavigationMode](#navigationmode9枚举说明) | 是 | 导航栏的显示模式。 | 1474 1475## NavBar<sup>12+</sup> 1476 1477type NavBar = 'navBar' 1478 1479Navigation首页名字。 1480 1481**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1482 1483**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1484 1485| 类型 | 说明 | 1486| -------- | ---------------- | 1487| 'navBar' | Navigation首页。 | 1488 1489## NavigationMenuItem 1490 1491导航菜单项，包括菜单图标和菜单信息。 1492 1493**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1494 1495| 名称 | 类型 | 必填 | 说明 | 1496| ------ | ------------- | ---- | --------------- | 1497| value | string \| [Resource<sup>14+<sup>](ts-types.md#resource) | 是 | API version 9：显示菜单栏单个选项的文本。从API version 10开始，不显示菜单栏单个选项的文本。 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 1498| icon | string \| [Resource<sup>14+<sup>](ts-types.md#resource) | 否 | 菜单栏单个选项的图标资源路径。 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 1499| isEnabled<sup>12+</sup> | boolean | 否 | 使能状态，默认使能（false未使能，true使能）。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 1500| action | () => void | 否 | 当前选项被选中的事件回调。 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 1501| symbolIcon<sup>12+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 |菜单栏单个选项的symbol资源（优先级高于icon）。 <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 1502 1503## ToolbarItem<sup>10+</sup> 1504 1505工具栏可配置参数。 1506 1507**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1508 1509**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1510 1511| 名称 | 类型 | 必填 | 说明 | 1512| ---------- | ---------------------------------------- | ---- | ---------------------------------------- | 1513| value | ResourceStr | 是 | 工具栏单个选项的显示文本。 | 1514| icon | ResourceStr | 否 | 工具栏单个选项的图标资源路径。 | 1515| action | () => void | 否 | 当前选项被选中的事件回调。 | 1516| status | [ToolbarItemStatus](#toolbaritemstatus10枚举说明) | 否 | 工具栏单个选项的状态。<br/>默认值：ToolbarItemStatus.NORMAL | 1517| activeIcon | ResourceStr | 否 | 工具栏单个选项处于ACTIVE态时的图标资源路径。 | 1518| symbolIcon<sup>12+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | 工具栏单个选项的symbol资源（优先级高于icon）。 <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 1519| activeSymbolIcon<sup>12+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | 工具栏单个选项处于ACTIVE态时的symbol资源（优先级高于activeIcon）。 <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 1520 1521## ToolbarItemStatus<sup>10+</sup>枚举说明 1522 1523工具栏单个选项的状态。 1524 1525**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1526 1527**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1528 1529| 名称 | 值 | 说明 | 1530| -------- | --- | ------------------------------------------------------------ | 1531| NORMAL | 0 | 设置工具栏单个选项为NORMAL态，该选项显示默认样式，可以触发Hover，Press，Focus事件并显示对应的多态样式。 | 1532| DISABLED | 1 | 设置工具栏单个选项为DISABLED态， 该选项显示DISABLED态样式，并且不可交互。 | 1533| ACTIVE | 2 | 设置工具栏单个选项为ACTIVE态， 该选项通过点击事件可以将icon图标更新为activeIcon对应的图片资源。 | 1534 1535## NavigationTitleMode枚举说明 1536 1537标题栏显示模式。 1538 1539**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1540 1541**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1542 1543| 名称 | 值 | 说明 | 1544| ---- | --- | ------------------------------------------------------------ | 1545| Free | 0 | 当内容为满一屏的可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。<br/>**说明：** <br/>标题随着内容滚动大小联动的动效在title设置为ResourceStr和NavigationCommonTitle时生效，设置成其余自定义节点类型时字体样式无法变化，下拉时只影响标题栏偏移。<br/>可滚动组件不满一屏时，如果想使用联动效果，就要使用滚动组件提供的[edgeEffect](ts-container-list.md#edgeeffect)接口将options参数设置为true。未滚动状态，标题栏高度与Full模式一致；滚动时，标题栏的最小高度与Mini模式一致。 | 1546| Mini | 1 | 固定为小标题模式。<br/>默认值：API version 12之前，只有主标题时，标题栏高度为56vp；同时有主标题和副标题时，标题栏高度为82vp。从API version 12开始，该模式下标题栏高度为56vp。 | 1547| Full | 2 | 固定为大标题模式。<br/>默认值：只有主标题时，标题栏高度为112vp；同时有主标题和副标题时，标题栏高度为138vp。 | 1548 1549## NavigationCommonTitle<sup>9+</sup> 1550 1551Navigation通用标题。 1552 1553**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1554 1555**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1556 1557| 名称 | 类型 | 必填 | 说明 | 1558| ---- | ------ | ---- | ------ | 1559| main | string \| [Resource<sup>14+<sup>](ts-types.md#resource) | 是 | 设置主标题。 | 1560| sub | string \| [Resource<sup>14+<sup>](ts-types.md#resource) | 是 | 设置副标题。 | 1561 1562## NavigationCustomTitle<sup>9+</sup> 1563 1564Navigation自定义标题。 1565 1566**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1567 1568**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1569 1570| 名称 | 类型 | 必填 | 说明 | 1571| ------- | ---------------------------------------- | ---- | -------- | 1572| builder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 设置标题栏内容。 | 1573| height | [TitleHeight](ts-appendix-enums.md#titleheight9) \| [Length](ts-types.md#length) | 是 | 设置标题栏高度。 | 1574 1575## NavBarPosition<sup>9+</sup>枚举说明 1576 1577导航栏位置。 1578 1579**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1580 1581**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1582 1583| 名称 | 说明 | 1584| ----- | -------------------------------- | 1585| Start | 双栏显示时，主列在主轴方向首部。 | 1586| End | 双栏显示时，主列在主轴方向尾部。 | 1587 1588## NavigationMode<sup>9+</sup>枚举说明 1589 1590导航栏显示模式。 1591 1592**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1593 1594**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1595 1596| 名称 | 说明 | 1597| ----- | ------------------------------------------------------------ | 1598| Stack | 导航栏与内容区独立显示，相当于两个页面。 | 1599| Split | 导航栏与内容区分两栏显示。<br/>以下navBarWidthRange的值用[minNavBarWidth,maxNavBarWidth]表示<br/>1.当navBarWidth属性的值，在navBarWidthRange属性的值范围以外时，navBarWidth按如下规则显示：<br/>navBarWidth < minNavBarWidth时，navBarWidth修正为minNavBarWidth;<br/>navBarWidth > maxNavBarWidth，且组件宽度 - minContentWidth - 分割线宽度(1vp) > maxNavBarWidth时，navBarWidth修正为maxNavBarWidth;<br/>navBarWidth > maxNavBarWidth，且组件宽度 - minContentWidth - 分割线宽度(1vp) < minNavBarWidth时，navBarWidth修正为minNavBarWidth;<br/>navBarWidth > maxNavBarWidth，且组件宽度 - minContentWidth - 分割线宽度(1vp)在navBarWidthRange范围内，navBarWidth修正为组件宽度 - 分割线宽度(1vp) - minContentWidth。<br/>2.当navBarWidth属性的值，在navBarWidthRange属性的值范围以内时，navBarWidth按如下规则显示：<br/>minNavBarWidth + minContentWidth + 分割线宽度(1vp) >= 组件宽度时，navBarWidth修正为minNavBarWidth；<br/>minNavBarWidth + minContentWidth + 分割线宽度(1vp) < 组件宽度，且navBarWidth + minContentWidth + 分割线宽度(1vp) >= 组件宽度时，navBarWidth修正为组件宽度 - 分割线宽度(1vp) - minContentWidth;<br/>minNavBarWidth + minContentWidth + 分割线宽度(1vp) < 组件宽度，且navBarWidth + minContentWidth + 分割线宽度(1vp) < 组件宽度时，navBarWidth为设置的值。<br/>3.缩小组件尺寸时，先缩小内容区的尺寸至minContentWidth，然后再缩小导航栏的尺寸至minNavBarWidth。若继续缩小，先缩小内容区，内容区消失后再缩小导航栏。<br/>4.设置导航栏为固定尺寸时，若持续缩小组件尺寸，导航栏最后压缩显示。<br/>5.若只设置了navBarWidth属性，则导航栏宽度为navBarWidth，且分割线不可拖动。 | 1600| Auto | API version 9之前：窗口宽度>=520vp时，采用Split模式显示；窗口宽度<520vp时，采用Stack模式显示。<br/>API version 10及以上：窗口宽度>=600vp时，采用Split模式显示；窗口宽度<600vp时，采用Stack模式显示，600vp等于minNavBarWidth(240vp) + minContentWidth (360vp)。 | 1601 1602## NavigationOperation<sup>11+</sup>枚举说明 1603 1604页面跳转类型。 1605 1606**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1607 1608**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1609 1610| 名称 | 值 | 说明 | 1611|---------| --- |------| 1612|PUSH | 1 | 本次转场为页面进场。| 1613|POP | 2 | 本次转场为页面退场。| 1614| REPLACE | 3 | 本次转场为页面替换。| 1615 1616## BarStyle<sup>12+</sup>枚举说明 1617 1618标题栏或工具栏的布局样式。NavDestination的工具栏不支持设置该属性。 1619 1620**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1621 1622| 名称 | 值 | 说明 | 1623|---------| --- |------| 1624|STANDARD | 0 | 指定该模式的标题栏或工具栏与内容区采用上下布局。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 1625|STACK | 1 | 指定该模式的标题栏或工具栏与内容区采用层叠布局，标题栏或工具栏布局在内容区上层。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 1626|SAFE_AREA_PADDING<sup>14+</sup> | 2 | 将指定该模式的标题栏或工具栏设置为[组件级安全区](./ts-universal-attributes-size.md#safeareapadding14)。<br/>**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。| 1627 1628## NavigationTitleOptions<sup>11+</sup> 1629 1630标题栏选项。 1631 1632**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1633 1634| 名称 | 类型 | 必填 | 说明 | 1635| ------ | ------------- | ---- | --------------- | 1636| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 标题栏背景颜色，不设置时为系统默认颜色。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 1637| backgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 否 | 标题栏背景模糊样式，不设置时关闭背景模糊效果。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 1638| barStyle<sup>12+</sup> | [BarStyle](#barstyle12枚举说明) | 否 | 设置标题栏布局方式。<br/>默认值：BarStyle.STANDARD<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 1639| paddingStart<sup>12+</sup> | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | 标题栏起始端内间距。<br/>仅支持以下任一场景：<br/>1. 显示返回图标，即[hideBackButton](#hidebackbutton)为false；<br/>2. 使用非自定义标题，即[标题value](#title)类型为ResourceStr或NavigationCommonTitle。<br/>默认值：<br/>LengthMetrics.resource(`$r('sys.float.margin_left')`)。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 1640| paddingEnd<sup>12+</sup> | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | 标题栏结束端内间距。<br/>仅支持以下任一场景：<br/>1. 使用非自定义菜单，即[菜单value](#menus)为Array<NavigationMenuItem>；<br/>2. 没有右上角菜单，且使用非自定义标题，即[标题value](#title)类型为ResourceStr或NavigationCommonTitle。<br/>默认值：<br/>LengthMetrics.resource(`$r('sys.float.margin_right')`)。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 1641| mainTitleModifier<sup>13+</sup> | [TextModifier](./ts-universal-attributes-attribute-modifier.md) | 否 | 主标题属性修改器。<br/>1. 通过Modifier设置的属性会覆盖系统默认的属性（如果Modifier设置了fontSize, maxFontSize, minFontSize任一属性，则系统设置的大小相关属性不生效，以开发者的设置为准）；<br/>2. 不设该属性或者设置了异常值，则恢复系统默认设置；<br/>3. [Free](#navigationtitlemode枚举说明)模式下设置字体大小时，原有滑动改变标题大小的效果失效。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 1642| subTitleModifier<sup>13+</sup> | [TextModifier](./ts-universal-attributes-attribute-modifier.md) | 否 | 子标题属性修改器。<br/>1. 通过Modifier设置的属性会覆盖系统默认的属性（如果Modifier设置了fontSize, maxFontSize, minFontSize任一属性，则系统设置的大小相关属性不生效，以开发者的设置为准）；<br/>2. 不设该属性或者设置了异常值，则恢复系统默认设置。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 1643| enableHoverMode<sup>13+</sup> | boolean | 否 | 是否响应悬停态。<br/>使用规则：<br/>1. 需满足Navigation为全屏大小；<br/>2. 标题栏显示模式为[Free](#navigationtitlemode枚举说明)时或者标题栏布局方式为[STANDARD](#barstyle12枚举说明)时，此接口设置无效。<br/>默认值：false。<br/>true：响应悬停态。<br/>false：不响应悬停态。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 1644 1645## NavigationToolbarOptions<sup>11+</sup> 1646 1647工具栏选项。 1648 1649**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1650 1651| 名称 | 类型 | 必填 | 说明 | 1652| ------ | ------------- | ---- | --------------- | 1653| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 工具栏背景颜色，不设置时为系统默认颜色。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 1654| backgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 否 | 工具栏背景模糊样式，不设置时关闭背景模糊效果。 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 1655| barStyle<sup>14+</sup> | [BarStyle](#barstyle12枚举说明) | 否 | 设置工具栏布局方式。<br/>**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 | 1656 1657## LaunchMode<sup>12+</sup>枚举说明 1658 1659页面栈操作模式。 1660 1661**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1662 1663**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1664 1665| 名称 | 值 | 说明 | 1666| --------- | --- | ------ | 1667| STANDARD | 0 | 系统默认的栈操作模式。<br/>push操作会将指定的NavDestination入栈；replace操作会将当前栈顶NavDestination替换。 | 1668| MOVE_TO_TOP_SINGLETON | 1 | 从栈底向栈顶查找，如果指定的名称已经存在，则将对应的NavDestination页面移到栈顶（replace操作会将最后的栈顶替换成指定的NavDestination），否则行为和STANDARD一致。 | 1669| POP_TO_SINGLETON | 2 | 从栈底向栈顶查找，如果指定的名称已经存在，则将其上方的NavDestination页面全部移除（replace操作会将最后的栈顶替换成指定的NavDestination），否则行为和STANDARD一致。 | 1670| NEW_INSTANCE | 3 | 创建新的NavDestination实例。与STANDARD模式相比，该方法不会复用栈中同名实例。 | 1671 1672## NavigationOptions<sup>12+</sup> 1673 1674页面栈操作选项。 1675 1676**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1677 1678**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1679 1680| 名称 | 类型 | 必填 | 说明 | 1681| ------ | ------------- | ---- | --------------- | 1682| launchMode | [LaunchMode](#launchmode12枚举说明) | 否 | 页面栈的操作模式。<br/>默认值：LaunchMode.STANDARD | 1683| animated | boolean | 否 | 是否支持转场动画。<br/>默认值：true。<br/>true：支持转场动画。<br/>false：不支持转场动画。 | 1684 1685## SystemBarStyle<sup>12+</sup> 1686 1687type SystemBarStyle = SystemBarStyle 1688 1689状态栏的属性。在设置页面级状态栏属性时使用。 1690 1691**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1692 1693**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1694 1695| 类型 | 说明 | 1696| -------- | ------------------ | 1697| [SystemBarStyle](../js-apis-window.md#systembarstyle12) | 状态栏文字颜色。默认值：`'#0xE5FFFFFF'`。| 1698 1699## 示例 1700 1701示例效果请以真机为准，系统路由表不支持预览器，跨平台以及模拟器。 1702 1703### 示例1（Navigation页面布局） 1704 1705该示例主要演示Navigation页面的布局包括标题栏(title)，菜单栏(menus)，内容区和工具栏(toolbarConfiguration)。 1706 1707```ts 1708// xxx.ets 1709class A { 1710 text: string = ''; 1711 num: number = 0; 1712} 1713 1714@Entry 1715@Component 1716struct NavigationExample { 1717 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; 1718 @State currentIndex: number = 0; 1719 1720 @Builder 1721 NavigationTitle() { 1722 Column() { 1723 Text('Title') 1724 .fontColor('#182431') 1725 .fontSize(30) 1726 .lineHeight(41) 1727 .fontWeight(700) 1728 Text('subtitle') 1729 .fontColor('#182431') 1730 .fontSize(14) 1731 .lineHeight(19) 1732 .opacity(0.4) 1733 .margin({ top: 2, bottom: 20 }) 1734 }.alignItems(HorizontalAlign.Start) 1735 } 1736 1737 @Builder 1738 NavigationMenus() { 1739 Row() { 1740 Image('resources/base/media/ic_public_add.svg') 1741 .width(24) 1742 .height(24) 1743 Image('resources/base/media/ic_public_add.svg') 1744 .width(24) 1745 .height(24) 1746 .margin({ left: 24 }) 1747 Image('common/ic_public_more.svg') 1748 .width(24) 1749 .height(24) 1750 .margin({ left: 24 }) 1751 } 1752 } 1753 1754 build() { 1755 Column() { 1756 Navigation() { 1757 TextInput({ placeholder: 'search...' }) 1758 .width('90%') 1759 .height(40) 1760 .backgroundColor('#FFFFFF') 1761 .margin({ top: 8 }) 1762 1763 List({ space: 12, initialIndex: 0 }) { 1764 ForEach(this.arr, (item: number) => { 1765 ListItem() { 1766 Text('' + item) 1767 .width('90%') 1768 .height(72) 1769 .backgroundColor('#FFFFFF') 1770 .borderRadius(24) 1771 .fontSize(16) 1772 .fontWeight(500) 1773 .textAlign(TextAlign.Center) 1774 } 1775 }, (item: number) => item.toString()) 1776 } 1777 .height(324) 1778 .width('100%') 1779 .margin({ top: 12, left: '10%' }) 1780 } 1781 .title(this.NavigationTitle) 1782 .menus(this.NavigationMenus) 1783 .titleMode(NavigationTitleMode.Full) 1784 .toolbarConfiguration([ 1785 { 1786 value: $r("app.string.navigation_toolbar_add"), 1787 icon: $r("app.media.ic_public_highlightsed") 1788 }, 1789 { 1790 value: $r("app.string.navigation_toolbar_app"), 1791 icon: $r("app.media.ic_public_highlights") 1792 }, 1793 { 1794 value: $r("app.string.navigation_toolbar_collect"), 1795 icon: $r("app.media.ic_public_highlights") 1796 } 1797 ]) 1798 .hideTitleBar(false) 1799 .hideToolBar(false) 1800 .onTitleModeChange((titleModel: NavigationTitleMode) => { 1801 console.info('titleMode' + titleModel) 1802 }) 1803 }.width('100%').height('100%').backgroundColor('#F1F3F5') 1804 } 1805} 1806``` 1807 1808 1809 1810 1811 1812### 示例2（使用路由栈方法） 1813 1814该示例主要演示NavPathStack中方法的使用及路由拦截。 1815 1816```ts 1817// Index.ets 1818@Entry 1819@Component 1820struct NavigationExample { 1821 pageInfos: NavPathStack = new NavPathStack(); 1822 isUseInterception: boolean = false; 1823 1824 registerInterception() { 1825 this.pageInfos.setInterception({ 1826 // 页面跳转前拦截，允许操作栈，在当前跳转中生效。 1827 willShow: (from: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar", 1828 operation: NavigationOperation, animated: boolean) => { 1829 if (!this.isUseInterception) { 1830 return; 1831 } 1832 if (typeof to === "string") { 1833 console.log("target page is navigation home"); 1834 return; 1835 } 1836 // 重定向目标页面，更改为pageTwo页面到pageOne页面。 1837 let target: NavDestinationContext = to as NavDestinationContext; 1838 if (target.pathInfo.name === 'pageTwo') { 1839 target.pathStack.pop(); 1840 target.pathStack.pushPathByName('pageOne', null); 1841 } 1842 }, 1843 // 页面跳转后回调，在该回调中操作栈在下一次跳转中刷新。 1844 didShow: (from: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar", 1845 operation: NavigationOperation, isAnimated: boolean) => { 1846 if (!this.isUseInterception) { 1847 return; 1848 } 1849 if (typeof from === "string") { 1850 console.log("current transition is from navigation home"); 1851 } else { 1852 console.log(`current transition is from ${(from as NavDestinationContext).pathInfo.name}`); 1853 } 1854 if (typeof to === "string") { 1855 console.log("current transition to is navBar"); 1856 } else { 1857 console.log(`current transition is to ${(to as NavDestinationContext).pathInfo.name}`); 1858 } 1859 }, 1860 // Navigation单双栏显示状态发生变更时触发该回调。 1861 modeChange: (mode: NavigationMode) => { 1862 if (!this.isUseInterception) { 1863 return; 1864 } 1865 console.log(`current navigation mode is ${mode}`); 1866 } 1867 }) 1868 } 1869 1870 build() { 1871 Navigation(this.pageInfos) { 1872 Column() { 1873 Button('pushPath', { stateEffect: true, type: ButtonType.Capsule }) 1874 .width('80%') 1875 .height(40) 1876 .margin(20) 1877 .onClick(() => { 1878 this.pageInfos.pushPath({ name: 'pageOne' }); //将name指定的NavDestination页面信息入栈 1879 }) 1880 Button('use interception', { stateEffect: true, type: ButtonType.Capsule }) 1881 .width('80%') 1882 .height(40) 1883 .margin(20) 1884 .onClick(() => { 1885 this.isUseInterception = !this.isUseInterception; 1886 if (this.isUseInterception) { 1887 this.registerInterception(); 1888 } else { 1889 this.pageInfos.setInterception(undefined); 1890 } 1891 }) 1892 } 1893 }.title('NavIndex') 1894 } 1895} 1896``` 1897```ts 1898// PageOne.ets 1899class TmpClass { 1900 count: number = 10; 1901} 1902 1903@Builder 1904export function PageOneBuilder(name: string, param: Object) { 1905 PageOne() 1906} 1907 1908@Component 1909export struct PageOne { 1910 pageInfos: NavPathStack = new NavPathStack(); 1911 1912 build() { 1913 NavDestination() { 1914 Column() { 1915 Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule }) 1916 .width('80%') 1917 .height(40) 1918 .margin(20) 1919 .onClick(() => { 1920 let tmp = new TmpClass(); 1921 this.pageInfos.pushPathByName('pageTwo', tmp); //将name指定的NavDestination页面信息入栈，传递的数据为param 1922 }) 1923 Button('singletonLaunchMode', { stateEffect: true, type: ButtonType.Capsule }) 1924 .width('80%') 1925 .height(40) 1926 .margin(20) 1927 .onClick(() => { 1928 this.pageInfos.pushPath({ name: 'pageOne' }, 1929 { launchMode: LaunchMode.MOVE_TO_TOP_SINGLETON }); //从栈底向栈顶查找，如果指定的名称已经存在，则将对应的NavDestination页面移到栈顶 1930 }) 1931 Button('popToname', { stateEffect: true, type: ButtonType.Capsule }) 1932 .width('80%') 1933 .height(40) 1934 .margin(20) 1935 .onClick(() => { 1936 this.pageInfos.popToName('pageTwo'); //回退路由栈到第一个名为name的NavDestination页面 1937 console.log('popToName' + JSON.stringify(this.pageInfos), 1938 '返回值' + JSON.stringify(this.pageInfos.popToName('pageTwo'))); 1939 }) 1940 Button('popToIndex', { stateEffect: true, type: ButtonType.Capsule }) 1941 .width('80%') 1942 .height(40) 1943 .margin(20) 1944 .onClick(() => { 1945 this.pageInfos.popToIndex(1); // 回退路由栈到index指定的NavDestination页面 1946 console.log('popToIndex' + JSON.stringify(this.pageInfos)); 1947 }) 1948 Button('moveToTop', { stateEffect: true, type: ButtonType.Capsule }) 1949 .width('80%') 1950 .height(40) 1951 .margin(20) 1952 .onClick(() => { 1953 this.pageInfos.moveToTop('pageTwo'); // 将第一个名为name的NavDestination页面移到栈顶 1954 console.log('moveToTop' + JSON.stringify(this.pageInfos), 1955 '返回值' + JSON.stringify(this.pageInfos.moveToTop('pageTwo'))); 1956 }) 1957 Button('moveIndexToTop', { stateEffect: true, type: ButtonType.Capsule }) 1958 .width('80%') 1959 .height(40) 1960 .margin(20) 1961 .onClick(() => { 1962 this.pageInfos.moveIndexToTop(1); // 将index指定的NavDestination页面移到栈顶 1963 console.log('moveIndexToTop' + JSON.stringify(this.pageInfos)); 1964 }) 1965 Button('clear', { stateEffect: true, type: ButtonType.Capsule }) 1966 .width('80%') 1967 .height(40) 1968 .margin(20) 1969 .onClick(() => { 1970 this.pageInfos.clear(); //清除栈中所有页面 1971 }) 1972 Button('get', { stateEffect: true, type: ButtonType.Capsule }) 1973 .width('80%') 1974 .height(40) 1975 .margin(20) 1976 .onClick(() => { 1977 console.log('-------------------'); 1978 console.log('获取栈中所有NavDestination页面的名称', JSON.stringify(this.pageInfos.getAllPathName())); 1979 console.log('获取index指定的NavDestination页面的参数信息', 1980 JSON.stringify(this.pageInfos.getParamByIndex(1))); 1981 console.log('获取全部名为name的NavDestination页面的参数信息', 1982 JSON.stringify(this.pageInfos.getParamByName('pageTwo'))); 1983 console.log('获取全部名为name的NavDestination页面的位置索引', 1984 JSON.stringify(this.pageInfos.getIndexByName('pageOne'))); 1985 console.log('获取栈大小', JSON.stringify(this.pageInfos.size())); 1986 }) 1987 }.width('100%').height('100%') 1988 }.title('pageOne') 1989 .onBackPressed(() => { 1990 const popDestinationInfo = this.pageInfos.pop(); // 弹出路由栈栈顶元素 1991 console.log('pop' + '返回值' + JSON.stringify(popDestinationInfo)); 1992 return true; 1993 }).onReady((context: NavDestinationContext) => { 1994 this.pageInfos = context.pathStack; 1995 }) 1996 } 1997} 1998``` 1999```ts 2000// PageTwo.ets 2001@Builder 2002export function PageTwoBuilder(name: string, param: Object) { 2003 PageTwo() 2004} 2005 2006@Component 2007export struct PageTwo { 2008 pathStack: NavPathStack = new NavPathStack(); 2009 private menuItems: Array<NavigationMenuItem> = [ 2010 { 2011 value: "1", 2012 icon: 'resources/base/media/undo.svg', 2013 }, 2014 { 2015 value: "2", 2016 icon: 'resources/base/media/redo.svg', 2017 isEnabled: false, 2018 }, 2019 { 2020 value: "3", 2021 icon: 'resources/base/media/ic_public_ok.svg', 2022 isEnabled: true, 2023 } 2024 ]; 2025 2026 build() { 2027 NavDestination() { 2028 Column() { 2029 Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule }) 2030 .width('80%') 2031 .height(40) 2032 .margin(20) 2033 .onClick(() => { 2034 this.pathStack.pushPathByName('pageOne', null); 2035 }) 2036 }.width('100%').height('100%') 2037 }.title('pageTwo') 2038 .menus(this.menuItems) 2039 .onBackPressed(() => { 2040 this.pathStack.pop(); 2041 return true; 2042 }) 2043 .onReady((context: NavDestinationContext) => { 2044 this.pathStack = context.pathStack; 2045 console.log("current page config info is " + JSON.stringify(context.getConfigInRouteMap())); 2046 }) 2047 } 2048} 2049``` 2050 2051```json 2052// 工程配置文件module.json5中配置 {"routerMap": "$profile:route_map"} 2053// route_map.json 2054{ 2055 "routerMap": [ 2056 { 2057 "name": "pageOne", 2058 "pageSourceFile": "src/main/ets/pages/PageOne.ets", 2059 "buildFunction": "PageOneBuilder", 2060 "data": { 2061 "description": "this is pageOne" 2062 } 2063 }, 2064 { 2065 "name": "pageTwo", 2066 "pageSourceFile": "src/main/ets/pages/PageTwo.ets", 2067 "buildFunction": "PageTwoBuilder" 2068 } 2069 ] 2070} 2071``` 2072 2073 2074### 示例3（设置可交互转场动画） 2075 2076该示例主要演示设置每个NavDestination子页面的自定义转场动画及可交互转场动画。 2077 2078<!--code_no_check--> 2079```ts 2080// Index.ets 2081import { CustomTransition, AnimateCallback } from './CustomNavigationUtils' 2082 2083@Entry 2084@Component 2085struct NavigationExample { 2086 pageInfos: NavPathStack = new NavPathStack(); 2087 2088 aboutToAppear() { 2089 if (this.pageInfos === undefined) { 2090 this.pageInfos = new NavPathStack(); 2091 } 2092 this.pageInfos.pushPath({ name: 'pageOne', param: CustomTransition.getInstance().getAnimationId() }); 2093 } 2094 2095 build() { 2096 Navigation(this.pageInfos) { 2097 } 2098 .title('NavIndex') 2099 .hideNavBar(true) 2100 .customNavContentTransition((from: NavContentInfo, to: NavContentInfo, operation: NavigationOperation) => { 2101 if (from.mode == NavDestinationMode.DIALOG || to.mode == NavDestinationMode.DIALOG) { 2102 return undefined; 2103 } 2104 2105 // 首页不进行自定义动画 2106 if (from.index === -1 || to.index === -1) { 2107 return undefined; 2108 } 2109 2110 CustomTransition.getInstance().operation = operation; 2111 if (CustomTransition.getInstance().interactive) { 2112 let customAnimation: NavigationAnimatedTransition = { 2113 onTransitionEnd: (isSuccess: boolean) => { 2114 console.log("===== current transition is " + isSuccess); 2115 CustomTransition.getInstance().recoverState(); 2116 CustomTransition.getInstance().proxy = undefined; 2117 }, 2118 transition: (transitionProxy: NavigationTransitionProxy) => { 2119 CustomTransition.getInstance().proxy = transitionProxy; 2120 let targetIndex: string | undefined = operation == NavigationOperation.PUSH ? 2121 (to.navDestinationId) : (from.navDestinationId); 2122 if (targetIndex) { 2123 CustomTransition.getInstance().fireInteractiveAnimation(targetIndex, operation); 2124 } 2125 }, 2126 isInteractive: CustomTransition.getInstance().interactive 2127 } 2128 return customAnimation; 2129 } 2130 let customAnimation: NavigationAnimatedTransition = { 2131 onTransitionEnd: (isSuccess: boolean) => { 2132 console.log(`current transition result is ${isSuccess}`); 2133 }, 2134 timeout: 7000, 2135 // 转场开始时系统调用该方法，并传入转场上下文代理对象 2136 transition: (transitionProxy: NavigationTransitionProxy) => { 2137 if (!from.navDestinationId || !to.navDestinationId) { 2138 return; 2139 } 2140 // 从封装类CustomTransition中根据子页面的序列获取对应的转场动画回调 2141 let fromParam: AnimateCallback = CustomTransition.getInstance().getAnimateParam(from.navDestinationId); 2142 let toParam: AnimateCallback = CustomTransition.getInstance().getAnimateParam(to.navDestinationId); 2143 if (operation == NavigationOperation.PUSH) { 2144 if (toParam.start) { 2145 toParam.start(true, false); 2146 } 2147 this.getUIContext()?.animateTo({ 2148 duration: 500, onFinish: () => { 2149 transitionProxy.finishTransition(); 2150 } 2151 }, () => { 2152 if (toParam.finish) { 2153 toParam.finish(true, false); 2154 } 2155 }) 2156 } else { 2157 if (fromParam.start) { 2158 fromParam.start(true, true); 2159 } 2160 this.getUIContext()?.animateTo({ 2161 duration: 500, onFinish: () => { 2162 transitionProxy.finishTransition(); 2163 } 2164 }, () => { 2165 if (fromParam.finish) { 2166 fromParam.finish(true, true); 2167 } 2168 }) 2169 } 2170 } 2171 }; 2172 return customAnimation; 2173 }) 2174 } 2175} 2176``` 2177 2178<!--code_no_check--> 2179```ts 2180// PageOne.ets 2181import { CustomTransition } from './CustomNavigationUtils'; 2182 2183@Builder 2184export function PageOneBuilder(name: string, param: Object) { 2185 PageOne() 2186} 2187 2188@Component 2189export struct PageOne { 2190 pageInfos: NavPathStack = new NavPathStack(); 2191 @State translateX: string = '0'; 2192 pageId: string = ''; 2193 rectWidth: number = 0; 2194 interactive: boolean = false; 2195 2196 registerCallback() { 2197 CustomTransition.getInstance().registerNavParam(this.pageId, (isPush: boolean, isExit: boolean) => { 2198 if (isPush) { 2199 this.translateX = '100%'; 2200 } else { 2201 this.translateX = '0'; 2202 } 2203 }, (isPush: boolean, isExit: boolean) => { 2204 if (isPush) { 2205 this.translateX = '0'; 2206 } else { 2207 this.translateX = '100%'; 2208 } 2209 }, (isPush: boolean, isExit: boolean) => { 2210 this.translateX = '0'; 2211 }, (operation: NavigationOperation) => { 2212 if (operation == NavigationOperation.PUSH) { 2213 this.translateX = '100%'; 2214 this.getUIContext()?.animateTo({ 2215 duration: 1000, 2216 onFinish: () => { 2217 this.translateX = '0'; 2218 } 2219 }, () => { 2220 this.translateX = '0'; 2221 }) 2222 } else { 2223 this.translateX = '0'; 2224 this.getUIContext()?.animateTo({ 2225 duration: 1000, 2226 onFinish: () => { 2227 this.translateX = '0'; 2228 } 2229 }, () => { 2230 this.translateX = '100%'; 2231 }) 2232 } 2233 }, 200); 2234 } 2235 2236 build() { 2237 NavDestination() { 2238 Column() { 2239 Button(`setInteractive`) 2240 .onClick(() => { 2241 CustomTransition.getInstance().interactive = !CustomTransition.getInstance().interactive; 2242 this.interactive = CustomTransition.getInstance().interactive; 2243 }) 2244 2245 Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule }) 2246 .width('80%') 2247 .height(40) 2248 .margin(20) 2249 .onClick(() => { 2250 //将name指定的NavDestination页面信息入栈，传递的数据为param 2251 this.pageInfos.pushDestinationByName('pageTwo', CustomTransition.getInstance().getAnimationId()); 2252 }) 2253 } 2254 .size({ width: '100%', height: '100%' }) 2255 } 2256 .title('pageOne') 2257 .onDisAppear(() => { 2258 CustomTransition.getInstance().unRegisterNavParam(this.pageId); 2259 }) 2260 .onReady((context: NavDestinationContext) => { 2261 this.pageInfos = context.pathStack; 2262 if (context.navDestinationId) { 2263 this.pageId = context.navDestinationId; 2264 this.registerCallback(); 2265 } 2266 }) 2267 .translate({ x: this.translateX }) 2268 .backgroundColor('#F1F3F5') 2269 .gesture(PanGesture() 2270 .onActionStart((event: GestureEvent) => { 2271 this.rectWidth = event.target.area.width as number; 2272 if (event.offsetX < 0) { 2273 this.pageInfos.pushPath({ name: 'pageTwo', param: CustomTransition.getInstance().getAnimationId() }); 2274 } else { 2275 this.pageInfos.pop(); 2276 } 2277 }) 2278 .onActionUpdate((event: GestureEvent) => { 2279 let rate = event.fingerList[0].localX / this.rectWidth; 2280 CustomTransition.getInstance().updateProgress(rate); 2281 }) 2282 .onActionEnd((event: GestureEvent) => { 2283 let rate: number = event.fingerList[0].localX / this.rectWidth; 2284 CustomTransition.getInstance().finishInteractiveAnimation(rate); 2285 })) 2286 } 2287} 2288``` 2289<!--code_no_check--> 2290```ts 2291// PageTwo.ets 2292import { CustomTransition } from './CustomNavigationUtils' 2293 2294@Builder 2295export function PageTwoBuilder(name: string, param: Object) { 2296 PageTwo({ param: param as number }) 2297} 2298 2299@Component 2300export struct PageTwo { 2301 pageInfos: NavPathStack = new NavPathStack(); 2302 @State translateX: string = '0'; 2303 pageId: string = ''; 2304 rectWidth: number = 0; 2305 param: number = 0; 2306 2307 registerCallback() { 2308 CustomTransition.getInstance().registerNavParam(this.pageId, (isPush: boolean, isExit: boolean) => { 2309 if (isPush) { 2310 this.translateX = '100%' 2311 } else { 2312 this.translateX = '0'; 2313 } 2314 }, (isPush: boolean, isExit: boolean) => { 2315 if (isPush) { 2316 this.translateX = '0'; 2317 } else { 2318 this.translateX = '100%'; 2319 } 2320 }, (isPush: boolean, isExit: boolean) => { 2321 this.translateX = '0'; 2322 }, (operation: NavigationOperation) => { 2323 if (operation == NavigationOperation.PUSH) { 2324 this.translateX = '100%'; 2325 this.getUIContext()?.animateTo({ 2326 duration: 500, onFinish: () => { 2327 this.translateX = '0'; 2328 } 2329 }, () => { 2330 this.translateX = '0'; 2331 }) 2332 } else { 2333 this.translateX = '0'; 2334 this.getUIContext()?.animateTo({ 2335 duration: 500, onFinish: () => { 2336 this.translateX = "0"; 2337 } 2338 }, () => { 2339 this.translateX = '100%'; 2340 }) 2341 } 2342 }, 2000) 2343 } 2344 2345 build() { 2346 NavDestination() { 2347 Column() { 2348 Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule }) 2349 .width('80%') 2350 .height(40) 2351 .margin(20) 2352 .onClick(() => { 2353 //将name指定的NavDestination页面信息入栈，传递的数据为param 2354 this.pageInfos.pushPath({ name: 'pageOne', param: CustomTransition.getInstance().getAnimationId() }); 2355 }) 2356 } 2357 .size({ width: '100%', height: '100%' }) 2358 } 2359 .title('pageTwo') 2360 .gesture(PanGesture() 2361 .onActionStart((event: GestureEvent) => { 2362 this.rectWidth = event.target.area.width as number; 2363 if (event.offsetX < 0) { 2364 this.pageInfos.pushPath({ name: 'pageOne', param: CustomTransition.getInstance().getAnimationId() }); 2365 } else { 2366 this.pageInfos.pop(); 2367 } 2368 }) 2369 .onActionUpdate((event: GestureEvent) => { 2370 let rate = event.fingerList[0].localX / this.rectWidth; 2371 CustomTransition.getInstance().updateProgress(rate); 2372 }) 2373 .onActionEnd((event: GestureEvent) => { 2374 let rate = event.fingerList[0].localX / this.rectWidth; 2375 CustomTransition.getInstance().finishInteractiveAnimation(rate); 2376 })) 2377 .onAppear(() => { 2378 this.registerCallback(); 2379 }) 2380 .onDisAppear(() => { 2381 CustomTransition.getInstance().unRegisterNavParam(this.pageId); 2382 }) 2383 .onReady((context: NavDestinationContext) => { 2384 this.pageInfos = context.pathStack; 2385 if (context.navDestinationId) { 2386 this.pageId = context.navDestinationId; 2387 this.registerCallback(); 2388 } 2389 }) 2390 .translate({ x: this.translateX }) 2391 .backgroundColor(Color.Yellow) 2392 } 2393} 2394``` 2395```ts 2396// CustomNavigationUtils.ets 2397// 自定义接口，用来保存某个页面相关的转场动画回调和参数 2398export interface AnimateCallback { 2399 finish: ((isPush: boolean, isExit: boolean) => void | undefined) | undefined; 2400 start: ((isPush: boolean, isExit: boolean) => void | undefined) | undefined; 2401 onFinish: ((isPush: boolean, isExit: boolean) => void | undefined) | undefined; 2402 interactive: ((operation: NavigationOperation) => void | undefined) | undefined; 2403 timeout: (number | undefined) | undefined; 2404} 2405 2406const customTransitionMap: Map<string, AnimateCallback> = new Map(); 2407 2408export class CustomTransition { 2409 static delegate = new CustomTransition(); 2410 interactive: boolean = false; 2411 proxy: NavigationTransitionProxy | undefined = undefined; 2412 private animationId: number = 0; 2413 operation: NavigationOperation = NavigationOperation.PUSH; 2414 2415 static getInstance() { 2416 return CustomTransition.delegate; 2417 } 2418 2419 /* 注册某个页面的动画回调 2420 * name: 注册页面的唯一id 2421 * startCallback：用来设置动画开始时页面的状态 2422 * endCallback：用来设置动画结束时页面的状态 2423 * onFinish：用来执行动画结束后页面的其他操作 2424 * interactiveCallback: 注册的可交互转场的动效 2425 * timeout：转场结束的超时时间 2426 */ 2427 registerNavParam(name: string, startCallback: (operation: boolean, isExit: boolean) => void, 2428 endCallback: (operation: boolean, isExit: boolean) => void, 2429 onFinish: (operation: boolean, isExit: boolean) => void, 2430 interactiveCallback: (operation: NavigationOperation) => void, 2431 timeout: number): void { 2432 if (customTransitionMap.has(name)) { 2433 let param = customTransitionMap.get(name); 2434 if (param != undefined) { 2435 param.start = startCallback; 2436 param.finish = endCallback; 2437 param.timeout = timeout; 2438 param.onFinish = onFinish; 2439 param.interactive = interactiveCallback; 2440 return; 2441 } 2442 } 2443 let params: AnimateCallback = { 2444 timeout: timeout, 2445 start: startCallback, 2446 finish: endCallback, 2447 onFinish: onFinish, 2448 interactive: interactiveCallback 2449 }; 2450 customTransitionMap.set(name, params); 2451 } 2452 2453 getAnimationId() { 2454 return Date.now(); 2455 } 2456 2457 unRegisterNavParam(name: string): void { 2458 customTransitionMap.delete(name); 2459 } 2460 2461 fireInteractiveAnimation(id: string, operation: NavigationOperation) { 2462 let animation = customTransitionMap.get(id)?.interactive; 2463 if (!animation) { 2464 return; 2465 } 2466 animation(operation); 2467 } 2468 2469 updateProgress(progress: number) { 2470 if (!this.proxy?.updateTransition) { 2471 return; 2472 } 2473 progress = this.operation == NavigationOperation.PUSH ? 1 - progress : progress; 2474 this.proxy?.updateTransition(progress); 2475 } 2476 2477 cancelTransition() { 2478 if (this.proxy?.cancelTransition) { 2479 this.proxy.cancelTransition(); 2480 } 2481 } 2482 2483 recoverState() { 2484 if (!this.proxy?.from.navDestinationId || !this.proxy?.to.navDestinationId) { 2485 return; 2486 } 2487 let fromParam = customTransitionMap.get(this.proxy.from.navDestinationId); 2488 if (fromParam?.onFinish) { 2489 fromParam.onFinish(false, false); 2490 } 2491 let toParam = customTransitionMap.get(this.proxy?.to.navDestinationId); 2492 if (toParam?.onFinish) { 2493 toParam.onFinish(true, true); 2494 } 2495 } 2496 2497 finishTransition() { 2498 this.proxy?.finishTransition(); 2499 } 2500 2501 finishInteractiveAnimation(rate: number) { 2502 if (this.operation == NavigationOperation.PUSH) { 2503 if (rate > 0.5) { 2504 if (this.proxy?.cancelTransition) { 2505 this.proxy.cancelTransition(); 2506 } 2507 } else { 2508 this.proxy?.finishTransition(); 2509 } 2510 } else { 2511 if (rate > 0.5) { 2512 this.proxy?.finishTransition(); 2513 } else { 2514 if (this.proxy?.cancelTransition) { 2515 this.proxy.cancelTransition(); 2516 } 2517 } 2518 } 2519 } 2520 2521 getAnimateParam(name: string): AnimateCallback { 2522 let result: AnimateCallback = { 2523 start: customTransitionMap.get(name)?.start, 2524 finish: customTransitionMap.get(name)?.finish, 2525 timeout: customTransitionMap.get(name)?.timeout, 2526 onFinish: customTransitionMap.get(name)?.onFinish, 2527 interactive: customTransitionMap.get(name)?.interactive, 2528 }; 2529 return result; 2530 } 2531} 2532``` 2533```json 2534// 工程配置文件module.json5中配置 {"routerMap": "$profile:route_map"} 2535// route_map.json 2536{ 2537 "routerMap": [ 2538 { 2539 "name": "pageOne", 2540 "pageSourceFile": "src/main/ets/pages/PageOne.ets", 2541 "buildFunction": "PageOneBuilder", 2542 "data": { 2543 "description": "this is pageOne" 2544 } 2545 }, 2546 { 2547 "name": "pageTwo", 2548 "pageSourceFile": "src/main/ets/pages/PageTwo.ets", 2549 "buildFunction": "PageTwoBuilder" 2550 } 2551 ] 2552} 2553``` 2554 2555 2556### 示例4（Navigation带参返回） 2557 2558该示例主要演示Navigation通过NavPathStack提供的接口来实现将设置的参数传给上一级页面。 2559 2560```ts 2561// Index.ets 2562@Entry 2563@Component 2564struct NavigationExample { 2565 pageInfo: NavPathStack = new NavPathStack(); 2566 2567 build() { 2568 Navigation(this.pageInfo) { 2569 Column() { 2570 Button('StartTest', { stateEffect: true, type: ButtonType.Capsule }) 2571 .width('80%') 2572 .height(40) 2573 .margin(20) 2574 .onClick(() => { 2575 this.pageInfo.pushPath({ name: 'pageOne' }); // 将name指定的NavDestination页面信息入栈。 2576 }) 2577 } 2578 }.title('NavIndex') 2579 } 2580} 2581``` 2582```ts 2583// PageOne.ets 2584import { BusinessError } from '@kit.BasicServicesKit'; 2585 2586class TmpClass { 2587 count: number = 10; 2588} 2589 2590class ParamWithOp { 2591 operation: number = 1; 2592 count: number = 10; 2593} 2594 2595@Builder 2596export function PageOneBuilder(name: string, param: Object) { 2597 PageOne() 2598} 2599 2600@Component 2601export struct PageOne { 2602 pageInfo: NavPathStack = new NavPathStack(); 2603 @State message: string = 'Hello World'; 2604 2605 build() { 2606 NavDestination() { 2607 Column() { 2608 Text(this.message) 2609 .width('80%') 2610 .height(50) 2611 .margin(10) 2612 2613 Button('pushPath', { stateEffect: true, type: ButtonType.Capsule }) 2614 .width('80%') 2615 .height(40) 2616 .margin(10) 2617 .onClick(() => { 2618 this.pageInfo.pushPath({ 2619 name: 'pageTwo', param: new ParamWithOp(), onPop: (popInfo: PopInfo) => { 2620 this.message = 2621 '[pushPath]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result); 2622 } 2623 }); // 将name指定的NavDestination页面信息入栈，传递的数据为param，添加接收处理结果的onPop回调。 2624 }) 2625 2626 Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule }) 2627 .width('80%') 2628 .height(40) 2629 .margin(10) 2630 .onClick(() => { 2631 let tmp = new TmpClass(); 2632 this.pageInfo.pushPathByName('pageTwo', tmp, (popInfo) => { 2633 this.message = 2634 '[pushPathByName]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result); 2635 }); // 将name指定的NavDestination页面信息入栈，传递的数据为param，添加接收处理结果的onPop回调。 2636 }) 2637 2638 Button('pushDestination', { stateEffect: true, type: ButtonType.Capsule }) 2639 .width('80%') 2640 .height(40) 2641 .margin(10) 2642 .onClick(() => { 2643 let tmp = new TmpClass(); 2644 // 将name指定的NavDestination页面信息入栈，传递的数据为param，添加接收处理结果的onPop回调。 2645 this.pageInfo.pushDestination({ 2646 name: 'pageTwo', param: new ParamWithOp(), onPop: (popInfo: PopInfo) => { 2647 this.message = 2648 '[pushDestination]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result); 2649 } 2650 }).catch((error: BusinessError) => { 2651 console.error(`[pushDestination]failed, error code = ${error.code}, error.message = ${error.message}.`); 2652 }).then(() => { 2653 console.error('[pushDestination]success.'); 2654 }); 2655 }) 2656 2657 Button('pushDestinationByName', { stateEffect: true, type: ButtonType.Capsule }) 2658 .width('80%') 2659 .height(40) 2660 .margin(10) 2661 .onClick(() => { 2662 let tmp = new TmpClass(); 2663 // 将name指定的NavDestination页面信息入栈，传递的数据为param，添加接收处理结果的onPop回调。 2664 this.pageInfo.pushDestinationByName('pageTwo', tmp, (popInfo) => { 2665 this.message = '[pushDestinationByName]last page is: ' + popInfo.info.name + ', result: ' + 2666 JSON.stringify(popInfo.result); 2667 }).catch((error: BusinessError) => { 2668 console.error(`[pushDestinationByName]failed, error code = ${error.code}, error.message = ${error.message}.`); 2669 }).then(() => { 2670 console.error('[pushDestinationByName]success.'); 2671 }); 2672 }) 2673 2674 Button('pushPathWithoutOnPop', { stateEffect: true, type: ButtonType.Capsule }) 2675 .width('80%') 2676 .height(40) 2677 .margin(10) 2678 .onClick(() => { 2679 this.pageInfo.pushPath({ name: 'pageTwo', param: new ParamWithOp() }); // 将name指定的NavDestination页面信息入栈。 2680 }) 2681 2682 Button('pushPathByNameWithoutOnPop', { stateEffect: true, type: ButtonType.Capsule }) 2683 .width('80%') 2684 .height(40) 2685 .margin(10) 2686 .onClick(() => { 2687 let tmp = new TmpClass(); 2688 this.pageInfo.pushPathByName('pageTwo', tmp); // 将name指定的NavDestination页面信息入栈，传递的数据为param。 2689 }) 2690 2691 Button('pushDestinationWithoutOnPop', { stateEffect: true, type: ButtonType.Capsule }) 2692 .width('80%') 2693 .height(40) 2694 .margin(10) 2695 .onClick(() => { 2696 let tmp = new TmpClass(); 2697 // 将name指定的NavDestination页面信息入栈，传递的数据为param，添加接收处理结果的onPop回调。 2698 this.pageInfo.pushDestination({ name: 'pageTwo', param: new ParamWithOp() }) 2699 .catch((error: BusinessError) => { 2700 console.error(`[pushDestinationWithoutOnPop]failed, error code = ${error.code}, error.message = ${error.message}.`); 2701 }).then(() => { 2702 console.error('[pushDestinationWithoutOnPop]success.'); 2703 }); 2704 }) 2705 2706 Button('pushDestinationByNameWithoutOnPop', { stateEffect: true, type: ButtonType.Capsule }) 2707 .width('80%') 2708 .height(40) 2709 .margin(10) 2710 .onClick(() => { 2711 let tmp = new TmpClass(); 2712 // 将name指定的NavDestination页面信息入栈，传递的数据为param。 2713 this.pageInfo.pushDestinationByName('pageTwo', tmp) 2714 .catch((error: BusinessError) => { 2715 console.error(`[pushDestinationByNameWithoutOnPop]failed, error code = ${error.code}, error.message = ${error.message}.`); 2716 }).then(() => { 2717 console.error('[pushDestinationByNameWithoutOnPop]success.'); 2718 }); 2719 }) 2720 2721 Button('clear', { stateEffect: true, type: ButtonType.Capsule }) 2722 .width('80%') 2723 .height(40) 2724 .margin(10) 2725 .onClick(() => { 2726 this.pageInfo.clear(); // 清除栈中所有页面。 2727 }) 2728 }.width('100%').height('100%') 2729 }.title('pageOne') 2730 .onBackPressed(() => { 2731 this.pageInfo.pop({ number: 1 }); // 弹出路由栈栈顶元素。 2732 return true; 2733 }).onReady((context: NavDestinationContext) => { 2734 this.pageInfo = context.pathStack; 2735 }) 2736 } 2737} 2738``` 2739```ts 2740// PageTwo.ets 2741class resultClass { 2742 constructor(count: number) { 2743 this.count = count; 2744 } 2745 2746 count: number = 10; 2747} 2748 2749@Builder 2750export function PageTwoBuilder() { 2751 PageTwo(); 2752} 2753 2754@Component 2755export struct PageTwo { 2756 pathStack: NavPathStack = new NavPathStack(); 2757 2758 build() { 2759 NavDestination() { 2760 Column() { 2761 Button('pop', { stateEffect: true, type: ButtonType.Capsule }) 2762 .width('80%') 2763 .height(40) 2764 .margin(20) 2765 .onClick(() => { 2766 this.pathStack.pop(new resultClass(1)); // 回退到上一个页面，将处理结果传入push的onPop回调中。 2767 }) 2768 2769 Button('popToName', { stateEffect: true, type: ButtonType.Capsule }) 2770 .width('80%') 2771 .height(40) 2772 .margin(20) 2773 .onClick(() => { 2774 this.pathStack.popToName('pageOne', 2775 new resultClass(11)); // 将第一个名为name的NavDestination页面移到栈顶，将处理结果传入push的onPop回调中。 2776 }) 2777 2778 Button('popToIndex', { stateEffect: true, type: ButtonType.Capsule }) 2779 .width('80%') 2780 .height(40) 2781 .margin(20) 2782 .onClick(() => { 2783 this.pathStack.popToIndex(0, new resultClass(111)); // 将index指定的NavDestination页面移到栈顶，将处理结果传入push的onPop回调中。 2784 }) 2785 2786 Button('popWithoutResult', { stateEffect: true, type: ButtonType.Capsule }) 2787 .width('80%') 2788 .height(40) 2789 .margin(20) 2790 .onClick(() => { 2791 this.pathStack.pop(); 2792 }) 2793 2794 Button('popToNameWithoutResult', { stateEffect: true, type: ButtonType.Capsule }) 2795 .width('80%') 2796 .height(40) 2797 .margin(20) 2798 .onClick(() => { 2799 this.pathStack.popToName('pageOne'); 2800 }) 2801 2802 Button('popToIndexWithoutResult', { stateEffect: true, type: ButtonType.Capsule }) 2803 .width('80%') 2804 .height(40) 2805 .margin(20) 2806 .onClick(() => { 2807 this.pathStack.popToIndex(0); 2808 }) 2809 }.width('100%').height('100%') 2810 }.title('pageTwo') 2811 .onBackPressed(() => { 2812 this.pathStack.pop(new resultClass(0)); // 回退到上一个页面，将处理结果传入push的onPop回调。 2813 return true; 2814 }).onReady((context: NavDestinationContext) => { 2815 this.pathStack = context.pathStack; 2816 }) 2817 } 2818} 2819``` 2820```json 2821// 工程配置文件module.json5中配置 {"routerMap": "$profile:route_map"} 2822// route_map.json 2823{ 2824 "routerMap": [ 2825 { 2826 "name": "pageOne", 2827 "pageSourceFile": "src/main/ets/pages/PageOne.ets", 2828 "buildFunction": "PageOneBuilder", 2829 "data": { 2830 "description": "this is pageOne" 2831 } 2832 }, 2833 { 2834 "name": "pageTwo", 2835 "pageSourceFile": "src/main/ets/pages/PageTwo.ets", 2836 "buildFunction": "PageTwoBuilder" 2837 } 2838 ] 2839} 2840``` 2841 2842 2843### 示例5（设置背景颜色和模糊效果） 2844 2845该示例主要演示设置Navigation主页的标题栏、工具栏和NavDestination页面的标题栏的背景颜色和背景模糊效果。 2846 2847```ts 2848let COLOR1: string = "#80004AAF"; 2849let COLOR2: string = "#802787D9"; 2850let BLUR_STYLE_1: BlurStyle = BlurStyle.BACKGROUND_THIN; 2851let BLUR_STYLE_2: BlurStyle = BlurStyle.BACKGROUND_THICK; 2852 2853@Component 2854struct BackComponent { 2855 build() { 2856 Row() { 2857 Column() { 2858 } 2859 .height('100%') 2860 .backgroundColor("#3D9DB4") 2861 .layoutWeight(9) 2862 2863 Column() { 2864 } 2865 .height('100%') 2866 .backgroundColor("#17A98D") 2867 .layoutWeight(9) 2868 2869 Column() { 2870 } 2871 .height('100%') 2872 .backgroundColor("#FFC000") 2873 .layoutWeight(9) 2874 } 2875 .height('100%') 2876 .width('100%') 2877 } 2878} 2879 2880@Component 2881struct ColorAndBlur { 2882 @State useColor1: boolean = true; 2883 @State useBlur1: boolean = true; 2884 2885 build() { 2886 NavDestination() { 2887 Stack({ alignContent: Alignment.Center }) { 2888 BackComponent() 2889 .width('100%') 2890 .height('100%') 2891 Column() { 2892 Stack({ alignContent: Alignment.Center }) { 2893 Button("switch color") 2894 .onClick(() => { 2895 this.useColor1 = !this.useColor1; 2896 }) 2897 } 2898 .width('100%') 2899 .layoutWeight(1) 2900 2901 Stack({ alignContent: Alignment.Center }) { 2902 Button("switch blur") 2903 .onClick(() => { 2904 this.useBlur1 = !this.useBlur1; 2905 }) 2906 } 2907 .width('100%') 2908 .layoutWeight(1) 2909 } 2910 .width('100%') 2911 .height('100%') 2912 }.width('100%') 2913 .height('100%') 2914 } 2915 .width('100%') 2916 .height('100%') 2917 // 开发者可以设置标题栏的背景颜色和背景模糊效果 2918 .title("switch titlebar color and blur", { 2919 backgroundColor: this.useColor1 ? COLOR1 : COLOR2, 2920 backgroundBlurStyle: this.useBlur1 ? BLUR_STYLE_1 : BLUR_STYLE_2, 2921 barStyle: BarStyle.STACK 2922 }) 2923 } 2924} 2925 2926@Entry 2927@Component 2928struct Index { 2929 private stack: NavPathStack = new NavPathStack(); 2930 @State useColor1: boolean = true; 2931 @State useBlur1: boolean = true; 2932 2933 @Builder 2934 PageBuilder(name: string) { 2935 ColorAndBlur() 2936 } 2937 2938 build() { 2939 Navigation(this.stack) { 2940 Stack({ alignContent: Alignment.Center }) { 2941 BackComponent() 2942 .width('100%') 2943 .height('100%') 2944 Column() { 2945 Stack({ alignContent: Alignment.Center }) { 2946 Button("switch color") 2947 .onClick(() => { 2948 this.useColor1 = !this.useColor1; 2949 }) 2950 } 2951 .width('100%') 2952 .layoutWeight(1) 2953 2954 Stack({ alignContent: Alignment.Center }) { 2955 Button("switch blur") 2956 .onClick(() => { 2957 this.useBlur1 = !this.useBlur1; 2958 }) 2959 } 2960 .width('100%') 2961 .layoutWeight(1) 2962 2963 Stack({ alignContent: Alignment.Center }) { 2964 Button("push page") 2965 .onClick(() => { 2966 this.stack.pushPath({ name: "page" }) 2967 }) 2968 } 2969 .width('100%') 2970 .layoutWeight(1) 2971 } 2972 .width('100%') 2973 .height('80%') 2974 }.width('100%') 2975 .height('100%') 2976 } 2977 .width('100%') 2978 .height('100%') 2979 .navDestination(this.PageBuilder) 2980 // 开发者可以设置标题栏的背景颜色和背景模糊效果 2981 .title("NavTitle", { 2982 backgroundColor: this.useColor1 ? COLOR1 : COLOR2, 2983 backgroundBlurStyle: this.useBlur1 ? BLUR_STYLE_1 : BLUR_STYLE_2, 2984 barStyle: BarStyle.STACK 2985 }) 2986 // 开发者可以设置工具栏的背景颜色和背景模糊效果 2987 .toolbarConfiguration([ 2988 { value: "a" }, 2989 { value: "b" }, 2990 { value: "c" } 2991 ], { 2992 backgroundColor: this.useColor1 ? COLOR1 : COLOR2, 2993 backgroundBlurStyle: this.useBlur1 ? BLUR_STYLE_1 : BLUR_STYLE_2 2994 }) 2995 } 2996} 2997``` 2998 2999 3000### 示例6（嵌套场景下获取外层栈） 3001 3002该示例主要演示在嵌套Navigation场景下，如何获取父NavPathStack。 3003 3004```ts 3005@Entry 3006@Component 3007struct NavigationExample1 { 3008 @State childNavStack: NavPathStack = new NavPathStack(); 3009 3010 build() { 3011 Navigation() { 3012 Stack({ alignContent: Alignment.Center }) { 3013 Navigation(this.childNavStack) { 3014 Button('push Path to parent Navigation', { stateEffect: true, type: ButtonType.Capsule }) 3015 .width('80%') 3016 .height(40) 3017 .margin(20) 3018 .onClick(() => { 3019 // 可以获取父NavPathStack 3020 let parentStack = this.childNavStack.getParent(); 3021 parentStack?.pushPath({ name: "pageOne" }); 3022 }) 3023 } 3024 .clip(true) 3025 .backgroundColor(Color.Orange) 3026 .width('80%') 3027 .height('80%') 3028 .title('ChildNavigation') 3029 } 3030 .width('100%') 3031 .height('100%') 3032 } 3033 .backgroundColor(Color.Green) 3034 .width('100%') 3035 .height('100%') 3036 .title('ParentNavigation') 3037 } 3038} 3039``` 3040```ts 3041// PageOne.ets 3042@Builder 3043export function PageOneBuilder(name: string) { 3044 NavDestination() { 3045 Text("this is " + name) 3046 } 3047 .title(name) 3048} 3049``` 3050```json 3051// 工程配置文件module.json5中配置 {"routerMap": "$profile:route_map"} 3052// route_map.json 3053{ 3054 "routerMap": [ 3055 { 3056 "name": "pageOne", 3057 "pageSourceFile": "src/main/ets/pages/PageOne.ets", 3058 "buildFunction": "PageOneBuilder", 3059 "data": { 3060 "description": "this is pageOne" 3061 } 3062 } 3063 ] 3064} 3065``` 3066 3067 3068### 示例7（通过onReady获取栈） 3069 3070该示例主要演示如下两点功能： 3071 30721. NavPathStack无需声明为状态变量，也可以实现页面栈操作功能。 3073 30742. NavDestination通过onReady事件能够拿到对应的NavPathInfo和所属的NavPathStack。 3075 3076```ts 3077class PageParam { 3078 constructor(num_: number) { 3079 this.num = num_; 3080 } 3081 3082 num: number = 0; 3083} 3084 3085@Builder 3086export function PageOneBuilder(name: string, param: Object) { 3087 PageOne(); 3088} 3089 3090@Component 3091struct PageOne { 3092 private stack: NavPathStack | null = null; 3093 private name: string = ""; 3094 private paramNum: number = 0; 3095 3096 build() { 3097 NavDestination() { 3098 Column() { 3099 Text("NavPathInfo: name: " + this.name + ", paramNum: " + this.paramNum) 3100 Button('pushPath', { stateEffect: true, type: ButtonType.Capsule }) 3101 .width('80%') 3102 .height(40) 3103 .margin(20) 3104 .onClick(() => { 3105 if (this.stack) { 3106 let p = new PageParam(this.paramNum + 1); 3107 this.stack.pushPath({ name: "pageOne", param: p }); 3108 } 3109 }) 3110 Button('pop', { stateEffect: true, type: ButtonType.Capsule }) 3111 .width('80%') 3112 .height(40) 3113 .margin(20) 3114 .onClick(() => { 3115 this.stack?.pop(); 3116 }) 3117 } 3118 .width('100%') 3119 .height('100%') 3120 } 3121 .title('pageOne') 3122 .onReady((ctx: NavDestinationContext) => { 3123 // 在NavDestination中能够拿到传来的NavPathInfo和当前所处的NavPathStack 3124 try { 3125 this.name = ctx?.pathInfo?.name; 3126 this.paramNum = (ctx?.pathInfo?.param as PageParam)?.num; 3127 this.stack = ctx.pathStack; 3128 } catch (e) { 3129 console.log(`testTag onReady catch exception: ${JSON.stringify(e)}`); 3130 } 3131 }) 3132 } 3133} 3134 3135@Entry 3136@Component 3137struct NavigationExample2 { 3138 private stack: NavPathStack = new NavPathStack(); 3139 3140 build() { 3141 Navigation(this.stack) { 3142 Stack({ alignContent: Alignment.Center }) { 3143 Button('pushPath', { stateEffect: true, type: ButtonType.Capsule }) 3144 .width('80%') 3145 .height(40) 3146 .margin(20) 3147 .onClick(() => { 3148 let p = new PageParam(1); 3149 this.stack.pushPath({ name: "pageOne", param: p }); 3150 }) 3151 } 3152 .width('100%') 3153 .height('100%') 3154 } 3155 .width('100%') 3156 .height('100%') 3157 .title('Navigation') 3158 } 3159} 3160``` 3161```json 3162// 工程配置文件module.json5中配置 {"routerMap": "$profile:route_map"} 3163// route_map.json 3164{ 3165 "routerMap": [ 3166 { 3167 "name": "pageOne", 3168 "pageSourceFile": "src/main/ets/pages/Index.ets", 3169 "buildFunction": "PageOneBuilder", 3170 "data": { 3171 "description": "this is pageOne" 3172 } 3173 } 3174 ] 3175} 3176``` 3177 3178 3179### 示例8（NavDestination生命周期时序） 3180 3181该示例演示NavDestination的onAppear，onDisAppear，onShown，onHidden，onWillAppear，onWillDisappear，onWillShow，onWillHide接口的生命周期时序。 3182 3183```ts 3184@Builder 3185export function PageOneBuilder(name: string, param: Object) { 3186 PageOneComponent(); 3187} 3188 3189@Component 3190struct PageOneComponent { 3191 private stack: NavPathStack | null = null; 3192 @State eventStr: string = ""; 3193 3194 build() { 3195 NavDestination() { 3196 Column() { 3197 Text("event: " + this.eventStr) 3198 Button('pushPath', { stateEffect: true, type: ButtonType.Capsule }) 3199 .width('80%') 3200 .height(40) 3201 .margin(20) 3202 .onClick(() => { 3203 if (this.stack) { 3204 this.stack.pushPath({ name: "pageOne" }); 3205 } 3206 }) 3207 Button('pop', { stateEffect: true, type: ButtonType.Capsule }) 3208 .width('80%') 3209 .height(40) 3210 .margin(20) 3211 .onClick(() => { 3212 this.stack?.pop(); 3213 }) 3214 } 3215 .width('100%') 3216 .height('100%') 3217 } 3218 .title('pageOne') 3219 .onAppear(() => { 3220 this.eventStr += "<onAppear>"; 3221 }) 3222 .onDisAppear(() => { 3223 this.eventStr += "<onDisAppear>"; 3224 }) 3225 .onShown(() => { 3226 this.eventStr += "<onShown>"; 3227 }) 3228 .onHidden(() => { 3229 this.eventStr += "<onHidden>"; 3230 }) 3231 .onWillAppear(() => { 3232 this.eventStr += "<onWillAppear>"; 3233 }) 3234 .onWillDisappear(() => { 3235 this.eventStr += "<onWillDisappear>"; 3236 }) 3237 .onWillShow(() => { 3238 this.eventStr += "<onWillShow>"; 3239 }) 3240 .onWillHide(() => { 3241 this.eventStr += "<onWillHide>"; 3242 }) 3243 // onReady会在onAppear之前调用 3244 .onReady((ctx: NavDestinationContext) => { 3245 try { 3246 this.eventStr += "<onReady>"; 3247 this.stack = ctx.pathStack; 3248 } catch (e) { 3249 console.log(`testTag onReady catch exception: ${JSON.stringify(e)}`); 3250 } 3251 }) 3252 } 3253} 3254 3255@Entry 3256@Component 3257struct NavigationExample3 { 3258 private stack: NavPathStack = new NavPathStack(); 3259 3260 build() { 3261 Navigation(this.stack) { 3262 Stack({ alignContent: Alignment.Center }) { 3263 Button('pushPath', { stateEffect: true, type: ButtonType.Capsule }) 3264 .width('80%') 3265 .height(40) 3266 .margin(20) 3267 .onClick(() => { 3268 this.stack.pushPath({ name: "pageOne" }); 3269 }) 3270 } 3271 .width('100%') 3272 .height('100%') 3273 } 3274 .width('100%') 3275 .height('100%') 3276 .title('Navigation') 3277 } 3278} 3279``` 3280```json 3281// 工程配置文件module.json5中配置 {"routerMap": "$profile:route_map"} 3282// route_map.json 3283{ 3284 "routerMap": [ 3285 { 3286 "name": "pageOne", 3287 "pageSourceFile": "src/main/ets/pages/Index.ets", 3288 "buildFunction": "PageOneBuilder", 3289 "data": { 3290 "description": "this is pageOne" 3291 } 3292 } 3293 ] 3294} 3295``` 3296 3297 3298 3299### 示例9（标题栏布局效果） 3300 3301该示例演示Navigation标题栏STACK布局效果。 3302 3303```ts 3304@Entry 3305@Component 3306struct NavigationExample { 3307 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; 3308 private scrollerForScroll: Scroller = new Scroller(); 3309 @State barStyle: BarStyle = BarStyle.STANDARD; 3310 3311 build() { 3312 Column() { 3313 Navigation() { 3314 Column() { 3315 Scroll(this.scrollerForScroll) { 3316 Column() { 3317 Image($r('app.media.image_1'))// 设置与标题栏高度一致，以便观察STACK效果 3318 .height(138) 3319 .width('100%') 3320 Button('BarStyle.STANDARD') 3321 .height('50vp') 3322 .onClick(() => { 3323 this.barStyle = BarStyle.STANDARD; 3324 }) 3325 Button('BarStyle.STACK') 3326 .height('50vp') 3327 .margin({ top: 12 }) 3328 .onClick(() => { 3329 this.barStyle = BarStyle.STACK; 3330 }) 3331 3332 ForEach(this.arr, (item: number) => { 3333 ListItem() { 3334 Text('' + item) 3335 .width('100%') 3336 .height(100) 3337 .fontSize(16) 3338 .textAlign(TextAlign.Center) 3339 .borderRadius(10) 3340 .backgroundColor(Color.Orange) 3341 .margin({ top: 12 }) 3342 } 3343 }, (item: string) => item) 3344 } 3345 } 3346 } 3347 .width('100%') 3348 .height('100%') 3349 .backgroundColor(0xDCDCDC) 3350 } 3351 .title( 3352 { 3353 main: 'NavTitle', 3354 sub: 'subtitle' 3355 }, 3356 { 3357 backgroundBlurStyle: BlurStyle.COMPONENT_THICK, 3358 barStyle: this.barStyle, 3359 } 3360 ) 3361 .titleMode(NavigationTitleMode.Free) 3362 .hideTitleBar(false) 3363 }.width('100%').height('100%').backgroundColor('#F1F3F5') 3364 } 3365} 3366``` 3367 3368 3369 3370### 示例10（定义路由栈派生类） 3371 3372该示例主要演示如何定义NavPathStack的派生类和派生类在Navigation中的基本用法。 3373 3374```ts 3375class DerivedNavPathStack extends NavPathStack { 3376 // usr defined property 'id' 3377 id: string = "__default__"; 3378 3379 // new function in derived class 3380 setId(id: string) { 3381 this.id = id; 3382 } 3383 3384 // new function in derived class 3385 getInfo(): string { 3386 return "this page used Derived NavPathStack, id: " + this.id; 3387 } 3388 3389 // overwrite function of NavPathStack 3390 pushPath(info: NavPathInfo, animated?: boolean): void 3391 pushPath(info: NavPathInfo, options?: NavigationOptions): void 3392 pushPath(info: NavPathInfo, secArg?: boolean | NavigationOptions): void { 3393 console.log('[derive-test] reached DerivedNavPathStack\'s pushPath'); 3394 if (typeof secArg === 'boolean') { 3395 super.pushPath(info, secArg); 3396 } else { 3397 super.pushPath(info, secArg); 3398 } 3399 } 3400 3401 // overwrite and overload function of NavPathStack 3402 pop(animated?: boolean | undefined): NavPathInfo | undefined 3403 pop(result: Object, animated?: boolean | undefined): NavPathInfo | undefined 3404 pop(result?: Object, animated?: boolean | undefined): NavPathInfo | undefined { 3405 console.log('[derive-test] reached DerivedNavPathStack\'s pop'); 3406 return super.pop(result, animated); 3407 } 3408 3409 // other function of base class... 3410} 3411 3412class param { 3413 info: string = "__default_param__"; 3414 3415 constructor(info: string) { 3416 this.info = info; 3417 } 3418} 3419 3420@Entry 3421@Component 3422struct Index { 3423 derivedStack: DerivedNavPathStack = new DerivedNavPathStack(); 3424 3425 aboutToAppear(): void { 3426 this.derivedStack.setId('origin stack'); 3427 } 3428 3429 @Builder 3430 pageMap(name: string) { 3431 PageOne(); 3432 } 3433 3434 build() { 3435 Navigation(this.derivedStack) { 3436 Button('to Page One').margin(20).onClick(() => { 3437 this.derivedStack.pushPath({ 3438 name: 'pageOne', 3439 param: new param('push pageOne in homePage when stack size: ' + this.derivedStack.size()) 3440 }); 3441 }) 3442 }.navDestination(this.pageMap) 3443 .title('Home Page') 3444 } 3445} 3446 3447@Component 3448struct PageOne { 3449 derivedStack: DerivedNavPathStack = new DerivedNavPathStack(); 3450 curStringifyParam: string = "NA"; 3451 3452 build() { 3453 NavDestination() { 3454 Column() { 3455 Text(this.derivedStack.getInfo()) 3456 .margin(10) 3457 .fontSize(25) 3458 .fontWeight(FontWeight.Bold) 3459 .textAlign(TextAlign.Start) 3460 Text('current page param info:') 3461 .margin(10) 3462 .fontSize(25) 3463 .fontWeight(FontWeight.Bold) 3464 .textAlign(TextAlign.Start) 3465 Text(this.curStringifyParam) 3466 .margin(20) 3467 .fontSize(20) 3468 .textAlign(TextAlign.Start) 3469 }.backgroundColor(Color.Pink) 3470 3471 Button('to Page One').margin(20).onClick(() => { 3472 this.derivedStack.pushPath({ 3473 name: 'pageOne', 3474 param: new param('push pageOne in pageOne when stack size: ' + this.derivedStack.size()) 3475 }); 3476 }) 3477 }.title('Page One') 3478 .onReady((context: NavDestinationContext) => { 3479 console.log('[derive-test] reached PageOne\'s onReady'); 3480 // get derived stack from navdestinationContext 3481 this.derivedStack = context.pathStack as DerivedNavPathStack; 3482 console.log('[derive-test] -- got derivedStack: ' + this.derivedStack.id); 3483 this.curStringifyParam = JSON.stringify(context.pathInfo.param); 3484 console.log('[derive-test] -- got param: ' + this.curStringifyParam); 3485 }) 3486 } 3487} 3488``` 3489 3490 3491### 示例11（使用Symbol组件） 3492 3493该示例主要演示Navigation和NavDestination如何使用Symbol组件。 3494 3495```ts 3496import { SymbolGlyphModifier } from '@kit.ArkUI'; 3497 3498@Entry 3499@Component 3500struct NavigationExample { 3501 @Provide('navPathStack') navPathStack: NavPathStack = new NavPathStack(); 3502 @State menuItems: Array<NavigationMenuItem> = [ 3503 { 3504 value: 'menuItem1', 3505 icon: 'resources/base/media/ic_public_ok.svg' // 图标资源路径 3506 }, 3507 { 3508 value: 'menuItem2', 3509 icon: 'resources/base/media/ic_public_ok.svg', // 图标资源路径 3510 symbolIcon: new SymbolGlyphModifier($r('sys.symbol.ohos_folder_badge_plus')).fontColor([Color.Red, Color.Green]) 3511 .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR), 3512 }, 3513 { 3514 value: 'menuItem3', 3515 symbolIcon: new SymbolGlyphModifier($r('sys.symbol.ohos_lungs')), 3516 }, 3517 ]; 3518 @State toolItems: Array<ToolbarItem> = [ 3519 { 3520 value: 'toolItem1', 3521 icon: 'resources/base/media/ic_public_ok.svg', // 图标资源路径 3522 symbolIcon: new SymbolGlyphModifier($r('sys.symbol.ohos_lungs')), 3523 status: ToolbarItemStatus.ACTIVE, 3524 activeSymbolIcon: new SymbolGlyphModifier($r('sys.symbol.ohos_folder_badge_plus')).fontColor([Color.Red, 3525 Color.Green]).renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR), 3526 action: () => { 3527 } 3528 }, 3529 { 3530 value: 'toolItem2', 3531 symbolIcon: new SymbolGlyphModifier($r('sys.symbol.ohos_star')), 3532 status: ToolbarItemStatus.ACTIVE, 3533 activeIcon: 'resources/base/media/ic_public_more.svg', // 图标资源路径 3534 action: () => { 3535 } 3536 }, 3537 { 3538 value: 'toolItem3', 3539 symbolIcon: new SymbolGlyphModifier($r('sys.symbol.ohos_star')), 3540 status: ToolbarItemStatus.ACTIVE, 3541 activeSymbolIcon: new SymbolGlyphModifier($r('sys.symbol.ohos_lungs')), 3542 action: () => { 3543 } 3544 } 3545 ]; 3546 3547 @Builder 3548 myRouter(name: string, param?: Object) { 3549 if (name === 'NavigationMenu') { 3550 NavigationMenu(); 3551 } 3552 } 3553 3554 build() { 3555 Navigation(this.navPathStack) { 3556 Column() { 3557 Button('跳转').onClick(() => { 3558 this.navPathStack.pushPathByName('NavigationMenu', null); 3559 }) 3560 } 3561 } 3562 .backButtonIcon(new SymbolGlyphModifier($r('sys.symbol.ohos_wifi'))) 3563 .titleMode(NavigationTitleMode.Mini) 3564 .menus(this.menuItems) 3565 .toolbarConfiguration(this.toolItems) 3566 .title('一级页面') 3567 .navDestination(this.myRouter) 3568 } 3569} 3570 3571@Component 3572export struct NavigationMenu { 3573 @Consume('navPathStack') navPathStack: NavPathStack; 3574 @State menuItems: Array<NavigationMenuItem> = [ 3575 { 3576 value: 'menuItem1', 3577 icon: 'resources/base/media/ic_public_ok.svg', // 图标资源路径 3578 action: () => { 3579 } 3580 }, 3581 { 3582 value: 'menuItem2', 3583 symbolIcon: new SymbolGlyphModifier($r('sys.symbol.ohos_folder_badge_plus')).fontColor([Color.Red, Color.Green]) 3584 .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR), 3585 action: () => { 3586 } 3587 }, 3588 { 3589 value: 'menuItem3', 3590 symbolIcon: new SymbolGlyphModifier($r('sys.symbol.repeat_1')), 3591 action: () => { 3592 } 3593 }, 3594 ]; 3595 3596 build() { 3597 NavDestination() { 3598 Row() { 3599 Column() { 3600 } 3601 .width('100%') 3602 } 3603 .height('100%') 3604 } 3605 .hideTitleBar(false) 3606 .title('NavDestination title') 3607 .backgroundColor($r('sys.color.ohos_id_color_titlebar_sub_bg')) 3608 .backButtonIcon(new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Blue])) 3609 .menus(this.menuItems) 3610 } 3611} 3612``` 3613 3614 3615### 示例12（设置自定义标题栏边距） 3616 3617该示例主要演示Navigation和NavDestination如何设置自定义标题栏边距，如何通过TextModifier修改主副标题文本样式。 3618 3619```ts 3620import { LengthMetrics } from '@kit.ArkUI'; 3621import { TextModifier } from '@ohos.arkui.modifier'; 3622 3623class MainTitleTextModfier extends TextModifier { 3624 useStyle1: boolean = true; 3625 3626 applyNormalAttribute(instance: TextModifier): void { 3627 if (this.useStyle1) { 3628 console.log(`testTag mainTitle use style1`); 3629 instance.fontColor('#FFFFC000'); 3630 instance.fontSize(35); 3631 instance.fontWeight(FontWeight.Bolder); 3632 instance.fontStyle(FontStyle.Normal); 3633 instance.textShadow({ radius: 5, offsetX: 9 }); 3634 } else { 3635 console.log(`testTag mainTitle use style2`); 3636 instance.fontColor('#FF23A98D'); 3637 instance.fontSize(20); 3638 instance.heightAdaptivePolicy(TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST); 3639 instance.fontWeight(FontWeight.Lighter); 3640 instance.fontStyle(FontStyle.Italic); 3641 instance.textShadow({ radius: 3, offsetX: 3 }); 3642 } 3643 } 3644} 3645 3646class SubTitleTextModfier extends TextModifier { 3647 useStyle1: boolean = true; 3648 3649 applyNormalAttribute(instance: TextModifier): void { 3650 if (this.useStyle1) { 3651 console.log(`testTag subTitle use style1`); 3652 instance.fontColor('#FFFFC000'); 3653 instance.fontSize(15); 3654 instance.fontWeight(FontWeight.Bolder); 3655 instance.fontStyle(FontStyle.Normal); 3656 instance.textShadow({ radius: 5, offsetX: 9 }); 3657 } else { 3658 console.log(`testTag subTitle use style2`); 3659 instance.fontColor('#FF23A98D'); 3660 instance.fontSize(10); 3661 instance.fontWeight(FontWeight.Lighter); 3662 instance.fontStyle(FontStyle.Italic); 3663 instance.textShadow({ radius: 3, offsetX: 3 }); 3664 } 3665 } 3666} 3667 3668@Entry 3669@Component 3670struct NavigationExample { 3671 private navPathStack: NavPathStack = new NavPathStack(); 3672 // 初始化标题栏起始端内间距 3673 @State paddingStart: LengthMetrics = LengthMetrics.vp(0); 3674 // 初始化标题栏结束端内间距 3675 @State paddingEnd: LengthMetrics = LengthMetrics.vp(0); 3676 // 主标题样式修改器 3677 @State mainTitleModifier: MainTitleTextModfier = new MainTitleTextModfier(); 3678 // 副标题样式修改器 3679 @State subTitleModifier: SubTitleTextModfier = new SubTitleTextModfier(); 3680 @State applyModifier: boolean = false; 3681 @State useStyle1: boolean = true; 3682 3683 @Builder 3684 myRouter(name: string, param?: Object) { 3685 if (name === 'NavDestinationExample') { 3686 NavDestinationExample(); 3687 } 3688 } 3689 3690 build() { 3691 Navigation(this.navPathStack) { 3692 Column() { 3693 // 标题栏内间距切换 3694 Button('apply padding 32vp') 3695 .onClick(() => { 3696 this.paddingStart = LengthMetrics.vp(32); 3697 this.paddingEnd = LengthMetrics.vp(32); 3698 }) 3699 .margin({ top: 70 }) 3700 .width(180) 3701 Button('apply padding 20vp') 3702 .onClick(() => { 3703 this.paddingStart = LengthMetrics.vp(20); 3704 this.paddingEnd = LengthMetrics.vp(20); 3705 }) 3706 .margin({ top: 40 }) 3707 .width(180) 3708 Button('pushPage') 3709 .onClick(() => { 3710 this.navPathStack.pushPath({ name: 'NavDestinationExample' }); 3711 }) 3712 .margin({ top: 40 }) 3713 .width(180) 3714 Row() { 3715 Text(`apply Modifier`) 3716 Toggle({ isOn: this.applyModifier, type: ToggleType.Switch }).onChange((isOn: boolean) => { 3717 this.applyModifier = isOn; 3718 }) 3719 } 3720 .padding({ top: 95, left: 5, right: 5 }) 3721 .width(180) 3722 .justifyContent(FlexAlign.SpaceBetween) 3723 3724 Row() { 3725 Text(`use Style1`) 3726 Toggle({ isOn: this.useStyle1, type: ToggleType.Switch }).onChange((isOn: boolean) => { 3727 this.mainTitleModifier.useStyle1 = isOn; 3728 this.subTitleModifier.useStyle1 = isOn; 3729 this.useStyle1 = isOn; 3730 }) 3731 } 3732 .padding({ top: 40, left: 5, right: 5 }) 3733 .width(180) 3734 .justifyContent(FlexAlign.SpaceBetween) 3735 } 3736 .width('100%') 3737 .height('100%') 3738 } 3739 .titleMode(NavigationTitleMode.Full) 3740 .title( 3741 { main: "Title", sub: "subTitle" }, 3742 this.applyModifier ? 3743 { 3744 paddingStart: this.paddingStart, 3745 paddingEnd: this.paddingEnd, 3746 mainTitleModifier: this.mainTitleModifier, 3747 subTitleModifier: this.subTitleModifier, 3748 } : { 3749 paddingStart: this.paddingStart, 3750 paddingEnd: this.paddingEnd 3751 }) 3752 .navDestination(this.myRouter) 3753 } 3754} 3755 3756@Component 3757export struct NavDestinationExample { 3758 @State menuItems: Array<NavigationMenuItem> = [ 3759 { 3760 value: 'menuItem1', 3761 icon: 'resources/base/media/ic_public_ok.svg', // 图标资源路径 3762 action: () => { 3763 } 3764 } 3765 ]; 3766 @State paddingStart: LengthMetrics = LengthMetrics.vp(0); 3767 @State paddingEnd: LengthMetrics = LengthMetrics.vp(0); 3768 // 主标题样式修改器 3769 @State mainTitleModifier: MainTitleTextModfier = new MainTitleTextModfier(); 3770 // 副标题样式修改器 3771 @State subTitleModifier: SubTitleTextModfier = new SubTitleTextModfier(); 3772 @State applyModifier: boolean = false; 3773 @State useStyle1: boolean = true; 3774 3775 build() { 3776 NavDestination() { 3777 Column() { 3778 // 标题栏内间距切换 3779 Button('apply padding 32vp') 3780 .onClick(() => { 3781 this.paddingStart = LengthMetrics.vp(32); 3782 this.paddingEnd = LengthMetrics.vp(32); 3783 }) 3784 .margin({ top: 150 }) 3785 .width(180) 3786 Button('apply padding 20vp') 3787 .onClick(() => { 3788 this.paddingStart = LengthMetrics.vp(20); 3789 this.paddingEnd = LengthMetrics.vp(20); 3790 }) 3791 .margin({ top: 40 }) 3792 .width(180) 3793 Row() { 3794 Text(`apply Modifier`) 3795 Toggle({ isOn: this.applyModifier, type: ToggleType.Switch }).onChange((isOn: boolean) => { 3796 this.applyModifier = isOn; 3797 }) 3798 } 3799 .padding({ top: 95, left: 5, right: 5 }) 3800 .width(180) 3801 .justifyContent(FlexAlign.SpaceBetween) 3802 3803 Row() { 3804 Text(`use Style1`) 3805 Toggle({ isOn: this.useStyle1, type: ToggleType.Switch }).onChange((isOn: boolean) => { 3806 this.mainTitleModifier.useStyle1 = isOn; 3807 this.subTitleModifier.useStyle1 = isOn; 3808 this.useStyle1 = isOn; 3809 }) 3810 } 3811 .padding({ top: 40, left: 5, right: 5 }) 3812 .width(180) 3813 .justifyContent(FlexAlign.SpaceBetween) 3814 } 3815 .width('100%') 3816 .height('90%') 3817 } 3818 .hideTitleBar(false) 3819 .title( 3820 { main: "Title", sub: "subTitle" }, 3821 this.applyModifier ? 3822 { 3823 paddingStart: this.paddingStart, 3824 paddingEnd: this.paddingEnd, 3825 mainTitleModifier: this.mainTitleModifier, 3826 subTitleModifier: this.subTitleModifier, 3827 } : { 3828 paddingStart: this.paddingStart, 3829 paddingEnd: this.paddingEnd 3830 }) 3831 .menus(this.menuItems) 3832 } 3833} 3834``` 3835 3836 3837### 示例13（自定义转场动画） 3838 3839该示例主要实现Navigation简单的自定义转场动画。 3840 3841<!--code_no_check--> 3842```ts 3843// Index.ets 3844import { AnimateCallback, CustomTransition } from './CustomTransitionUtils' 3845 3846@Entry 3847@Component 3848struct NavigationCustomTransitionExample { 3849 pageInfos: NavPathStack = new NavPathStack(); 3850 3851 aboutToAppear() { 3852 this.pageInfos.pushPath({ name: 'PageOne' }, false); 3853 } 3854 3855 build() { 3856 Navigation(this.pageInfos) { 3857 } 3858 .hideNavBar(true) 3859 .customNavContentTransition((from: NavContentInfo, to: NavContentInfo, operation: NavigationOperation) => { 3860 // 首页不进行自定义动画 3861 if (from.index === -1 || to.index === -1) { 3862 return undefined; 3863 } 3864 3865 let customAnimation: NavigationAnimatedTransition = { 3866 timeout: 2000, 3867 // 转场开始时系统调用该方法，并传入转场上下文代理对象 3868 transition: (transitionProxy: NavigationTransitionProxy) => { 3869 if (!from.navDestinationId || !to.navDestinationId) { 3870 return; 3871 } 3872 // 从封装类CustomTransition中根据子页面的序列获取对应的转场动画回调 3873 let fromParam: AnimateCallback = CustomTransition.getInstance().getAnimateParam(from.navDestinationId); 3874 let toParam: AnimateCallback = CustomTransition.getInstance().getAnimateParam(to.navDestinationId); 3875 // Push动画 3876 if (operation == NavigationOperation.PUSH) { 3877 if (fromParam.start && toParam.start) { 3878 // 设置Push转场的两个页面的动画起点 3879 fromParam.start(true, true); 3880 toParam.start(true, false); 3881 } 3882 this.getUIContext()?.animateTo({ 3883 duration: 500, curve: Curve.Friction, onFinish: () => { 3884 // 动画结束后需要手动调用finishTransition，否则在timeout时间后由系统调用 3885 transitionProxy.finishTransition(); 3886 } 3887 }, () => { 3888 if (fromParam.finish && toParam.finish) { 3889 // 设置Push转场的两个页面的动画终点 3890 fromParam.finish(true, true); 3891 toParam.finish(true, false); 3892 } 3893 3894 }) 3895 } else if (operation == NavigationOperation.POP) { 3896 // Pop动画 3897 if (fromParam.start && toParam.start) { 3898 // 设置Pop转场的两个页面的动画起点 3899 fromParam.start(false, true); 3900 toParam.start(false, false); 3901 } 3902 this.getUIContext()?.animateTo({ 3903 duration: 500, curve: Curve.Friction, onFinish: () => { 3904 // 动画结束后需要手动调用finishTransition，否则在timeout时间后由系统调用 3905 transitionProxy.finishTransition(); 3906 } 3907 }, () => { 3908 if (fromParam.finish && toParam.finish) { 3909 // 设置Pop转场的两个页面的动画终点 3910 fromParam.finish(false, true); 3911 toParam.finish(false, false); 3912 } 3913 }) 3914 } else { 3915 // Replace不做动画 3916 } 3917 } 3918 }; 3919 return customAnimation; 3920 }) 3921 } 3922} 3923 3924 3925// PageOne 3926@Builder 3927export function PageOneBuilder() { 3928 PageContainer({ title: "PageOne" }); 3929} 3930 3931// PageTwo 3932@Builder 3933export function PageTwoBuilder() { 3934 PageContainer({ title: "PageTwo" }); 3935} 3936 3937@Component 3938export struct PageContainer { 3939 pageInfos: NavPathStack = new NavPathStack(); 3940 @State translateY: string = '0'; 3941 pageId: string = ''; 3942 title: string = '' 3943 3944 registerCallback() { 3945 CustomTransition.getInstance().registerNavParam(this.pageId, 3946 // 设置转场动画起点，根据不同的转场类型分别设置 3947 (isPush: boolean, isExit: boolean) => { 3948 if (isPush) { 3949 if (isExit) { 3950 this.translateY = '0'; 3951 } else { 3952 this.translateY = '100%'; 3953 } 3954 } else { 3955 if (isExit) { 3956 this.translateY = '0'; 3957 } else { 3958 this.translateY = '0'; 3959 } 3960 } 3961 }, 3962 // 设置转场动画终点，根据不同的转场类型分别设置 3963 (isPush: boolean, isExit: boolean) => { 3964 if (isPush) { 3965 if (isExit) { 3966 this.translateY = '0'; 3967 } else { 3968 this.translateY = '0'; 3969 } 3970 } else { 3971 if (isExit) { 3972 this.translateY = '100%'; 3973 } else { 3974 this.translateY = '0'; 3975 } 3976 } 3977 }); 3978 } 3979 3980 build() { 3981 NavDestination() { 3982 Column() { 3983 Button('push next page', { stateEffect: true, type: ButtonType.Capsule }) 3984 .width('80%') 3985 .height(40) 3986 .margin(20) 3987 .onClick(() => { 3988 this.pageInfos.pushPath({ name: this.title == 'PageOne' ? "PageTwo" : "PageOne" }); 3989 }) 3990 } 3991 .size({ width: '100%', height: '100%' }) 3992 } 3993 .title(this.title) 3994 .onDisAppear(() => { 3995 // 页面销毁时解注册自定义转场动画参数 3996 CustomTransition.getInstance().unRegisterNavParam(this.pageId); 3997 }) 3998 .onReady((context: NavDestinationContext) => { 3999 this.pageInfos = context.pathStack; 4000 if (context.navDestinationId) { 4001 this.pageId = context.navDestinationId; 4002 // 页面创建时注册自定义转场动画参数 4003 this.registerCallback(); 4004 } 4005 }) 4006 .translate({ y: this.translateY }) 4007 .backgroundColor(this.title == 'PageOne' ? '#F1F3F5' : '#ff11dee5') 4008 } 4009} 4010``` 4011```ts 4012// CustomNavigationUtils.ts 工具类，用来管理所有页面的自定义动画参数注册和获取等 4013 4014// 自定义接口，用来保存某个页面相关的转场动画回调和参数 4015export interface AnimateCallback { 4016 start: ((isPush: boolean, isExit: boolean) => void | undefined) | undefined; 4017 finish: ((isPush: boolean, isExit: boolean) => void | undefined) | undefined; 4018} 4019 4020const customTransitionMap: Map<string, AnimateCallback> = new Map(); 4021 4022export class CustomTransition { 4023 static delegate = new CustomTransition(); 4024 4025 static getInstance() { 4026 return CustomTransition.delegate; 4027 } 4028 4029 /* 注册某个页面的动画回调 4030 * name: 注册页面的唯一id 4031 * startCallback：用来设置动画开始时页面的状态 4032 * endCallback：用来设置动画结束时页面的状态 4033 */ 4034 registerNavParam(name: string, startCallback: (isPush: boolean, isExit: boolean) => void, 4035 endCallback: (isPush: boolean, isExit: boolean) => void): void { 4036 if (customTransitionMap.has(name)) { 4037 let param = customTransitionMap.get(name); 4038 if (param != undefined) { 4039 param.start = startCallback; 4040 param.finish = endCallback; 4041 return; 4042 } 4043 } 4044 let params: AnimateCallback = { start: startCallback, finish: endCallback }; 4045 customTransitionMap.set(name, params); 4046 } 4047 4048 unRegisterNavParam(name: string): void { 4049 customTransitionMap.delete(name); 4050 } 4051 4052 getAnimateParam(name: string): AnimateCallback { 4053 let result: AnimateCallback = { 4054 start: customTransitionMap.get(name)?.start, 4055 finish: customTransitionMap.get(name)?.finish 4056 }; 4057 return result; 4058 } 4059} 4060``` 4061 4062```json 4063// 工程配置文件module.json5中配置 {"routerMap": "$profile:route_map"} 4064// route_map.json 4065{ 4066 "routerMap": [ 4067 { 4068 "name": "PageOne", 4069 "pageSourceFile": "src/main/ets/pages/Index.ets", 4070 "buildFunction": "PageOneBuilder", 4071 "data": { 4072 "description": "this is pageOne" 4073 } 4074 }, 4075 { 4076 "name": "PageTwo", 4077 "pageSourceFile": "src/main/ets/pages/Index.ets", 4078 "buildFunction": "PageTwoBuilder" 4079 } 4080 ] 4081} 4082``` 4083
