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