1# NavDestination 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @mayaolll--> 5<!--Designer: @jiangdayuan--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9作为子页面的根容器，用于显示[Navigation](ts-basic-components-navigation.md)的内容区。 10 11> **说明：** 12> 13> - 该组件从API version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14> 15> - 该组件从API version 11开始默认支持安全区避让特性(默认值为：expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]))，开发者可以重写该属性覆盖默认行为，API version 11之前的版本需配合[expandSafeArea](ts-universal-attributes-expand-safe-area.md)属性实现安全区避让。 16> 17> - NavDestination组件必须配合Navigation使用，作为Navigation目的页面的根节点，单独使用只能作为普通容器组件，不具备路由相关属性能力。 18> 19> - 如果路由栈中间页面的生命周期发生变化，跳转之前的栈顶Destination的生命周期(onWillShow, onShown, onHidden, onWillDisappear)与跳转之后的栈顶Destination的生命周期(onWillShow, onShown, onHidden, onWillDisappear)均在最后触发。 20> 21> - NavDestination未设置主副标题并且没有返回键时，不显示标题栏。 22> 23> - 不要在NavDestination上添加[zIndex](ts-universal-attributes-z-order.md#zindex)属性，会覆盖掉系统设置的层级，可能导致出现显示异常。 24 25## 子组件 26 27> **说明：** 28> 29> - 子组件类型：系统组件和自定义组件，支持渲染控制类型（[if/else](../../../ui/state-management/arkts-rendering-control-ifelse.md)、[ForEach](../../../ui/state-management/arkts-rendering-control-foreach.md)和[LazyForEach](../../../ui/state-management/arkts-rendering-control-lazyforeach.md)）。 30> - 子组件个数：多个。 31 32 33## 接口 34 35NavDestination() 36 37创建[Navigation](ts-basic-components-navigation.md)子页面的根容器。 38 39**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 40 41**系统能力：** SystemCapability.ArkUI.ArkUI.Full 42 43## 属性 44 45支持[通用属性](ts-component-general-attributes.md)。 46 47不推荐设置位置、大小等布局相关属性，可能会造成页面显示异常。 48 49### title 50 51title(value: string | CustomBuilder | NavDestinationCommonTitle | NavDestinationCustomTitle | Resource, options?: NavigationTitleOptions) 52 53设置页面标题。使用NavigationCustomTitle类型设置height高度时，[titleMode](ts-basic-components-navigation.md#titlemode)属性不会生效。字符串超长时，如果不设置副标题，先缩小再换行2行后以...截断。如果设置副标题，先缩小后以...截断。 54 55**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 56 57**系统能力：** SystemCapability.ArkUI.ArkUI.Full 58 59**参数：** 60 61| 参数名 | 类型 | 必填 | 说明 | 62| ------ | ------------------------------------------------------------ | ---- | ---------- | 63| value | string \| [CustomBuilder](ts-types.md#custombuilder8) \| [NavDestinationCommonTitle](#navdestinationcommontitle) \| [NavDestinationCustomTitle](#navdestinationcustomtitle) \| [Resource<sup>14+</sup>](ts-types.md#resource) | 是 | 页面标题。 | 64| options<sup>12+</sup> | [NavigationTitleOptions](ts-basic-components-navigation.md#navigationtitleoptions11) | 否 | 标题栏选项。 | 65 66### hideTitleBar 67 68hideTitleBar(value: boolean) 69 70设置是否隐藏标题栏。 71 72**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 73 74**系统能力：** SystemCapability.ArkUI.ArkUI.Full 75 76**参数：** 77 78| 参数名 | 类型 | 必填 | 说明 | 79| ------ | ------- | ---- | ------------------------------------------------------------ | 80| value | boolean | 是 | 是否隐藏标题栏。<br/>默认值：false<br/>true： 隐藏标题栏。<br/>false： 显示标题栏。 | 81 82### hideTitleBar<sup>13+</sup> 83 84hideTitleBar(hide: boolean, animated: boolean) 85 86设置是否隐藏标题栏。与[hideTitleBar](#hidetitlebar)相比，新增标题栏显隐时是否使用动画。 87 88**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 89 90**系统能力：** SystemCapability.ArkUI.ArkUI.Full 91 92**参数：** 93 94| 参数名 | 类型 | 必填 | 说明 | 95| ------ | ------- | ---- | ------------------------------------------------------------ | 96| hide | boolean | 是 | 是否隐藏标题栏。<br/>默认值：false<br/>true：隐藏标题栏。<br/>false：显示标题栏。 | 97| animated | boolean | 是 | 设置是否使用动画显隐标题栏。<br/>默认值：false<br/>true：使用动画显示隐藏标题栏。<br/>false：不使用动画显示隐藏标题栏。 | 98 99### toolbarConfiguration<sup>13+</sup> 100 101toolbarConfiguration(toolbarParam: Array<ToolbarItem> | CustomBuilder, options?: NavigationToolbarOptions) 102 103设置工具栏内容。未调用本接口时不显示工具栏。 104 105**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 106 107**系统能力：** SystemCapability.ArkUI.ArkUI.Full 108 109**参数：** 110 111| 参数名 | 类型 | 必填 | 说明 | 112| ------------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 113| toolbarParam | Array<[ToolbarItem](ts-basic-components-navigation.md#toolbaritem10)> \| [CustomBuilder](ts-types.md#custombuilder8) | 是 | 工具栏内容。<br/>使用Array<[ToolbarItem](ts-basic-components-navigation.md#toolbaritem10)>写法设置的工具栏有如下特性：<br/>-工具栏所有选项均分底部工具栏，在每个均分内容区布局文本和图标。<br/>-竖屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标中，点击更多图标，可以展示剩余内容。横屏时，如果为[Split](ts-basic-components-navigation.md#navigationmode9枚举说明)模式，仍按照竖屏规则显示，如果为[Stack](ts-basic-components-navigation.md#navigationmode9枚举说明)模式需配合menus属性的Array<[NavigationMenuItem](ts-basic-components-navigation.md#navigationmenuitem)>使用，底部工具栏会自动隐藏，同时底部工具栏所有选项移动至页面右上角菜单。<br/>使用[CustomBuilder](ts-types.md#custombuilder8)写法为用户自定义工具栏选项，除均分底部工具栏外不具备以上功能。 | 114| options | [NavigationToolbarOptions](ts-basic-components-navigation.md#navigationtoolbaroptions11) | 否 | 工具栏选项。包含工具栏背景颜色、工具栏背景模糊样式及模糊选项、工具栏背景属性、工具栏布局方式、是否隐藏工具栏的文本、工具栏更多图标的菜单选项。 | 115 116> **说明：** 117> 118> 不支持通过SymbolGlyphModifier对象的fontSize属性修改图标大小、effectStrategy属性修改动效、symbolEffect属性修改动效类型。 119 120### hideToolBar<sup>13+</sup> 121 122hideToolBar(hide: boolean, animated?: boolean) 123 124设置是否隐藏工具栏。 125 126**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 127 128**系统能力：** SystemCapability.ArkUI.ArkUI.Full 129 130**参数：** 131 132| 参数名 | 类型 | 必填 | 说明 | 133| ------ | ------- | ---- | ------------------------------------------------------------ | 134| hide | boolean | 是 | 是否隐藏工具栏。<br/>默认值：false<br/>true：隐藏工具栏。<br/>false：显示工具栏。 | 135| animated | boolean | 否 | 设置是否使用动画显隐工具栏。<br/>默认值：false<br/>true：使用动画显示隐藏工具栏。<br/>false：不使用动画显示隐藏工具栏。 | 136 137### mode <sup>11+</sup> 138 139mode(value: NavDestinationMode) 140 141设置NavDestination类型，不支持动态修改。 142 143**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 144 145**系统能力：** SystemCapability.ArkUI.ArkUI.Full 146 147**参数：** 148 149| 参数名 | 类型 | 必填 | 说明 | 150| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | 151| value | [NavDestinationMode](#navdestinationmode枚举说明11) | 是 | NavDestination类型。<br/>默认值：NavDestinationMode.STANDARD | 152 153### backButtonIcon<sup>11+</sup> 154 155backButtonIcon(value: ResourceStr | PixelMap | SymbolGlyphModifier) 156 157> **说明：** 158> 159> 不支持通过SymbolGlyphModifier对象的fontSize属性修改图标大小、effectStrategy属性修改动效、symbolEffect属性修改动效类型。 160 161 162设置标题栏返回键图标。 163 164**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 165 166**系统能力：** SystemCapability.ArkUI.ArkUI.Full 167 168**参数：** 169 170| 参数名 | 类型 | 必填 | 说明 | 171| ------ | ------------------------------------------------------------ | ---- | ------------------ | 172| value | [ResourceStr](ts-types.md#resourcestr) \| [PixelMap](../../apis-image-kit/arkts-apis-image-PixelMap.md) \| [SymbolGlyphModifier<sup>12+</sup>](ts-universal-attributes-attribute-modifier.md) | 是 | 标题栏返回键图标。 | 173 174### backButtonIcon<sup>19+</sup> 175 176backButtonIcon(icon: ResourceStr | PixelMap | SymbolGlyphModifier, accessibilityText?: ResourceStr) 177 178> **说明：** 179> 180> 不支持通过SymbolGlyphModifier对象的fontSize属性修改图标大小、effectStrategy属性修改动效、symbolEffect属性修改动效类型。 181 182 183设置标题栏返回键图标和无障碍播报内容。 184 185**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 186 187**系统能力：** SystemCapability.ArkUI.ArkUI.Full 188 189**参数：** 190 191| 参数名 | 类型 | 必填 | 说明 | 192| ------ | ------------------------------------------------------------ | ---- | ------------------ | 193| icon | [ResourceStr](ts-types.md#resourcestr) \| [PixelMap](../../apis-image-kit/arkts-apis-image-PixelMap.md) \| [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 是 | 标题栏返回键图标。 | 194| accessibilityText | [ResourceStr](ts-types.md#resourcestr) | 否 | 返回键无障碍播报内容。</br>默认值：系统语言是中文时为“返回”，系统语言是英文时为“back”。 | 195 196### menus<sup>12+</sup> 197 198menus(value: Array<NavigationMenuItem> | CustomBuilder) 199 200> **说明：** 201> 202> 不支持通过SymbolGlyphModifier对象的fontSize属性修改图标大小、effectStrategy属性修改动效、symbolEffect属性修改动效类型。 203 204 205设置页面右上角菜单。不设置时不显示菜单项。使用Array<[NavigationMenuItem](ts-basic-components-navigation.md#navigationmenuitem)> 写法时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。 206 207**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 208 209**系统能力：** SystemCapability.ArkUI.ArkUI.Full 210 211**参数：** 212 213| 参数名 | 类型 | 必填 | 说明 | 214| ------ | ------------------------------------------------------------ | ---- | ------------------ | 215| value | Array<[NavigationMenuItem](ts-basic-components-navigation.md#navigationmenuitem)> \| [CustomBuilder](ts-types.md#custombuilder8) | 是 | 页面右上角菜单。 | 216 217### menus<sup>19+</sup> 218 219menus(items: Array<NavigationMenuItem> | CustomBuilder, options?: NavigationMenuOptions) 220 221> **说明：** 222> 223> 不支持通过SymbolGlyphModifier对象的fontSize属性修改图标大小、effectStrategy属性修改动效、symbolEffect属性修改动效类型。 224 225 226设置页面右上角菜单。不设置时不显示菜单项。与[menus](#menus12)相比，新增菜单选项。使用Array<[NavigationMenuItem](ts-basic-components-navigation.md#navigationmenuitem)> 写法时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。 227 228**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 229 230**系统能力：** SystemCapability.ArkUI.ArkUI.Full 231 232**参数：** 233 234| 参数名 | 类型 | 必填 | 说明 | 235| ------ | ------------------------------------------------------------ | ---- | ------------------ | 236| items | Array<[NavigationMenuItem](ts-basic-components-navigation.md#navigationmenuitem)> \| [CustomBuilder](ts-types.md#custombuilder8) | 是 | 页面右上角菜单。 | 237| options | [NavigationMenuOptions](ts-basic-components-navigation.md#navigationmenuoptions19) | 否 | 页面右上角菜单选项。 | 238 239### ignoreLayoutSafeArea<sup>12+</sup> 240 241ignoreLayoutSafeArea(types?: Array<LayoutSafeAreaType>, edges?: Array<LayoutSafeAreaEdge>) 242 243控制组件的布局，使其扩展到非安全区域 244 245**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 246 247**系统能力：** SystemCapability.ArkUI.ArkUI.Full 248 249**参数：** 250 251| 参数名 | 类型 | 必填 | 说明 | 252| ------ | -------------------------------------------------- | ---- | ------------------------------------------------------------ | 253| types | Array <[LayoutSafeAreaType](ts-universal-attributes-expand-safe-area.md#layoutsafeareatype12)> | 否 | 配置扩展安全区域的类型。<br />默认值：<br />[LayoutSafeAreaType.SYSTEM] | 254| edges | Array <[LayoutSafeAreaEdge](ts-universal-attributes-expand-safe-area.md#layoutsafeareaedge12)> | 否 | 配置扩展安全区域的方向。<br /> 默认值：<br />[LayoutSafeAreaEdge.TOP, LayoutSafeAreaEdge.BOTTOM]。| 255 256> **说明：** 257> 258> 组件设置ignoreLayoutSafeArea之后生效的条件为： 259> 设置LayoutSafeAreaType.SYSTEM时，组件的边界与非安全区域重合时组件能够延伸到非安全区域下。例如：设备顶部状态栏高度100，组件在屏幕中纵向方位的绝对偏移需要在0到100之间。 260> 261> 若组件延伸到非安全区域内，此时在非安全区域里触发的事件（例如：点击事件）等可能会被系统拦截，优先响应状态栏等系统组件。 262 263### systemBarStyle<sup>12+</sup> 264 265systemBarStyle(style: Optional<SystemBarStyle>) 266 267当Navigation中显示当前NavDestination时，设置对应系统状态栏的样式。 268 269**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 270 271**系统能力：** SystemCapability.ArkUI.ArkUI.Full 272 273**参数：** 274 275| 参数名 | 类型 | 必填 | 说明 | 276| ------ | -------------- | ---- | ------------------ | 277| style | [Optional](ts-universal-attributes-custom-property.md#optionalt12)<[SystemBarStyle](../arkts-apis-window-i.md#systembarstyle12)> | 是 | 系统状态栏样式。 | 278 279> **说明：** 280> 281> 1. 必须配合Navigation使用，作为其Navigation目的页面的根节点时才能生效。 282> 2. 其他使用限制请参考Navigation对应的[systemBarStyle](ts-basic-components-navigation.md#systembarstyle12)属性说明。 283 284### systemTransition<sup>14+</sup> 285systemTransition(type: NavigationSystemTransitionType) 286 287设置NavDestination系统转场动画，支持分别设置系统标题栏动画和内容动画。 288 289**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 290 291**系统能力：** SystemCapability.ArkUI.ArkUI.Full 292 293**参数：** 294 295| 参数名 | 类型 | 必填 | 说明 | 296| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | 297| type | [NavigationSystemTransitionType](#navigationsystemtransitiontype14枚举说明) | 是 | 系统转场动画类型。<br/>默认值：NavigationSystemTransitionType.DEFAULT | 298 299### recoverable<sup>14+</sup> 300 301recoverable(recoverable: Optional<boolean>) 302 303配置NavDestination是否可恢复。如配置为可恢复，当应用进程异常退出并重新冷启动时，可自动创建该NavDestination。该功能需NavDestination对应的Navigation也配置了[可恢复属性](ts-basic-components-navigation.md#recoverable14)。 304 305**系统能力：** SystemCapability.ArkUI.ArkUI.Full 306 307**参数：** 308 309| 参数名 | 类型 | 必填 | 说明 | 310| ------ | -------------- | ---- | ------------------ | 311| recoverable | [Optional](ts-universal-attributes-custom-property.md#optionalt12)<boolean> | 是 | NavDestination是否可恢复，默认为不可恢复。<br/>默认值：false<br/>true：路由栈可恢复。<br/>false：路由栈不可恢复。 | 312 313> **使用说明：** 314> 315> 该接口需要配合Navigation的[recoverable](./ts-basic-components-navigation.md#recoverable14)接口使用。 316 317### bindToScrollable<sup>14+</sup> 318bindToScrollable(scrollers: Array<Scroller>) 319 320绑定NavDestination组件和可滚动容器组件（支持[List](./ts-container-list.md)、[Scroll](./ts-container-scroll.md)、[Grid](./ts-container-grid.md)、[WaterFlow](./ts-container-waterflow.md)），当滑动可滚动容器组件时，会触发所有与其绑定的NavDestination组件的标题栏和工具栏的显示和隐藏动效，上滑隐藏，下滑显示。一个NavDestination可与多个可滚动容器组件绑定，一个可滚动容器组件也可与多个NavDestination绑定。使用示例参见[示例1](#示例1标题栏工具栏与可滚动类组件联动)。 321 322> **说明：** 323> 324> - 只有NavDestination的标题栏或工具栏设置为可见时，联动效果才会生效。 325> - 当多个可滚动容器组件绑定了同一个NavDestination组件时，滚动任何一个容器都会触发标题栏和工具栏的显示或隐藏效果。且当任何一个可滚动容器组件滑动到底部或顶部位置时，会立即触发标题栏和工具栏的显示动效。因此，为了获得最佳用户体验，不建议同时触发多个可滚动容器组件的滚动事件。 326 327**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 328 329**系统能力：** SystemCapability.ArkUI.ArkUI.Full 330 331**参数：** 332 333| 参数名 | 类型 | 必填 | 说明 | 334| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | 335| scrollers | Array<[Scroller](./ts-container-scroll.md#scroller)> | 是 | 可滚动容器组件的控制器。 | 336 337### bindToNestedScrollable<sup>14+</sup> 338bindToNestedScrollable(scrollInfos: Array<NestedScrollInfo>) 339 340绑定NavDestination组件和嵌套的可滚动容器组件（支持[List](./ts-container-list.md)、[Scroll](./ts-container-scroll.md)、[Grid](./ts-container-grid.md)、[WaterFlow](./ts-container-waterflow.md)），当滑动父组件或子组件时，会触发所有与其绑定的NavDestination组件的标题栏和工具栏的显示和隐藏动效，上滑隐藏，下滑显示。一个NavDestination可与多个嵌套的可滚动容器组件绑定，嵌套的可滚动容器组件也可与多个NavDestination绑定。使用示例参见[示例1](#示例1标题栏工具栏与可滚动类组件联动)。 341 342> **说明：** 343> 344> - 只有NavDestination的标题栏或工具栏设置为可见时，联动效果才会生效。 345> - 当多个可滚动容器组件绑定了同一个NavDestination组件时，滚动任何一个容器都会触发标题栏和工具栏的显示或隐藏效果。且当任何一个可滚动容器组件滑动到底部或顶部位置时，会立即触发标题栏和工具栏的显示动效。因此，为了获得最佳用户体验，不建议同时触发多个可滚动容器组件的滚动事件。 346 347**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 348 349**系统能力：** SystemCapability.ArkUI.ArkUI.Full 350 351**参数：** 352 353| 参数名 | 类型 | 必填 | 说明 | 354| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | 355| scrollInfos | Array<[NestedScrollInfo](#nestedscrollinfo14)> | 是 | 嵌套的可滚动容器组件的控制器。 | 356 357### hideBackButton<sup>15+</sup> 358 359hideBackButton(hide: Optional<boolean>) 360 361设置是否隐藏标题栏中的返回键。 362 363**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 364 365**系统能力：** SystemCapability.ArkUI.ArkUI.Full 366 367**参数：** 368 369| 参数名 | 类型 | 必填 | 说明 | 370| ------ | ------- | ---- | ------------------------------------------------------------ | 371| hide | [Optional](ts-universal-attributes-custom-property.md#optionalt12)<boolean> | 是 | 是否隐藏标题栏中的返回键。 <br/>默认值：false<br/>true：隐藏返回键。<br/>false：显示返回键。 | 372 373### customTransition<sup>15+</sup> 374 375customTransition(delegate: NavDestinationTransitionDelegate) 376 377设置NavDestination自定义转场动画。 378 379> **说明：** 380> 381> 该属性与[systemTransition](#systemtransition14)同时设置时，后设置的属性生效。 382 383**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 384 385**系统能力：** SystemCapability.ArkUI.ArkUI.Full 386 387**参数：** 388 389| 参数名 | 类型 | 必填 | 说明 | 390| ------ | ------- | ---- | ------------------------------------------------------------ | 391| delegate | [NavDestinationTransitionDelegate](#navdestinationtransitiondelegate15) | 是 | NavDestination自定义动画的代理函数。 | 392 393### preferredOrientation<sup>19+</sup> 394 395preferredOrientation(orientation: Optional<Orientation>) 396 397设置NavDestination对应的显示方向。转场到该NavDestination后，系统也会将应用主窗口切到该显示方向。 398 399> **说明：** 400> 401> 该属性满足如下全部条件时才有效： 402> 1. NavDestination属于应用主窗口页面，并且主窗口为全屏窗口； 403> 2. NavDestination所属的Navigation的大小占满整个应用页面； 404> 3. NavDestination类型为[STANDARD](#navdestinationmode枚举说明11)。 405> 406> 设置显示方向的实际效果依赖于具体的设备支持情况，具体参考窗口的[setPreferredOrientation](../arkts-apis-window-Window.md#setpreferredorientation9-1)接口。 407 408**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 409 410**系统能力：** SystemCapability.ArkUI.ArkUI.Full 411 412**参数：** 413 414| 参数名 | 类型 | 必填 | 说明 | 415| ------ | ------- | ---- | ------------------------------------------------------------ | 416| orientation | [Optional](ts-universal-attributes-custom-property.md#optionalt12)<[Orientation](#orientation19)> | 是 | NavDestination页面对应的Orientation。 | 417 418### enableStatusBar<sup>19+</sup> 419 420enableStatusBar(enabled: Optional<boolean>, animated?: boolean) 421 422设置进入该NavDestination后，显示或者隐藏系统的状态栏。 423 424> **说明：** 425> 426> 该属性满足如下全部条件时才生效： 427> 1. NavDestination属于应用主窗口页面，并且主窗口为全屏窗口； 428> 2. NavDestination所属的Navigation的大小占满整个页面； 429> 3. NavDestination的大小占满整个Navigation组件； 430> 4. NavDestination类型为[STANDARD](#navdestinationmode枚举说明11)。 431> 432> 设置系统状态栏的实际效果依赖于具体的设备支持情况，具体参考窗口的[setSpecificSystemBarEnabled](../arkts-apis-window-Window.md#setspecificsystembarenabled11)接口。 433 434**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 435 436**系统能力：** SystemCapability.ArkUI.ArkUI.Full 437 438**参数：** 439 440| 参数名 | 类型 | 必填 | 说明 | 441| ------ | ------- | ---- | ------------------------------------------------------------ | 442| enabled | [Optional](ts-universal-attributes-custom-property.md#optionalt12)<boolean> | 是 | 进入该NavDestination后，系统状态栏的显示/隐藏状态。<br/>true： 显示状态栏。<br/>false： 隐藏状态栏。 | 443| animated | boolean | 否 | 是否使用动画的方式显示/隐藏系统状态栏，默认值为：false。<br/>true：使用动画的方式显示/隐藏系统状态栏。<br/>false：不使用动画的方式显示/隐藏系统状态栏。 | 444 445### enableNavigationIndicator<sup>19+</sup> 446 447enableNavigationIndicator(enabled: Optional<boolean>) 448 449设置进入该NavDestination后，显示或者隐藏系统的导航条。 450 451> **说明：** 452> 453> 该属性满足如下全部条件时才生效： 454> 1. NavDestination属于应用主窗口页面，并且主窗口为全屏窗口； 455> 2. NavDestination所属的Navigation的大小占满整个页面； 456> 3. NavDestination的大小占满整个Navigation组件； 457> 4. NavDestination类型为[STANDARD](#navdestinationmode枚举说明11)。 458> 459> 设置系统导航条的实际效果依赖于具体的设备支持情况，具体参考窗口的[setSpecificSystemBarEnabled](../arkts-apis-window-Window.md#setspecificsystembarenabled11)接口。 460 461**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 462 463**系统能力：** SystemCapability.ArkUI.ArkUI.Full 464 465**参数：** 466 467| 参数名 | 类型 | 必填 | 说明 | 468| ------ | ------- | ---- | ------------------------------------------------------------ | 469| enabled | [Optional](ts-universal-attributes-custom-property.md#optionalt12)<boolean> | 是 | 进入该NavDestination后，系统导航条的显示/隐藏状态。 <br/>true： 显示导航条。<br/>false： 隐藏导航条。 | 470 471## NavDestinationMode枚举说明<sup>11+</sup> 472 473NavDestination类型。 474 475**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 476 477**系统能力：** SystemCapability.ArkUI.ArkUI.Full 478 479| 名称 | 值 | 说明 | 480| ---- | --- | ---------------------------------------- | 481| STANDARD | 0 | 标准模式的NavDestination。 | 482| DIALOG | 1 | 默认透明，进出路由栈不影响下层NavDestination的可见性（onShown、onHidden等生命周期），只会触发onActive、onInactive这两个生命周期。<br/>API version 13之前，默认无系统转场动画。从API version 13开始，支持系统转场动画。 | 483 484## NavigationSystemTransitionType<sup>14+</sup>枚举说明 485 486系统转场动画类型。 487 488**系统能力：** SystemCapability.ArkUI.ArkUI.Full 489 490| 名称 | 值 | 说明 | 491| ---- | --- | ----- | 492| DEFAULT | 0 | 默认系统转场动画。<br/>**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。| 493| NONE| 1 | 无系统转场动画。<br/>**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。| 494| TITLE | 2 | 标题栏系统转场动画。<br/>**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。| 495| CONTENT | 3 | 内容区系统转场动画。<br/>**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。| 496| FADE<sup>15+</sup> | 4 | 渐变类型的系统转场动画。<br/>**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 | 497| EXPLODE<sup>15+</sup> | 5 | 中心缩放类型的系统转场动画。<br/>**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 | 498| SLIDE_RIGHT<sup>15+</sup> | 6 | 右侧平移类型的系统转场动画。<br/>**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 | 499| SLIDE_BOTTOM<sup>15+</sup> | 7 | 底部平移类型的系统转场动画。<br/>**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 | 500 501**说明：** 502> 503> 设置系统转场动画，支持分别设置系统标题栏动画和内容动画。 504> 505> 系统默认转场动画中只有STANDARD页面的push和pop动画有单独的标题栏动画，存在如下限制： 506> 1. 设置NavigationSystemTransitionType为TITLE时，系统转场只有标题栏动画。 507> 2. 设置NavigationSystemTransitionType为CONTENT时，系统转场只有内容区动画。 508> 509> 设置NONE或者TITLE时没有系统转场动画，设置CONTENT和DEFAULT时默认系统转场动画。 510 511## 事件 512 513除支持[通用事件](ts-component-general-events.md)外，还支持如下事件： 514 515### onShown<sup>10+</sup> 516 517onShown(callback: () => void) 518 519当该NavDestination页面显示时触发此回调。 520 521**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 522 523**系统能力：** SystemCapability.ArkUI.ArkUI.Full 524 525**参数：** 526 527| 参数名 | 类型 | 必填 | 说明 | 528| -------- | ------------------- | ---- | ------------------------------------------ | 529| callback | () => void | 是 | 当该NavDestination页面显示时触发此回调。| 530 531### onHidden<sup>10+</sup> 532 533onHidden(callback: () => void) 534 535当该NavDestination页面隐藏时触发此回调。 536 537**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 538 539**系统能力：** SystemCapability.ArkUI.ArkUI.Full 540 541**参数：** 542 543| 参数名 | 类型 | 必填 | 说明 | 544| -------- | ------------------- | ---- | ------------------------------------------ | 545| callback | () => void | 是 | 当该NavDestination页面隐藏时触发此回调。| 546 547### onWillAppear<sup>12+</sup> 548 549onWillAppear(callback: Callback\<void>) 550 551当该Destination挂载之前触发此回调。在该回调中允许修改路由栈，当前帧生效。 552 553**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 554 555**系统能力：** SystemCapability.ArkUI.ArkUI.Full 556 557**参数：** 558 559| 参数名 | 类型 | 必填 | 说明 | 560| -------- | ------------------- | ---- | ------------------------------------------ | 561| callback | Callback\<void> | 是 | 当该Destination挂载之前触发此回调。在该回调中允许修改路由栈，当前帧生效。| 562 563### onWillShow<sup>12+</sup> 564 565onWillShow(callback: Callback\<void>) 566 567当该Destination显示之前触发此回调。 568 569**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 570 571**系统能力：** SystemCapability.ArkUI.ArkUI.Full 572 573**参数：** 574 575| 参数名 | 类型 | 必填 | 说明 | 576| -------- | ------------------- | ---- | ------------------------------------------ | 577| callback | Callback\<void> | 是 | 当该Destination显示之前触发此回调。| 578 579### onWillHide<sup>12+</sup> 580 581onWillHide(callback: Callback\<void>) 582 583当该Destination隐藏之前触发此回调。 584 585**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 586 587**系统能力：** SystemCapability.ArkUI.ArkUI.Full 588 589**参数：** 590 591| 参数名 | 类型 | 必填 | 说明 | 592| -------- | ------------------- | ---- | ------------------------------------------ | 593| callback | Callback\<void> | 是 | 当该Destination隐藏之前触发此回调。| 594 595### onWillDisappear<sup>12+</sup> 596 597onWillDisappear(callback: Callback\<void>) 598 599当该Destination卸载之前触发的生命周期(有转场动画时，在转场动画开始之前触发)。 600 601**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 602 603**系统能力：** SystemCapability.ArkUI.ArkUI.Full 604 605**参数：** 606 607| 参数名 | 类型 | 必填 | 说明 | 608| -------- | ------------------- | ---- | ------------------------------------------ | 609| callback | Callback\<void> | 是 | 当该Destination卸载之前触发的生命周期(有转场动画时，在转场动画开始之前触发)。| 610 611### onBackPressed<sup>10+</sup> 612 613onBackPressed(callback: () => boolean) 614 615当与Navigation绑定的导航控制器中存在内容时，此回调生效。当点击返回键时，触发该回调。 616 617返回值为true时，表示重写返回键逻辑，返回值为false时，表示回退到上一个页面。 618 619**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 620 621**系统能力：** SystemCapability.ArkUI.ArkUI.Full 622 623**参数：** 624 625| 参数名 | 类型 | 必填 | 说明 | 626| -------- | ------------------- | ---- | ------------------------------------------ | 627| callback | () => boolean | 是 | 当与Navigation绑定的导航控制器中存在内容时，此回调生效。当点击返回键时，触发该回调。| 628 629### onReady<sup>11+</sup> 630 631onReady(callback: [Callback](../../apis-basic-services-kit/js-apis-base.md#callback)<[NavDestinationContext](#navdestinationcontext11)>) 632 633当NavDestination即将构建子组件之前会触发此回调。 634 635**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 636 637**系统能力：** SystemCapability.ArkUI.ArkUI.Full 638 639**参数：** 640 641| 参数名 | 类型 | 必填 | 说明 | 642| -------- | ------------------- | ---- | ------------------------------------------ | 643| callback | [Callback](../../apis-basic-services-kit/js-apis-base.md#callback)<[NavDestinationContext](#navdestinationcontext11)> | 是 | 当NavDestination即将构建子组件之前会触发此回调。| 644 645### onResult<sup>15+</sup> 646 647onResult(callback: Optional\<Callback\<ESObject\>\>) 648 649NavDestination返回时触发该回调。 650 651**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 652 653**系统能力：** SystemCapability.ArkUI.ArkUI.Full 654 655**参数：** 656| 参数名 | 类型 | 必填 | 说明 | 657| ------ | ------ | ---- | ---------------- | 658|callback | [Optional](./ts-universal-attributes-custom-property.md)\<[Callback](../../apis-basic-services-kit/js-apis-base.md#callback)\<ESObject\>\>| 是 | 页面返回回调，入参为[pop](ts-basic-components-navigation.md#pop11)、[popToName](ts-basic-components-navigation.md#poptoname11)、[popToIndex](ts-basic-components-navigation.md#poptoindex11)接口传入的result参数。如果不传该参数，入参为undefined。| 659 660### onActive<sup>17+</sup> 661 662onActive(callback: Optional\<Callback\<NavDestinationActiveReason\>\>) 663 664NavDestination处于激活态（处于栈顶可操作，且上层无特殊组件遮挡）时，触发该回调。 665 666**原子化服务API：** 从API version 17开始，该接口支持在原子化服务中使用。 667 668**系统能力：** SystemCapability.ArkUI.ArkUI.Full 669 670**参数：** 671| 参数名 | 类型 | 必填 | 说明 | 672| ------ | ------ | ---- | ---------------- | 673|callback | [Optional](./ts-universal-attributes-custom-property.md#optionalt12)\<[Callback](../../apis-basic-services-kit/js-apis-base.md#callback)\<[NavDestinationActiveReason](#navdestinationactivereason17)\>\>| 是 | NavDestination由非激活态变为激活态的原因。| 674 675### onInactive<sup>17+</sup> 676 677onInactive(callback: Optional\<Callback\<NavDestinationActiveReason\>\>) 678 679NavDestination处于非激活态（处于非栈顶不可操作，或处于栈顶时上层有特殊组件遮挡）时，触发该回调。 680 681**原子化服务API：** 从API version 17开始，该接口支持在原子化服务中使用。 682 683**系统能力：** SystemCapability.ArkUI.ArkUI.Full 684 685**参数：** 686| 参数名 | 类型 | 必填 | 说明 | 687| ------ | ------ | ---- | ---------------- | 688|callback | [Optional](./ts-universal-attributes-custom-property.md#optionalt12)\<[Callback](../../apis-basic-services-kit/js-apis-base.md#callback)\<[NavDestinationActiveReason](#navdestinationactivereason17)\>\>| 是 | NavDestination由激活态变为非激活态的原因。| 689 690### onNewParam<sup>19+</sup> 691 692onNewParam(callback: Optional\<Callback\<ESObject\>\>) 693 694当之前存在于栈中的NavDestination页面通过[launchMode.MOVE_TO_TOP_SINGLETON](./ts-basic-components-navigation.md#launchmode12枚举说明)或[launchMode.POP_TO_SINGLETON](./ts-basic-components-navigation.md#launchmode12枚举说明)移动到栈顶时，触发该回调。 695 696**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 697 698**系统能力：** SystemCapability.ArkUI.ArkUI.Full 699 700**参数：** 701| 参数名 | 类型 | 必填 | 说明 | 702| ------ | ------ | ---- | ---------------- | 703|callback | [Optional](./ts-universal-attributes-custom-property.md#optionalt12)\<[Callback](../../apis-basic-services-kit/js-apis-base.md#callback)\<ESObject\>\>| 是 | onNewParam触发时的回调函数，入参为路由跳转时传递到目标页面的数据。| 704 705> **说明：** 706> 707> [replacePath](./ts-basic-components-navigation.md#replacepath11)、[replaceDestination](./ts-basic-components-navigation.md#replacedestination18)不会触发该回调。 708 709## NavDestinationCommonTitle 710 711NavDestination通用标题。 712 713**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 714 715**系统能力：** SystemCapability.ArkUI.ArkUI.Full 716 717| 名称 | 类型 | 必填 | 说明 | 718| ---- | ------ | ---- | ------ | 719| main | string \| [Resource<sup>14+<sup>](ts-types.md#resource) | 是 | 设置主标题。 | 720| sub | string \| [Resource<sup>14+<sup>](ts-types.md#resource) | 是 | 设置副标题。 | 721 722## NavDestinationCustomTitle 723 724NavDestination自定义标题。 725 726**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 727 728**系统能力：** SystemCapability.ArkUI.ArkUI.Full 729 730| 名称 | 类型 | 必填 | 说明 | 731| ------- | ---------------------------------------- | ---- | -------- | 732| builder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 设置标题栏内容。 | 733| height | [TitleHeight](ts-appendix-enums.md#titleheight9) \| [Length](ts-types.md#length) | 是 | 设置标题栏高度。<br/>取值范围：[0, +∞)。 | 734 735## NavDestinationContext<sup>11+</sup> 736 737NavDestination上下文信息。 738 739**系统能力：** SystemCapability.ArkUI.ArkUI.Full 740 741| 名称 | 类型 | 必填 | 说明 | 742| ---- | ------ | ----- | ------ | 743| pathInfo | [NavPathInfo](ts-basic-components-navigation.md#navpathinfo10) | 是 | 跳转NavDestination时指定的参数。 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 744| pathStack | [NavPathStack](ts-basic-components-navigation.md#navpathstack10) | 是 | 当前NavDestination所处的导航控制器。 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 745| navDestinationId<sup>12+</sup> | string | 否 | 当前NavDestination的唯一ID，由系统自动生成，和组件通用属性id无关。 <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 746 747### getConfigInRouteMap<sup>12+</sup> 748 749getConfigInRouteMap(): RouteMapConfig | undefined 750 751获取当前NavDestination的路由配置信息。 752 753**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 754 755**系统能力：** SystemCapability.ArkUI.ArkUI.Full 756 757**返回值** 758 759| 类型 | 说明 | 760| --- | --- | 761| [RouteMapConfig](#routemapconfig12) | 当前页面路由配置信息。 | 762| undefined | 当该页面不是通过路由表配置时返回undefined。 | 763 764## RouteMapConfig<sup>12+</sup> 765 766路由配置信息。 767 768**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 769 770**系统能力：** SystemCapability.ArkUI.ArkUI.Full 771 772| 名称 | 类型 |必填 | 说明 | 773| ---- | --- | ---- |----- | 774| name | string | 是 | 页面名称。| 775| pageSourceFile| string | 是 | 页面在当前包中的路径。| 776| data | Object | 是 | 页面自定义字段信息。| 777 778## NestedScrollInfo<sup>14+</sup> 779 780嵌套可滚动容器组件信息 781 782**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 783 784**系统能力：** SystemCapability.ArkUI.ArkUI.Full 785 786| 名称 | 类型 |必填 | 说明 | 787| ---- | --- | ---- |----- | 788| parent | [Scroller](./ts-container-scroll.md#scroller) | 是 | 可滚动容器组件的控制器。 | 789| child | [Scroller](./ts-container-scroll.md#scroller) | 是 | 可滚动容器组件的控制器，child对应的组件需要是parent对应组件的子组件，且组件间存在嵌套滚动关系。| 790 791### NavDestinationActiveReason<sup>17+</sup> 792 793NavDestination激活态或者非激活态变化的原因。 794 795**原子化服务API：** 从API version 17开始，该接口支持在原子化服务中使用。 796 797**系统能力：** SystemCapability.ArkUI.ArkUI.Full 798 799| 名称 | 值 | 说明 | 800| ---- | -- | ---------------------------------------- | 801| TRANSITION | 0 | 通过页面跳转的方式使NavDestination激活态发生变化。 | 802| CONTENT_COVER | 1 | 通过全模态的开启和关闭使NavDestination激活态发生变化。 | 803| SHEET | 2 | 通过半模态的开启或关闭使NavDestination激活态发生变化。 | 804| DIALOG | 3 | 通过自定义Dialog开启或关闭使NavDestination激活态发生变化。 | 805| OVERLAY | 4 | 通过OverlayManager开启或者关闭Overlay使NavDestination激活态发生变化。| 806| APP_STATE | 5 | 通过前后台切换使NavDestination激活态发生变化。 | 807 808## NavDestinationTransition<sup>15+</sup> 809 810NavDestination自定义动画接口。 811 812**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 813 814**系统能力：** SystemCapability.ArkUI.ArkUI.Full 815 816| 名称 | 类型 |必填 | 说明 | 817| ---- | --- | ---- |----- | 818| onTransitionEnd | Callback\<void> | 否 | 转场动画结束时的回调函数。 | 819| duration | number | 否 | 转场动画的持续时间，默认值为1000（毫秒）。 | 820| curve | [Curve](ts-appendix-enums.md#curve) | 否 | 动画的曲线类型，默认值为[Curve.EaseInOut](ts-appendix-enums.md#curve)。 | 821| delay | number | 否 | 转场动画的延迟。默认值为0（毫秒）。 | 822| event | Callback\<void> | 是 | 指定转场动效的闭包函数，系统会根据闭包中对组件UI状态的修改，生成对应的过渡动画。参见[animateTo](../arkts-apis-uicontext-uicontext.md#animateto)中的event。 | 823 824## NavDestinationTransitionDelegate<sup>15+</sup> 825 826type NavDestinationTransitionDelegate = (operation: NavigationOperation, isEnter: boolean) => Array\<NavDestinationTransition> | undefined 827 828NavDestination自定义转场动画的代理函数。 829 830**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 831 832**系统能力：** SystemCapability.ArkUI.ArkUI.Full 833 834**参数：** 835 836| 参数名 | 类型 | 必填 | 说明 | 837|------|--------|----|-----------------------| 838| operation | [NavigationOperation](ts-basic-components-navigation.md#navigationoperation11枚举说明) | 是 | 当前页面转场的操作类型。 | 839| isEnter | boolean | 是 | 当前页面是否为入场页面。<br/>true： 当前页面是入场页面。<br/>false： 当前页面不是入场页面。 | 840 841**返回值：** 842 843| 类型 | 说明 | 844|---------|-----------| 845| Array<[NavDestinationTransition](#navdestinationtransition15)> \| undefined | NavDestination页面的自定义动画集合。如果返回undefined则做系统默认动画。 | 846 847## Orientation<sup>19+</sup> 848 849type Orientation = Orientation 850 851Orientation实例对象。 852 853**系统能力：** SystemCapability.ArkUI.ArkUI.Full 854 855**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 856 857| 类型 | 说明 | 858| ------ | ---------- | 859| [Orientation](../arkts-apis-window-e.md#orientation9) | 返回Orientation实例对象。 | 860 861## 示例 862 863### 示例1（标题栏工具栏与可滚动类组件联动） 864 865以下示例主要演示NavDestination绑定可滚动容器组件来实现滚动内容时触发标题栏和工具栏显示隐藏的效果。 866 867```ts 868import { SymbolGlyphModifier } from '@kit.ArkUI'; 869 870@Component 871struct MyPageOne { 872 private listScroller: Scroller = new Scroller(); 873 private scrollScroller: Scroller = new Scroller(); 874 private arr: number[] = []; 875 876 aboutToAppear(): void { 877 for (let i = 0; i < 30; i++) { 878 this.arr.push(i); 879 } 880 } 881 882 build() { 883 NavDestination() { 884 Scroll(this.scrollScroller) { 885 Column() { 886 List({ space: 0, initialIndex: 0, scroller: this.listScroller }) { 887 ForEach(this.arr, (item: number, index: number) => { 888 ListItem() { 889 Text('' + item) 890 .height(100) 891 .fontSize(16) 892 .textAlign(TextAlign.Center) 893 .width('90%') 894 .margin({ left: '5%' }) 895 .borderRadius(10) 896 .backgroundColor(Color.Gray) 897 } 898 }, (item: string) => item); 899 }.width('100%').height('80%').scrollBar(BarState.Off) 900 .nestedScroll({ scrollForward: NestedScrollMode.SELF_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST }) 901 902 ForEach(this.arr, (item: number, index: number) => { 903 ListItem() { 904 Text('' + item) 905 .height(100) 906 .fontSize(16) 907 .textAlign(TextAlign.Center) 908 .width('90%') 909 .margin({ top: '5%' }) 910 .borderRadius(10) 911 .backgroundColor(Color.Pink) 912 } 913 }, (item: string) => item); 914 } 915 } 916 .width('100%') 917 .scrollBar(BarState.Off) 918 .scrollable(ScrollDirection.Vertical) 919 .edgeEffect(EdgeEffect.Spring) 920 } 921 .title('PageOne', { backgroundColor: Color.Yellow, barStyle: BarStyle.STACK }) 922 .toolbarConfiguration([ 923 { 924 // $r('sys.symbol.phone_badge_star')需要替换为开发者所需的资源文件 925 value: 'item1', 926 symbolIcon: new SymbolGlyphModifier($r('sys.symbol.phone_badge_star')) 927 } 928 ], { backgroundColor: Color.Orange, barStyle: BarStyle.STACK }) 929 // 绑定有父子关系的可滚动容器组件 930 .bindToNestedScrollable([{ parent: this.scrollScroller, child: this.listScroller }]) 931 } 932} 933 934@Component 935struct MyPageTwo { 936 private listScroller: Scroller = new Scroller(); 937 private arr: number[] = []; 938 939 aboutToAppear(): void { 940 for (let i = 0; i < 30; i++) { 941 this.arr.push(i); 942 } 943 } 944 945 build() { 946 NavDestination() { 947 List({ scroller: this.listScroller }) { 948 ForEach(this.arr, (item: number, index: number) => { 949 ListItem() { 950 Text('' + item) 951 .height(100) 952 .fontSize(16) 953 .textAlign(TextAlign.Center) 954 .width('90%') 955 .margin({ left: '5%' }) 956 .borderRadius(10) 957 .backgroundColor(Color.Gray) 958 } 959 }, (item: string) => item); 960 }.width('100%') 961 } 962 .title('PageTwo', { backgroundColor: Color.Yellow, barStyle: BarStyle.STACK }) 963 .toolbarConfiguration([ 964 { 965 // $r('sys.symbol.phone_badge_star')需要替换为开发者所需的资源文件 966 value: 'item1', 967 symbolIcon: new SymbolGlyphModifier($r('sys.symbol.phone_badge_star')) 968 } 969 ], { backgroundColor: Color.Orange, barStyle: BarStyle.STACK }) 970 // 绑定可滚动容器组件 971 .bindToScrollable([this.listScroller]) 972 } 973} 974 975@Entry 976@Component 977struct Index { 978 private stack: NavPathStack = new NavPathStack(); 979 980 @Builder 981 MyPageMap(name: string) { 982 if (name === 'myPageOne') { 983 MyPageOne(); 984 } else { 985 MyPageTwo(); 986 } 987 } 988 989 build() { 990 Navigation(this.stack) { 991 Column() { 992 Button('push PageOne').onClick(() => { 993 this.stack.pushPath({ name: 'myPageOne' }); 994 }) 995 Button('push PageTwo').onClick(() => { 996 this.stack.pushPath({ name: 'myPageTwo' }); 997 }) 998 }.height('40%').justifyContent(FlexAlign.SpaceAround) 999 }.width('100%') 1000 .height('100%') 1001 .title({ main: 'MainTitle', sub: 'subTitle' }) 1002 .navDestination(this.MyPageMap) 1003 } 1004} 1005``` 1006 1007 1008### 示例2（设置NavDestination自定义转场） 1009 1010以下示例主要演示NavDestination设置自定义转场动画属性[customTransition](#customtransition15)的效果。 1011 1012```ts 1013@Entry 1014@Component 1015struct NavDestinationCustomTransition { 1016 stack: NavPathStack = new NavPathStack(); 1017 1018 @Builder 1019 pageMap(name: string) { 1020 if (name) { 1021 NavDest(); 1022 } 1023 } 1024 1025 aboutToAppear(): void { 1026 this.stack.pushPath({name: 'dest0'}); 1027 } 1028 1029 build() { 1030 Navigation(this.stack) { 1031 // empty 1032 } 1033 .navDestination(this.pageMap) 1034 .hideNavBar(true) 1035 .title('Main Page') 1036 .titleMode(NavigationTitleMode.Mini) 1037 } 1038} 1039 1040declare type voidFunc = () => void; 1041 1042@Component 1043struct NavDest { 1044 @State name: string = 'NA'; 1045 @State destWidth: string = '100%'; 1046 stack: NavPathStack = new NavPathStack(); 1047 @State y: string = '0'; 1048 1049 build() { 1050 NavDestination() { 1051 Column() { 1052 Button('push next page', { stateEffect: true, type: ButtonType.Capsule }) 1053 .width('80%') 1054 .height(40) 1055 .margin(20) 1056 .onClick(() => { 1057 this.stack.pushPath({ name: this.name == 'PageOne' ? "PageTwo" : "PageOne" }); 1058 }) 1059 } 1060 .size({ width: '100%', height: '100%' }) 1061 } 1062 .title(this.name) 1063 .translate({ y: this.y }) 1064 .onReady((context) => { 1065 this.name = context.pathInfo.name; 1066 this.stack = context.pathStack; 1067 }) 1068 .backgroundColor(this.name == 'PageOne' ? '#F1F3F5' : '#ff11dee5') 1069 .customTransition( 1070 (op: NavigationOperation, isEnter: boolean) 1071 : Array<NavDestinationTransition> | undefined => { 1072 console.info('[NavDestinationTransition]', 'reached delegate in frontend, op: ' + op + ', isEnter: ' + isEnter); 1073 1074 let transitionOneEvent: voidFunc = () => { console.info('[NavDestinationTransition]', 'reached transitionOne, empty now!'); } 1075 let transitionOneFinishEvent: voidFunc = () => { console.info('[NavDestinationTransition]', 'reached transitionOneFinish, empty now!'); } 1076 let transitionOneDuration: number = 500; 1077 if (op === NavigationOperation.PUSH) { 1078 if (isEnter) { 1079 // ENTER_PUSH 1080 this.y = '100%'; 1081 transitionOneEvent = () => { 1082 console.info('[NavDestinationTransition]', 'transitionOne, push & isEnter'); 1083 this.y = '0'; 1084 } 1085 } else { 1086 // EXIT_PUSH 1087 this.y = '0'; 1088 transitionOneEvent = () => { 1089 console.info('[NavDestinationTransition]', 'transitionOne, push & !isEnter'); 1090 this.y = '0'; 1091 } 1092 transitionOneDuration = 450; 1093 } 1094 } else if (op === NavigationOperation.POP) { 1095 if (isEnter) { 1096 // ENTER_POP 1097 this.y = '0'; 1098 transitionOneEvent = () => { 1099 console.info('[NavDestinationTransition]', 'transitionOne, pop & isEnter'); 1100 this.y = '0'; 1101 } 1102 } else { 1103 // EXIT_POP 1104 this.y = '0'; 1105 transitionOneEvent = () => { 1106 console.info('[NavDestinationTransition]', 'transitionOne, pop & !isEnter'); 1107 this.y = '100%'; 1108 } 1109 } 1110 } else { 1111 console.info('[NavDestinationTransition]', '----- NOT-IMPL BRANCH of NAV-DESTINATION CUSTOM TRANSITION -----'); 1112 } 1113 1114 let transitionOne: NavDestinationTransition = { 1115 duration: transitionOneDuration, 1116 delay: 0, 1117 curve: Curve.Friction, 1118 event: transitionOneEvent, 1119 onTransitionEnd: transitionOneFinishEvent 1120 }; 1121 1122 let transitionTwoEvent: voidFunc = () => { console.info('[NavDestinationTransition]', 'reached transitionTwo, empty now!'); } 1123 let transitionTwo: NavDestinationTransition = { 1124 duration: 1000, 1125 delay: 0, 1126 curve: Curve.EaseInOut, 1127 event: transitionTwoEvent, 1128 onTransitionEnd: () => { console.info('[NavDestinationTransition]', 'reached Two\'s finish'); } 1129 }; 1130 1131 return [ 1132 transitionOne, 1133 transitionTwo, 1134 ]; 1135 }) 1136 } 1137} 1138``` 1139 1140 1141### 示例3（设置指定的NavDestination系统转场） 1142 1143以下示例主要演示NavDestination设置系统转场动画[systemTransition](#systemtransition14)为Fade、Explode、SlideBottom与SlideRight时的转场效果。 1144 1145```ts 1146@Entry 1147@Component 1148struct NavDestinationSystemTransition { 1149 @Provide stack: NavPathStack = new NavPathStack() 1150 @Provide homePageTransitionType: NavigationSystemTransitionType = NavigationSystemTransitionType.DEFAULT; 1151 1152 @Builder 1153 pageMap(name: string) { 1154 if (name === 'Fade') { 1155 Fade(); 1156 } else if (name === 'Explode') { 1157 Explode(); 1158 } else if (name === 'SlideRight') { 1159 SlideRight(); 1160 } else if (name === 'SlideBottom') { 1161 SlideBottom(); 1162 } else { 1163 Dest(); 1164 } 1165 } 1166 1167 aboutToAppear(): void { 1168 this.stack.pushPath({name: 'Dest'}); 1169 } 1170 1171 build() { 1172 Navigation(this.stack) { 1173 // empty 1174 } 1175 .navDestination(this.pageMap) 1176 .hideNavBar(true) 1177 } 1178} 1179 1180@Component 1181struct Dest { 1182 @Consume stack: NavPathStack; 1183 @Consume homePageTransitionType: NavigationSystemTransitionType; 1184 @State name: string = 'NA'; 1185 1186 build() { 1187 NavDestination() { 1188 HomeBody(); 1189 } 1190 .title('Navigation System Animation') 1191 .onReady((context) => { 1192 this.name = context.pathInfo.name; 1193 }) 1194 .systemTransition(this.homePageTransitionType) 1195 } 1196} 1197 1198@Component 1199struct Fade { 1200 @Consume stack: NavPathStack; 1201 @State name: string = 'NA'; 1202 1203 build() { 1204 NavDestination() { 1205 DestBody({ 1206 name: this.name 1207 }) 1208 } 1209 .title(this.name) 1210 .onReady((context) => { 1211 this.name = context.pathInfo.name; 1212 }) 1213 .systemTransition(NavigationSystemTransitionType.FADE) 1214 } 1215} 1216 1217@Component 1218struct Explode { 1219 @Consume stack: NavPathStack; 1220 @State name: string = 'NA'; 1221 1222 build() { 1223 NavDestination() { 1224 DestBody({ 1225 name: this.name 1226 }) 1227 } 1228 .title(this.name) 1229 .onReady((context) => { 1230 this.name = context.pathInfo.name; 1231 }) 1232 .systemTransition(NavigationSystemTransitionType.EXPLODE) 1233 } 1234} 1235 1236@Component 1237struct SlideRight { 1238 @Consume stack: NavPathStack; 1239 @State name: string = 'NA'; 1240 1241 build() { 1242 NavDestination() { 1243 DestBody({ 1244 name: this.name 1245 }) 1246 } 1247 .title(this.name) 1248 .onReady((context) => { 1249 this.name = context.pathInfo.name; 1250 }) 1251 .systemTransition(NavigationSystemTransitionType.SLIDE_RIGHT) 1252 } 1253} 1254 1255@Component 1256struct SlideBottom { 1257 @Consume stack: NavPathStack; 1258 @State name: string = 'NA'; 1259 1260 build() { 1261 NavDestination() { 1262 DestBody({ 1263 name: this.name 1264 }) 1265 } 1266 .title(this.name) 1267 .onReady((context) => { 1268 this.name = context.pathInfo.name; 1269 }) 1270 .systemTransition(NavigationSystemTransitionType.SLIDE_BOTTOM) 1271 } 1272} 1273 1274@Component 1275struct DestBody { 1276 name: string = 'NA'; 1277 1278 columnTextSize: number = 22; 1279 columnTextFontWeight: FontWeight = FontWeight.Bolder; 1280 columnWidth: string = '65%'; 1281 columnPadding: number = 22; 1282 columnMargin: number = 10; 1283 columnBorderRadius: number = 10; 1284 1285 build() { 1286 Column() { 1287 Column() 1288 .width('85') 1289 .height(50) 1290 .backgroundColor(Color.White) 1291 Column() { 1292 Text(this.name) 1293 .fontSize(this.columnTextSize) 1294 .fontWeight(this.columnTextFontWeight) 1295 } 1296 .width(this.columnWidth) 1297 .padding(this.columnPadding) 1298 .margin(this.columnMargin) 1299 .borderRadius(this.columnBorderRadius) 1300 .shadow(ShadowStyle.OUTER_DEFAULT_LG) 1301 } 1302 } 1303} 1304 1305@Component 1306struct HomeBody { 1307 @Consume stack: NavPathStack; 1308 @Consume homePageTransitionType: NavigationSystemTransitionType; 1309 1310 columnTextSize: number = 22; 1311 columnTextFontWeight: FontWeight = FontWeight.Bolder; 1312 columnWidth: string = '85%'; 1313 columnPadding: number = 22; 1314 columnMargin: number = 10; 1315 columnBorderRadius: number = 10; 1316 columnShadow: ShadowStyle = ShadowStyle.OUTER_DEFAULT_MD; 1317 1318 build() { 1319 Column() { 1320 Search({ value: 'Search' }) 1321 .width(this.columnWidth) 1322 1323 Column() { 1324 Text('fade') 1325 .fontSize(this.columnTextSize) 1326 .fontWeight(this.columnTextFontWeight) 1327 } 1328 .width(this.columnWidth) 1329 .padding(this.columnPadding) 1330 .margin(this.columnMargin) 1331 .borderRadius(this.columnBorderRadius) 1332 .shadow(this.columnShadow) 1333 .onClick(() => { 1334 this.homePageTransitionType = NavigationSystemTransitionType.FADE; 1335 this.stack.pushPath({name: 'Fade'}); 1336 }) 1337 1338 Column() { 1339 Text('explode') 1340 .fontSize(this.columnTextSize) 1341 .fontWeight(this.columnTextFontWeight) 1342 } 1343 .width(this.columnWidth) 1344 .padding(this.columnPadding) 1345 .margin(this.columnMargin) 1346 .borderRadius(this.columnBorderRadius) 1347 .shadow(this.columnShadow) 1348 .onClick(() => { 1349 this.homePageTransitionType = NavigationSystemTransitionType.EXPLODE; 1350 this.stack.pushPath({name: 'Explode'}); 1351 }) 1352 1353 Column() { 1354 Text('slide right') 1355 .fontSize(this.columnTextSize) 1356 .fontWeight(this.columnTextFontWeight) 1357 } 1358 .width(this.columnWidth) 1359 .padding(this.columnPadding) 1360 .margin(this.columnMargin) 1361 .borderRadius(this.columnBorderRadius) 1362 .shadow(this.columnShadow) 1363 .onClick(() => { 1364 this.homePageTransitionType = NavigationSystemTransitionType.SLIDE_RIGHT; 1365 this.stack.pushPath({name: 'SlideRight'}); 1366 }) 1367 1368 Column() { 1369 Text('slide bottom') 1370 .fontSize(this.columnTextSize) 1371 .fontWeight(this.columnTextFontWeight) 1372 } 1373 .width(this.columnWidth) 1374 .padding(this.columnPadding) 1375 .margin(this.columnMargin) 1376 .borderRadius(this.columnBorderRadius) 1377 .shadow(this.columnShadow) 1378 .onClick(() => { 1379 this.homePageTransitionType = NavigationSystemTransitionType.SLIDE_BOTTOM; 1380 this.stack.pushPath({name: 'SlideBottom'}); 1381 }) 1382 } 1383 } 1384} 1385``` 1386 1387 1388 1389 1390 1391### 示例4（NavDestination配置页面方向和对应状态栏、导航条显隐） 1392 1393以下示例主要演示每个NavDestination可以配置指定的页面方向和状态栏，导航条显隐状态。 1394 1395```ts 1396import { window } from '@kit.ArkUI'; 1397 1398@Component 1399struct PortraitPage { 1400 @State info: string = ''; 1401 private stack: NavPathStack | undefined = undefined; 1402 build() { 1403 NavDestination() { 1404 Stack({alignContent: Alignment.Center}) { 1405 Button('push LANDSCAPE page').onClick(() => { 1406 this.stack?.pushPath({name: 'landscape'}); 1407 }) 1408 }.width('100%').height('100%') 1409 } 1410 .width('100%').height('100%') 1411 .title('PortraitPage') 1412 .preferredOrientation(window.Orientation.PORTRAIT) // 竖屏方向 1413 .enableStatusBar(true) // 显示状态栏 1414 .enableNavigationIndicator(true) // 显示导航条 1415 .backgroundColor('#ffbaece9') 1416 .onResult((result: ESObject)=>{ 1417 this.info = result as string; 1418 }) 1419 .onReady((ctx: NavDestinationContext) => { 1420 this.stack = ctx.pathStack; 1421 }) 1422 } 1423} 1424 1425@Component 1426struct LandscapePage { 1427 private stack: NavPathStack | undefined = undefined; 1428 build() { 1429 NavDestination() { 1430 Stack({alignContent: Alignment.Center}) { 1431 Button('push PORTRAIT page').onClick(() => { 1432 this.stack?.pushPath({name: 'portrait'}); 1433 }) 1434 }.width('100%').height('100%') 1435 } 1436 .width('100%').height('100%') 1437 .title('LandscapePage') 1438 .preferredOrientation(window.Orientation.LANDSCAPE) // 横屏方向 1439 .enableStatusBar(false) // 隐藏状态栏 1440 .enableNavigationIndicator(false) // 隐藏导航条 1441 .backgroundColor('#ffecb8b8') 1442 .ignoreLayoutSafeArea([LayoutSafeAreaType.SYSTEM], [LayoutSafeAreaEdge.TOP, LayoutSafeAreaEdge.BOTTOM]) 1443 .onReady((ctx: NavDestinationContext) => { 1444 this.stack = ctx.pathStack; 1445 }) 1446 } 1447} 1448 1449@Entry 1450@Component 1451struct ExamplePage { 1452 private stack: NavPathStack = new NavPathStack(); 1453 1454 aboutToAppear(): void { 1455 this.stack.pushPath({name: "portrait"}); 1456 } 1457 1458 @Builder 1459 MyPageMap(name: string) { 1460 if (name === 'portrait') { 1461 PortraitPage(); 1462 } else { 1463 LandscapePage(); 1464 } 1465 } 1466 1467 build() { 1468 Navigation(this.stack) { 1469 } 1470 .width('100%') 1471 .height('100%') 1472 .hideNavBar(true) 1473 .navDestination(this.MyPageMap) 1474 } 1475} 1476``` 1477 1478 1479NavDestination其他用法可参考[Navigation示例](ts-basic-components-navigation.md#示例)。 1480
