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