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