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