diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-navdestination.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-navdestination.md index d510af4bb1ef8d479e9c9ec1723d203f1e1a9c3d..1fbedf346822624f557e271976bfa495f1a3adf1 100644 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-navdestination.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-navdestination.md @@ -10,7 +10,7 @@ > > - NavDestination组件必须配合Navigation使用，作为Navigation目的页面的根节点，单独使用只能作为普通容器组件，不具备路由相关属性能力。 > -> - 如果页面栈中间页面的生命周期发生变化，跳转之前的栈顶Destination的生命周期(onWillShow, onShown, onHidden, onWillDisappear)与跳转之后的栈顶Destination的生命周期(onWillShow, onShown, onHidden, onWillDisappear)均在最后触发。 +> - 如果路由栈中间页面的生命周期发生变化，跳转之前的栈顶Destination的生命周期(onWillShow, onShown, onHidden, onWillDisappear)与跳转之后的栈顶Destination的生命周期(onWillShow, onShown, onHidden, onWillDisappear)均在最后触发。 > > - NavDestination未设置主副标题并且没有返回键时，不显示标题栏。 > @@ -302,7 +302,7 @@ recoverable(recoverable: Optional<boolean>) | 参数名 | 类型 | 必填 | 说明 | | ------ | -------------- | ---- | ------------------ | -| recoverable | [Optional](ts-universal-attributes-custom-property.md#optional12)<boolean> | 是 | NavDestination是否可恢复，默认为不可恢复。
默认值：false
true：页面栈可恢复。
false：页面栈不可恢复。 | +| recoverable | [Optional](ts-universal-attributes-custom-property.md#optional12)<boolean> | 是 | NavDestination是否可恢复，默认为不可恢复。
默认值：false
true：路由栈可恢复。
false：路由栈不可恢复。 | > **使用说明：** > @@ -473,7 +473,7 @@ NavDestination类型。 | 名称 | 值 | 说明 | | ---- | --- | ---------------------------------------- | | STANDARD | 0 | 标准模式的NavDestination。 | -| DIALOG | 1 | 默认透明，进出页面栈不影响下层NavDestination的生命周期。
API version 13之前，默认无系统转场动画。从API version 13开始，支持系统转场动画。 | +| DIALOG | 1 | 默认透明，进出路由栈不影响下层NavDestination的生命周期。
API version 13之前，默认无系统转场动画。从API version 13开始，支持系统转场动画。 | ## NavigationSystemTransitionType14+枚举说明 @@ -530,7 +530,7 @@ onHidden(callback: () => void) onWillAppear(callback: Callback\) -当该Destination挂载之前触发此回调。在该回调中允许修改页面栈，当前帧生效。 +当该Destination挂载之前触发此回调。在该回调中允许修改路由栈，当前帧生效。 **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 @@ -570,7 +570,7 @@ onWillDisappear(callback: Callback\) onBackPressed(callback: () => boolean) -当与Navigation绑定的页面栈中存在内容时，此回调生效。当点击返回键时，触发该回调。 +当与Navigation绑定的路由栈中存在内容时，此回调生效。当点击返回键时，触发该回调。 返回值为true时，表示重写返回键逻辑，返回值为false时，表示回退到上一个页面。 @@ -687,7 +687,7 @@ NavDestination上下文信息。 | 名称 | 类型 | 必填 | 说明 | | ---- | ------ | ----- | ------ | | pathInfo | [NavPathInfo](ts-basic-components-navigation.md#navpathinfo10) | 是 | 跳转NavDestination时指定的参数。
**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | -| pathStack | [NavPathStack](ts-basic-components-navigation.md#navpathstack10) | 是 | 当前NavDestination所处的页面栈。
**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | +| pathStack | [NavPathStack](ts-basic-components-navigation.md#navpathstack10) | 是 | 当前NavDestination所处的导航控制器。
**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | | navDestinationId12+ | string | 否 | 当前NavDestination的唯一ID，由系统自动生成，和组件通用属性id无关。
**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| ### getConfigInRouteMap12+ diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md index 043b62e8340d042d03f81bed6ece62812d765b9b..ebdf9a22da08ff5683c6de074409361d408ca53b 100644 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md @@ -37,7 +37,7 @@ Navigation() Navigation(pathInfos: NavPathStack) -绑定路由栈到Navigation组件，适用于使用[NavPathStack](#navpathstack10)配合[navDestination](#navdestination10)属性进行页面路由。 +绑定导航控制器到Navigation组件，适用于使用[NavPathStack](#navpathstack10)配合[navDestination](#navdestination10)属性进行页面路由。 **原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 @@ -47,7 +47,7 @@ Navigation(pathInfos: NavPathStack) | 参数名 | 类型 | 必填 | 说明 | | --------- | ------------------------------- | ---- | ------ | -| pathInfos | [NavPathStack](#navpathstack10) | 是 | 路由栈信息。 | +| pathInfos | [NavPathStack](#navpathstack10) | 是 | 导航控制器对象。 | ## 属性 @@ -448,7 +448,7 @@ systemBarStyle(style: Optional<SystemBarStyle>) > > 1. 不建议混合使用systemBarStyle属性和window设置状态栏样式的相关接口，例如：[setWindowSystemBarProperties](../js-apis-window.md#setwindowsystembarproperties9)。 > 2. 初次设置Navigation/NavDestination的systemBarStyle属性时，会备份当前状态栏样式用于后续的恢复场景。 -> 3. Navigation总是以首页（页面栈内没有NavDestination时）或者栈顶NavDestination设置的状态栏样式为准。 +> 3. Navigation总是以首页（路由栈内没有NavDestination时）或者栈顶NavDestination设置的状态栏样式为准。 > 4. Navigation首页或者任何栈顶NavDestination页面，如果设置了有效的systemBarStyle，则会使用设置的样式，反之如果之前已经备份了样式，则使用备份的样式，否则不做任何处理。 > 5. [Split](#navigationmode9枚举说明)模式下的Navigation，如果内容区没有NavDestination，则遵从Navigation首页的设置，反之则遵从栈顶NavDestination的设置。 > 6. 仅支持在主窗口的主页面中使用systemBarStyle设置状态栏样式。 @@ -460,7 +460,7 @@ systemBarStyle(style: Optional<SystemBarStyle>) recoverable(recoverable: Optional<boolean>) -配置Navigation是否可恢复。如配置为可恢复，当应用进程异常退出并重新冷启动时，可自动创建该Navigation，并恢复至异常退出时的页面栈。 +配置Navigation是否可恢复。如配置为可恢复，当应用进程异常退出并重新冷启动时，可自动创建该Navigation，并恢复至异常退出时的路由栈。 **系统能力：** SystemCapability.ArkUI.ArkUI.Full @@ -468,7 +468,7 @@ recoverable(recoverable: Optional<boolean>) | 参数名 | 类型 | 必填 | 说明 | | ------ | -------------- | ---- | ------------------ | -| recoverable | [Optional](ts-universal-attributes-custom-property.md#optional12)<boolean> | 是 | Navigation是否可恢复，默认为不可恢复。
默认值：false。
true：页面栈可恢复。
false：页面栈不可恢复。| +| recoverable | [Optional](ts-universal-attributes-custom-property.md#optional12)<boolean> | 是 | Navigation是否可恢复，默认为不可恢复。
默认值：false。
true：路由栈可恢复。
false：路由栈不可恢复。| > **使用说明：** > @@ -640,7 +640,7 @@ customNavContentTransition(delegate:(from: NavContentInfo, to: NavContentInfo, o ## NavPathStack10+ -Navigation路由栈，从API version 12开始，NavPathStack允许被继承。开发者可以在派生类中新增属性方法，也可以重写基类NavPathStack的方法。派生类对象可以替代基类NavPathStack对象使用。 +Navigation导航控制器，从API version 12开始，NavPathStack允许被继承。开发者可以在派生类中新增属性方法，也可以重写基类NavPathStack的方法。派生类对象可以替代基类NavPathStack对象使用。Navigation中的NavDeatination页面存在于NavPathStack中，以栈的结构管理，我们称为路由栈。 **原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 @@ -648,10 +648,10 @@ Navigation路由栈，从API version 12开始，NavPathStack允许被继承。 > **说明：** > -> 1.连续调用多个页面栈操作方法时，中间过程会被忽略，显示最终的栈操作结果。
+> 1.连续调用多个导航控制器操作方法时，中间过程会被忽略，显示最终的栈操作结果。
> 例如：在Page1页面先pop再push一个Page1，系统会认为操作前和操作后的结果一致而不进行任何操作，如果需要强行push一个Page1实例，可以使用NEW_INSTANCE模式。 > -> 2.不建议开发者通过监听生命周期的方式管理自己的页面栈。 +> 2.不建议开发者通过监听生命周期的方式管理自己的导航控制器。 > > 3.在应用处于后台状态下，调用NavPathStack的栈操作方法，会在应用再次回到前台状态时触发刷新。 @@ -697,7 +697,7 @@ pushPath(info: NavPathInfo, options?: NavigationOptions): void | 参数名 | 类型 | 必填 | 说明 | | ---- | ----------------------------- | ---- | -------------------- | | info | [NavPathInfo](#navpathinfo10) | 是 | NavDestination页面的信息。 | -| options | [NavigationOptions](#navigationoptions12) | 否 | 页面栈操作选项。 | +| options | [NavigationOptions](#navigationoptions12) | 否 | 路由栈操作选项。 | ### pushPathByName10+ @@ -785,7 +785,7 @@ pushDestination(info: NavPathInfo, options?: NavigationOptions): Promise<void | 参数名 | 类型 | 必填 | 说明 | | ---- | ----------------------------- | ---- | -------------------- | | info | [NavPathInfo](#navpathinfo10) | 是 | NavDestination页面的信息。 | -| options | [NavigationOptions](#navigationoptions12) | 否 | 页面栈操作选项。 | +| options | [NavigationOptions](#navigationoptions12) | 否 | 路由栈操作选项。 | **返回值：** @@ -879,7 +879,7 @@ pushDestinationByName(name: string, param: Object, onPop: Callback\, an replacePath(info: NavPathInfo, animated?: boolean): void -将当前页面栈栈顶退出，将info指定的NavDestination页面信息入栈。 +将当前路由栈栈顶退出，将info指定的NavDestination页面信息入栈。 **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 @@ -896,7 +896,7 @@ replacePath(info: NavPathInfo, animated?: boolean): void replacePath(info: NavPathInfo, options?: NavigationOptions): void -替换页面栈操作，具体根据options中指定不同的[LaunchMode](#launchmode12枚举说明)，有不同的行为。 +替换路由栈操作，具体根据options中指定不同的[LaunchMode](#launchmode12枚举说明)，有不同的行为。 **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 @@ -907,13 +907,13 @@ replacePath(info: NavPathInfo, options?: NavigationOptions): void | 参数名 | 类型 | 必填 | 说明 | | ---- | ----------------------------- | ---- | -------------------- | | info | [NavPathInfo](#navpathinfo10) | 是 | 新栈顶页面参数信息。 | -| options | [NavigationOptions](#navigationoptions12) | 否 | 页面栈操作选项。 | +| options | [NavigationOptions](#navigationoptions12) | 否 | 路由栈操作选项。 | ### replacePathByName11+ replacePathByName(name: string, param: Object, animated?: boolean): void -将当前页面栈栈顶退出，将name指定的页面入栈。 +将当前路由栈栈顶退出，将name指定的页面入栈。 **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 @@ -931,7 +931,7 @@ replacePathByName(name: string, param: Object, animated?: boolean): void replaceDestination(info: NavPathInfo, options?: NavigationOptions): Promise<void> -替换页面栈操作。使用Promise异步回调返回接口调用结果，具体根据options中指定不同的[LaunchMode](#launchmode12枚举说明)，有不同的行为。 +替换路由栈操作。使用Promise异步回调返回接口调用结果，具体根据options中指定不同的[LaunchMode](#launchmode12枚举说明)，有不同的行为。 **原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 @@ -942,7 +942,7 @@ replaceDestination(info: NavPathInfo, options?: NavigationOptions): Promise<v | 参数名 | 类型 | 必填 | 说明 | | ---- | ----------------------------- | ---- | -------------------- | | info | [NavPathInfo](#navpathinfo10) | 是 | NavDestination页面的信息。 | -| options | [NavigationOptions](#navigationoptions12) | 否 | 页面栈操作选项。 | +| options | [NavigationOptions](#navigationoptions12) | 否 | 路由栈操作选项。 | **返回值：** @@ -965,7 +965,7 @@ replaceDestination(info: NavPathInfo, options?: NavigationOptions): Promise<v removeByIndexes(indexes: Array): number -将页面栈内索引值在indexes中的NavDestination页面删除。 +将路由栈内索引值在indexes中的NavDestination页面删除。 **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 @@ -987,7 +987,7 @@ removeByIndexes(indexes: Array): number removeByName(name: string): number -将页面栈内指定name的NavDestination页面删除。 +将路由栈内指定name的NavDestination页面删除。 **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 @@ -1009,7 +1009,7 @@ removeByName(name: string): number removeByNavDestinationId(navDestinationId: string): boolean -将页面栈内指定navDestinationId的NavDestination页面删除。navDestinationId可以在NavDestination的[onReady](ts-basic-components-navdestination.md#onready11)回调中获取，也可以在[NavDestinationInfo](../js-apis-arkui-observer.md#navdestinationinfo)中获取。 +将路由栈内指定navDestinationId的NavDestination页面删除。navDestinationId可以在NavDestination的[onReady](ts-basic-components-navdestination.md#onready11)回调中获取，也可以在[NavDestinationInfo](../js-apis-arkui-observer.md#navdestinationinfo)中获取。 **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 @@ -1293,7 +1293,7 @@ getIndexByName(name: string): Array | 类型 | 说明 | | -------------- | --------------------------------- | -| Array | 返回全部名为name的NavDestination页面的位置索引。当页面栈中不存在此name，返回空数组。索引取值范围为[0, 页面栈大小-1] | +| Array | 返回全部名为name的NavDestination页面的位置索引。当路由栈中不存在此name，返回空数组。索引取值范围为[0, 页面栈大小-1] | ### size10+ @@ -1395,8 +1395,8 @@ setPathStack(pathStack: Array\, animated?: boolean): void > **说明：** > > 1. 开发者可以在原有栈的基础上批量添加或删除页面。批量入栈的页面中，只有可见的页面会触发创建，其他页面虽已入栈但不会立即创建，当这些页面变为可见时，才会触发创建。 -> 2. 通过批量入栈功能更新的页面栈，各页面的生命周期事件触发顺序为从栈顶到底部依次触发，这与其它入栈接口从栈底到顶部的触发顺序不同。 -> 3. 开发者可以通过[NavPathInfo](#navpathinfo10)中的页面唯一标识符navDestinationId来操作已有页面，该id由系统默认生成且全局唯一（可以通过[getPathStack](#getpathstack19)接口获取，不可主动赋新值）。若该id在当前页面栈中不存在，则表示新增页面，若在当前页面栈中存在，同时对应的name相同，则表示复用已有页面。 +> 2. 通过批量入栈功能更新的路由栈，各页面的生命周期事件触发顺序为从栈顶到底部依次触发，这与其它入栈接口从栈底到顶部的触发顺序不同。 +> 3. 开发者可以通过[NavPathInfo](#navpathinfo10)中的页面唯一标识符navDestinationId来操作已有页面，该id由系统默认生成且全局唯一（可以通过[getPathStack](#getpathstack19)接口获取，不可主动赋新值）。若该id在当前路由栈中不存在，则表示新增页面，若在当前路由栈中存在，同时对应的name相同，则表示复用已有页面。 ## NavPathInfo10+ @@ -1512,7 +1512,7 @@ finishTransition(): void; cancelTransition?(): void; -取消本次交互转场，恢复到页面跳转前的页面栈(不支持取消不可交互转场动画)。 +取消本次交互转场，恢复到页面跳转前的路由栈(不支持取消不可交互转场动画)。 **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 @@ -1781,7 +1781,7 @@ Navigation自定义标题。 ## LaunchMode12+枚举说明 -页面栈操作模式。 +路由栈操作模式。 **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 @@ -1796,7 +1796,7 @@ Navigation自定义标题。 ## NavigationOptions12+ -页面栈操作选项。 +路由栈操作选项。 **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 @@ -1804,7 +1804,7 @@ Navigation自定义标题。 | 名称 | 类型 | 必填 | 说明 | | ------ | ------------- | ---- | --------------- | -| launchMode | [LaunchMode](#launchmode12枚举说明) | 否 | 页面栈的操作模式。
默认值：LaunchMode.STANDARD | +| launchMode | [LaunchMode](#launchmode12枚举说明) | 否 | 路由栈的操作模式。
默认值：LaunchMode.STANDARD | | animated | boolean | 否 | 是否支持转场动画。
默认值：true。
true：支持转场动画。
false：不支持转场动画。 | ## MoreButtonOptions19+ @@ -1947,7 +1947,7 @@ struct NavigationExample { -### 示例2（使用路由栈方法） +### 示例2（使用导航控制器方法） 该示例主要演示NavPathStack中方法的使用及路由拦截。 @@ -3307,7 +3307,7 @@ export function PageOneBuilder(name: string) { 该示例主要演示如下两点功能： -1. NavPathStack无需声明为状态变量，也可以实现页面栈操作功能。 +1. NavPathStack无需声明为状态变量，也可以实现路由栈操作功能。 2. NavDestination通过onReady事件能够拿到对应的NavPathInfo和所属的NavPathStack。 @@ -3605,7 +3605,7 @@ struct NavigationExample { ![titlebar_stack.gif](figures/titlebar_stack.gif) -### 示例10（定义路由栈派生类） +### 示例10（定义导航控制器派生类） 该示例主要演示如何定义NavPathStack的派生类和派生类在Navigation中的基本用法。 diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-arcswiper.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-arcswiper.md index 08462d0b6ee2497c4d75ad0d05849c10b9db709c..6e7eff0909630903ee8ce268327b75a42b2cc3ee 100644 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-arcswiper.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-arcswiper.md @@ -600,7 +600,7 @@ finishTransition(): void import { CircleShape, ArcSwiper, - ArcSwiperAttribute, + ArcSwiperAttribute, // ArcSwiper的属性依赖ArcSwiperAttribute对象导入，不建议删除该对象的引入。 ArcDotIndicator, ArcDirection, ArcSwiperController diff --git a/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-observer.md b/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-observer.md index 51c70395a44aaf7294e9e50942b4887590717c7b..61fc6de457cc214a2ca6b523b0cc7feed3d20a05 100644 --- a/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-observer.md +++ b/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-observer.md @@ -105,7 +105,7 @@ Navigation组件信息。 | 名称 | 类型 | 必填 | 说明 | | ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | | navigationId | string | 是 | Navigation组件的id。 | -| pathStack | [NavPathStack](arkui-ts/ts-basic-components-navigation.md#navpathstack10) | 是 | Navigation组件的路由栈。 | +| pathStack | [NavPathStack](arkui-ts/ts-basic-components-navigation.md#navpathstack10) | 是 | Navigation组件的导航控制器。 | ## ScrollEventInfo12+ diff --git a/zh-cn/application-dev/ui/Readme-CN.md b/zh-cn/application-dev/ui/Readme-CN.md index a5f44ee28eea0d370e2724b3c6616d4b81702e45..b07d9ad307678255218a941760bf793381ad4750 100755 --- a/zh-cn/application-dev/ui/Readme-CN.md +++ b/zh-cn/application-dev/ui/Readme-CN.md @@ -107,8 +107,7 @@ - [自定义渲染 (XComponent)](napi-xcomponent-guidelines.md) - 设置组件导航和页面路由 - [组件导航和页面路由概述](arkts-navigation-introduction.md) - - [组件导航 (Navigation)(推荐)](arkts-navigation-navigation.md) - - [实现组件导航转场](arkts-navigation-transition.md) + - [组件导航(Navigation) (推荐)](arkts-navigation-navigation.md) - [页面路由 (@ohos.router)(不推荐)](arkts-routing.md) - [Router切换Navigation](arkts-router-to-navigation.md) - 使用文本 diff --git a/zh-cn/application-dev/ui/arkts-layout-development-arcswiper.md b/zh-cn/application-dev/ui/arkts-layout-development-arcswiper.md index 45dada2b527929ad729c62b2f08f2a1ee04e7d4a..6c3249ec609ac7c186949715b12d4124a1ce88b0 100644 --- a/zh-cn/application-dev/ui/arkts-layout-development-arcswiper.md +++ b/zh-cn/application-dev/ui/arkts-layout-development-arcswiper.md @@ -81,7 +81,7 @@ ArcSwiper支持滑动手指、点击导航点、旋转表冠和控制控制器 ArcButtonStyleMode, ArcButtonPosition, ArcSwiper, - ArcSwiperAttribute, + ArcSwiperAttribute, // ArcSwiper的属性依赖ArcSwiperAttribute对象导入，不建议删除该对象的引入。 ArcDotIndicator, ArcDirection, ArcSwiperController @@ -194,7 +194,7 @@ ArcSwiper支持通过[customContentTransition](../reference/apis-arkui/arkui-ts/ import { Decimal } from '@kit.ArkTS'; import { ArcSwiper, - ArcSwiperAttribute, + ArcSwiperAttribute, // ArcSwiper的属性依赖ArcSwiperAttribute对象导入，不建议删除该对象的引入。 ArcDotIndicator, ArcDirection, ArcSwiperController @@ -258,7 +258,7 @@ ArcSwiper的滑动事件会与侧滑返回冲突，可以通过[手势拦截](.. ```ts import { ArcSwiper, - ArcSwiperAttribute, + ArcSwiperAttribute, // ArcSwiper的属性依赖ArcSwiperAttribute对象导入，不建议删除该对象的引入。 ArcDotIndicator, ArcDirection, ArcSwiperController diff --git a/zh-cn/application-dev/ui/arkts-navigation-navigation.md b/zh-cn/application-dev/ui/arkts-navigation-navigation.md index 368f33493e961456f59aad6daaa7ab1fef537a24..f8c516719ecadd8d5fe871e43b03973c5dd80c98 100644 --- a/zh-cn/application-dev/ui/arkts-navigation-navigation.md +++ b/zh-cn/application-dev/ui/arkts-navigation-navigation.md @@ -1,10 +1,10 @@ -# 组件导航 (Navigation)(推荐) +# 组件导航(Navigation) (推荐) 组件导航（Navigation）主要用于实现页面间以及组件内部的页面跳转，支持在不同组件间传递跳转参数，提供灵活的跳转栈操作，从而更便捷地实现对不同页面的访问和复用。本文将从组件导航（Navigation）的显示模式、路由操作、子页面管理、跨包跳转以及跳转动效等几个方面进行详细介绍。 [Navigation](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md)是路由导航的根视图容器，一般作为页面（@Entry）的根容器，包括单栏（Stack）、分栏（Split）和自适应（Auto）三种显示模式。Navigation组件适用于模块内和跨模块的路由切换，通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。一次开发，多端部署场景下，Navigation组件能够自动适配窗口显示大小，在窗口较大的场景下自动切换分栏展示效果。 -Navigation组件主要包含​导航页和子页。导航页由标题栏（包含菜单栏）、内容区和工具栏组成，可以通过[hideNavBar](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#hidenavbar9)属性进行隐藏，导航页不存在[页面栈](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#navpathstack10)中，与子页，以及子页之间可以通过路由操作进行切换。 +Navigation组件主要包含​导航页和子页。导航页由标题栏（包含菜单栏）、内容区和工具栏组成，可以通过[hideNavBar](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#hidenavbar9)属性进行隐藏，导航页不存在[路由栈](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#navpathstack10)中，与子页，以及子页之间可以通过路由操作进行切换。 在API version 9上，Navigation需要配合[NavRouter](../reference/apis-arkui/arkui-ts/ts-basic-components-navrouter.md)组件实现页面路由。从API version 10开始，更推荐使用[NavPathStack](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#navpathstack10)实现页面路由。 @@ -308,13 +308,13 @@ Navigation() { ## 路由操作 -Navigation路由相关的操作都是基于页面栈[NavPathStack](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#navpathstack10)提供的方法进行，每个Navigation都需要创建并传入一个NavPathStack对象，用于管理页面。主要涉及页面跳转、页面返回、页面替换、页面删除、参数获取、路由拦截等功能。 +Navigation路由相关的操作都是基于导航控制器[NavPathStack](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#navpathstack10)提供的方法进行，每个Navigation都需要创建并传入一个NavPathStack对象，用于管理页面。主要涉及页面跳转、页面返回、页面替换、页面删除、参数获取、路由拦截等功能。 -从API version 12开始，页面栈允许被继承。开发者可以在派生类中自定义属性和方法，也可以重写父类的方法。派生类对象可以替代基类NavPathStack对象使用。具体示例代码参见：[页面栈继承示例代码](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#示例10定义路由栈派生类)。 +从API version 12开始，导航控制器允许被继承。开发者可以在派生类中自定义属性和方法，也可以重写父类的方法。派生类对象可以替代基类NavPathStack对象使用。Navigation中的NavDeatination页面存在于NavPathStack中，以栈的结构管理，我们称为路由栈。具体示例代码参见：[导航控制器继承示例代码](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#示例10定义导航控制器派生类)。 > **说明：** > -> 1.不建议开发者通过监听生命周期的方式管理自己的页面栈。 +> 1.不建议开发者通过监听生命周期的方式管理自己的路由栈。 > > 2.在应用处于后台状态下，调用NavPathStack的栈操作方法，会在应用再次回到前台状态时触发刷新。 @@ -322,7 +322,7 @@ Navigation路由相关的操作都是基于页面栈[NavPathStack](../reference/ @Entry @Component struct Index { - // 创建一个页面栈对象并传入Navigation + // 创建一个导航控制器对象并传入Navigation pageStack: NavPathStack = new NavPathStack(); build() { @@ -403,7 +403,7 @@ this.pageStack.replaceDestination({name: "PageOne", param: "PageOne Param"}) ### 页面删除 -NavPathStack通过Remove相关接口去实现删除页面栈中特定页面的功能。 +NavPathStack通过Remove相关接口去实现删除路由栈中特定页面的功能。 ```ts // 删除栈中name为PageOne的所有页面 @@ -416,7 +416,7 @@ this.pageStack.removeByNavDestinationId("1"); ### 移动页面 -NavPathStack通过Move相关接口去实现移动页面栈中特定页面到栈顶的功能。 +NavPathStack通过Move相关接口去实现移动路由栈中特定页面到栈顶的功能。 ```ts // 移动栈中name为PageOne的页面到栈顶 @@ -472,7 +472,7 @@ NavPathStack提供了[setInterception](../reference/apis-arkui/arkui-ts/ts-basic > **说明：** > -> 无论是哪个回调，在进入回调时页面栈都已经发生了变化。 +> 无论是哪个回调，在进入回调时路由栈都已经发生了变化。 开发者可以在willShow回调中通过修改路由栈来实现路由拦截重定向的能力。 @@ -501,7 +501,7 @@ this.pageStack.setInterception({ 1. 当指定为LaunchMode.MOVE_TO_TOP_SINGLETON时，系统会从栈底到栈顶查找具有指定名称的NavDestination。找到后，该页面将被移动到栈顶（replace操作会用指定的NavDestination替换当前栈顶）。 2. 若指定为LaunchMode.POP_TO_SINGLETON，系统同样会从栈底到栈顶查找具有指定名称的NavDestination。找到后，便会移除该NavDestination上方的所有页面（replace操作会用指定的NavDestination替换当前栈顶）。 -有关单实例路由栈操作的示例代码，可以参考[Navigation单例跳转示例](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#示例2使用路由栈方法)。 +有关单实例跳转的示例代码，可以参考[Navigation单例跳转示例](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#示例2使用导航控制器方法)。 ## 子页面 @@ -511,7 +511,7 @@ this.pageStack.setInterception({ - 标准类型 - NavDestination组件默认为标准类型，此时mode属性为NavDestinationMode.STANDARD。标准类型的NavDestination的生命周期跟随其在NavPathStack页面栈中的位置变化而改变。 + NavDestination组件默认为标准类型，此时mode属性为NavDestinationMode.STANDARD。标准类型的NavDestination的生命周期跟随其在NavPathStack路由栈中的位置变化而改变。 - 弹窗类型 @@ -653,7 +653,7 @@ Navigation作为路由容器，其生命周期承载在NavDestination组件上 ## 页面转场 -Navigation默认提供了页面切换的转场动画，通过页面栈操作时，会触发不同的转场效果（API version 13之前，Dialog类型的页面默认无转场动画。从API version13开始，Dialog类型的页面支持系统转场动画。），Navigation也提供了关闭系统转场、自定义转场以及共享元素转场的能力。 +Navigation默认提供了页面切换的转场动画，通过导航控制器操作时，会触发不同的转场效果（API version 13之前，Dialog类型的页面默认无转场动画。从API version13开始，Dialog类型的页面支持系统转场动画。），Navigation也提供了关闭系统转场、自定义转场以及共享元素转场的能力。 ### 关闭转场 @@ -772,7 +772,7 @@ NavDestination之间切换时可以通过[geometryTransition](../reference/apis- 系统路由表是动态路由的一种实现方式。从API version 12开始，Navigation支持使用系统路由表的方式进行动态路由。各业务模块（[HSP](../quick-start/in-app-hsp.md)/[HAR](../quick-start/har-package.md)）中需要独立配置route_map.json文件，在触发路由跳转时，应用只需要通过NavPathStack提供的路由方法，传入需要路由的页面配置名称，此时系统会自动完成路由模块的动态加载、页面组件构建，并完成路由跳转，从而实现了开发层面的模块解耦。系统路由表支持模拟器但不支持预览器。其主要步骤如下： -1. 在跳转目标模块的配置文件module.json5添加路由表配置： +1. 在跳转目标模块的配置文件[module.json5](../quick-start/module-configuration-file.md)添加路由表配置： ```json { @@ -859,4 +859,303 @@ NavDestination之间切换时可以通过[geometryTransition](../reference/apis- - 在ets文件中配置路由加载配置项，一般包括路由页面名称（即pushPath等接口中页面的别名），文件所在模块名称（hsp/har的模块名），加载页面在模块内的路径（相对src目录的路径）。 2. 加载目标跳转页面，通过[动态import](../arkts-utils/arkts-dynamic-import.md)将跳转目标页面所在的模块在运行时加载，在模块加载完成后，调用模块中的方法，通过import在模块的方法中加载模块中显示的目标页面，并返回页面加载完成后定义的Builder函数。 3. 触发页面跳转，在Navigation的[navDestination](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#navdestination10)属性执行步骤2中加载的Builder函数，即可跳转到目标页面。 + +## 导航示例 + +### 创建导航首页 +实现步骤为： + +1.使用Navigation创建导航主页，并创建导航控制器NavPathStack以此来实现不同页面之间的跳转。 + +2.在Navigation中增加List组件，来定义导航主页中不同的一级界面。 + +3.在List内的组件添加onClick方法，并在其中使用导航控制器NavPathStack的pushPathByName方法，使组件可以在点击之后从当前页面跳转到输入参数name在路由表内对应的页面。 +```ts +@Entry +@Component +struct NavigationDemo { + @Provide('pathInfos') pathInfos: NavPathStack = new NavPathStack(); + private listArray: Array = ['WLAN', 'Bluetooth', 'Personal Hotspot', 'Connect & Share']; + + build() { + Column() { + Navigation(this.pathInfos) { + TextInput({ placeholder: '输入关键字搜索' }) + .width('90%') + .height(40) + .margin({ bottom: 10 }) + + // 通过List定义导航的一级界面 + List({ space: 12, initialIndex: 0 }) { + ForEach(this.listArray, (item: string) => { + ListItem() { + Row() { + Row() { + Text(`${item.slice(0, 1)}`) + .fontColor(Color.White) + .fontSize(14) + .fontWeight(FontWeight.Bold) + } + .width(30) + .height(30) + .backgroundColor('#a8a8a8') + .margin({ right: 20 }) + .borderRadius(20) + .justifyContent(FlexAlign.Center) + + Column() { + Text(item) + .fontSize(16) + .margin({ bottom: 5 }) + } + .alignItems(HorizontalAlign.Start) + + Blank() + + Row() + .width(12) + .height(12) + .margin({ right: 15 }) + .border({ + width: { top: 2, right: 2 }, + color: 0xcccccc + }) + .rotate({ angle: 45 }) + } + .borderRadius(15) + .shadow({ radius: 100, color: '#ededed' }) + .width('90%') + .alignItems(VerticalAlign.Center) + .padding({ left: 15, top: 15, bottom: 15 }) + .backgroundColor(Color.White) + } + .width('100%') + .onClick(() => { + this.pathInfos.pushPathByName(`${item}`, '详情页面参数'); // 将name指定的NaviDestination页面信息入栈,传递的参数为param + }) + }, (item: string): string => item) + } + .listDirection(Axis.Vertical) + .edgeEffect(EdgeEffect.Spring) + .sticky(StickyStyle.Header) + .chainAnimation(false) + .width('100%') + } + .width('100%') + .mode(NavigationMode.Auto) + .title('设置') // 设置标题文字 + } + .size({ width: '100%', height: '100%' }) + .backgroundColor(0xf4f4f5) + } +} +``` + +### 创建导航子页 +导航子页1实现步骤为： + +1.使用NavDestination，来创建导航子页PageOne。 + +2.创建导航控制器NavPathStack并在onReady时进行初始化，获取当前所在的导航控制器，以此来实现不同页面之间的跳转。 + +3.在子页面内的组件添加onClick，并在其中使用导航控制器NavPathStack的pop方法，使组件可以在点击之后弹出路由栈栈顶元素实现页面的返回。 + +```ts +//PageOne.ets +@Builder +export function PageOneBuilder(name: string, param: string) { + PageOne({ name: name, value: param }); +} + +@Component +export struct PageOne { + pathInfos: NavPathStack = new NavPathStack(); + name: String = ''; + @State value: String = ''; + + build() { + NavDestination() { + Column() { + Text(`${this.name}设置页面`) + .width('100%') + .fontSize(20) + .fontColor(0x333333) + .textAlign(TextAlign.Center) + .textShadow({ + radius: 2, + offsetX: 4, + offsetY: 4, + color: 0x909399 + }) + .padding({ top: 30 }) + Text(`${JSON.stringify(this.value)}`) + .width('100%') + .fontSize(18) + .fontColor(0x666666) + .textAlign(TextAlign.Center) + .padding({ top: 45 }) + Button('返回') + .width('50%') + .height(40) + .margin({ top: 50 }) + .onClick(() => { + //弹出路由栈栈顶元素，返回上个页面 + this.pathInfos.pop(); + }) + } + .size({ width: '100%', height: '100%' }) + }.title(`${this.name}`) + .onReady((ctx: NavDestinationContext) => { + // NavDestinationContext获取当前所在的导航控制器 + this.pathInfos = ctx.pathStack; + }) + } +} +``` +导航子页2实现步骤为： + +1.使用NavDestination，来创建导航子页PageTwo。 + +2.创建导航控制器NavPathStack并在onReady时进行初始化，获取当前所在的导航控制器，以此来实现不同页面之间的跳转。 + +3.在子页面内的组件添加onClick，并在其中使用导航控制器NavPathStack的pushPathByName方法，使组件可以在点击之后从当前页面跳转到输入参数name在路由表内对应的页面。 +```ts +//PageTwo.ets +@Builder +export function PageTwoBuilder(name: string) { + PageTwo({ name: name }); +} + +@Component +export struct PageTwo { + pathInfos: NavPathStack = new NavPathStack(); + name: String = ''; + private listArray: Array = ['Projection', 'Print', 'VPN', 'Private DNS', 'NFC']; + + build() { + NavDestination() { + Column() { + List({ space: 12, initialIndex: 0 }) { + ForEach(this.listArray, (item: string) => { + ListItem() { + Row() { + Row() { + Text(`${item.slice(0, 1)}`) + .fontColor(Color.White) + .fontSize(14) + .fontWeight(FontWeight.Bold) + } + .width(30) + .height(30) + .backgroundColor('#a8a8a8') + .margin({ right: 20 }) + .borderRadius(20) + .justifyContent(FlexAlign.Center) + + Column() { + Text(item) + .fontSize(16) + .margin({ bottom: 5 }) + } + .alignItems(HorizontalAlign.Start) + + Blank() + + Row() + .width(12) + .height(12) + .margin({ right: 15 }) + .border({ + width: { top: 2, right: 2 }, + color: 0xcccccc + }) + .rotate({ angle: 45 }) + } + .borderRadius(15) + .shadow({ radius: 100, color: '#ededed' }) + .width('90%') + .alignItems(VerticalAlign.Center) + .padding({ left: 15, top: 15, bottom: 15 }) + .backgroundColor(Color.White) + } + .width('100%') + .onClick(() => { + this.pathInfos.pushPathByName(`${item}`, '页面设置参数'); + }) + }, (item: string): string => item) + } + .listDirection(Axis.Vertical) + .edgeEffect(EdgeEffect.Spring) + .sticky(StickyStyle.Header) + .width('100%') + } + .size({ width: '100%', height: '100%' }) + }.title(`${this.name}`) + .onReady((ctx: NavDestinationContext) => { + // NavDestinationContext获取当前所在的导航控制器 + this.pathInfos = ctx.pathStack; + }) + } +} +``` + +### 创建路由跳转 +实现步骤为： + +1.工程配置文件[module.json5](../quick-start/module-configuration-file.md)中配置 {"routerMap": "$profile:router_map"}。 + +2.router_map.json中配置全局路由表，导航控制器NavPathStack可根据路由表中的name将对应页面信息入栈。 +```ts +{ + "routerMap" : [ + { + "name" : "WLAN", + "pageSourceFile" : "src/main/ets/pages/PageOne.ets", + "buildFunction" : "PageOneBuilder" + }, + { + "name" : "Bluetooth", + "pageSourceFile" : "src/main/ets/pages/PageOne.ets", + "buildFunction" : "PageOneBuilder" + }, + { + "name" : "Personal Hotspot", + "pageSourceFile" : "src/main/ets/pages/PageOne.ets", + "buildFunction" : "PageOneBuilder" + }, + { + "name" : "Connect & Share", + "pageSourceFile" : "src/main/ets/pages/PageTwo.ets", + "buildFunction" : "PageTwoBuilder" + }, + { + "name" : "Projection", + "pageSourceFile" : "src/main/ets/pages/PageOne.ets", + "buildFunction" : "PageOneBuilder" + }, + { + "name" : "Print", + "pageSourceFile" : "src/main/ets/pages/PageOne.ets", + "buildFunction" : "PageOneBuilder" + }, + { + "name" : "VPN", + "pageSourceFile" : "src/main/ets/pages/PageOne.ets", + "buildFunction" : "PageOneBuilder" + }, + { + "name" : "Private DNS", + "pageSourceFile" : "src/main/ets/pages/PageOne.ets", + "buildFunction" : "PageOneBuilder" + }, + { + "name" : "NFC", + "pageSourceFile" : "src/main/ets/pages/PageOne.ets", + "buildFunction" : "PageOneBuilder" + } + ] +} +``` + +![zh-cn_image_0000001588458252](figures/arkts-navigation-transition_1.gif) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/arkts-navigation-transition.md b/zh-cn/application-dev/ui/arkts-navigation-transition.md deleted file mode 100644 index 45eb0db3381d59db8391b5256719f1ac1c271cc8..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/ui/arkts-navigation-transition.md +++ /dev/null @@ -1,309 +0,0 @@ -# 导航转场 - - -导航转场是页面的路由转场方式，也就是一个界面消失，另外一个界面出现的动画效果。开发者也可以自定义导航转场的动画效果，具体请参考Navigation[示例3](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#示例3设置可交互转场动画)。 - - -导航转场推荐使用[Navigation](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md)组件实现，可搭配[NavDestination](../reference/apis-arkui/arkui-ts/ts-basic-components-navdestination.md)组件实现导航功能。 - - -完整的代码示例和效果如下。 - -## 创建导航页 -实现步骤为： - -1.使用Navigation创建导航主页，并创建路由栈NavPathStack以此来实现不同页面之间的跳转。 - -2.在Navigation中增加List组件，来定义导航主页中不同的一级界面。 - -3.在List内的组件添加onClick方法，并在其中使用路由栈NavPathStack的pushPathByName方法，使组件可以在点击之后从当前页面跳转到输入参数name在路由表内对应的页面。 -```ts -//Index.ets -@Entry -@Component -struct NavigationDemo { - @Provide('pathInfos') pathInfos: NavPathStack = new NavPathStack(); - private listArray: Array = ['WLAN', 'Bluetooth', 'Personal Hotspot', 'Connect & Share']; - - build() { - Column() { - Navigation(this.pathInfos) { - TextInput({ placeholder: '输入关键字搜索' }) - .width('90%') - .height(40) - .margin({ bottom: 10 }) - - // 通过List定义导航的一级界面 - List({ space: 12, initialIndex: 0 }) { - ForEach(this.listArray, (item: string) => { - ListItem() { - Row() { - Row() { - Text(`${item.slice(0, 1)}`) - .fontColor(Color.White) - .fontSize(14) - .fontWeight(FontWeight.Bold) - } - .width(30) - .height(30) - .backgroundColor('#a8a8a8') - .margin({ right: 20 }) - .borderRadius(20) - .justifyContent(FlexAlign.Center) - - Column() { - Text(item) - .fontSize(16) - .margin({ bottom: 5 }) - } - .alignItems(HorizontalAlign.Start) - - Blank() - - Row() - .width(12) - .height(12) - .margin({ right: 15 }) - .border({ - width: { top: 2, right: 2 }, - color: 0xcccccc - }) - .rotate({ angle: 45 }) - } - .borderRadius(15) - .shadow({ radius: 100, color: '#ededed' }) - .width('90%') - .alignItems(VerticalAlign.Center) - .padding({ left: 15, top: 15, bottom: 15 }) - .backgroundColor(Color.White) - } - .width('100%') - .onClick(() => { - this.pathInfos.pushPathByName(`${item}`, '详情页面参数'); // 将name指定的NaviDestination页面信息入栈,传递的参数为param - }) - }, (item: string): string => item) - } - .listDirection(Axis.Vertical) - .edgeEffect(EdgeEffect.Spring) - .sticky(StickyStyle.Header) - .chainAnimation(false) - .width('100%') - } - .width('100%') - .mode(NavigationMode.Auto) - .title('设置') // 设置标题文字 - } - .size({ width: '100%', height: '100%' }) - .backgroundColor(0xf4f4f5) - } -} -``` -## 创建导航子页 -导航子页1实现步骤为： - -1.使用NavDestination，来创建导航子页CommonPage。 - -2.创建路由栈NavPathStack并在onReady时进行初始化，获取当前所在的页面栈，以此来实现不同页面之间的跳转。 - -3.在子页面内的组件添加onClick，并在其中使用路由栈NavPathStack的pop方法，使组件可以在点击之后弹出路由栈栈顶元素实现页面的返回。 -```ts -//PageOne.ets - -@Builder -export function MyCommonPageBuilder(name: string, param: string) { - MyCommonPage({ name: name, value: param }); -} - -@Component -export struct MyCommonPage { - pathInfos: NavPathStack = new NavPathStack(); - name: String = ''; - @State value: String = ''; - - build() { - NavDestination() { - Column() { - Text(`${this.name}设置页面`) - .width('100%') - .fontSize(20) - .fontColor(0x333333) - .textAlign(TextAlign.Center) - .textShadow({ - radius: 2, - offsetX: 4, - offsetY: 4, - color: 0x909399 - }) - .padding({ top: 30 }) - Text(`${JSON.stringify(this.value)}`) - .width('100%') - .fontSize(18) - .fontColor(0x666666) - .textAlign(TextAlign.Center) - .padding({ top: 45 }) - Button('返回') - .width('50%') - .height(40) - .margin({ top: 50 }) - .onClick(() => { - //弹出路由栈栈顶元素，返回上个页面 - this.pathInfos.pop(); - }) - } - .size({ width: '100%', height: '100%' }) - }.title(`${this.name}`) - .onReady((ctx: NavDestinationContext) => { - // NavDestinationContext获取当前所在的页面栈 - this.pathInfos = ctx.pathStack; - }) - - } -} - - -``` -导航子页2实现步骤为： - -1.使用NavDestination，来创建导航子页SharePage。 - -2.创建路由栈NavPathStack并在onReady时进行初始化，获取当前所在的页面栈，以此来实现不同页面之间的跳转。 - -3.在子页面内的组件添加onClick，并在其中使用路由栈NavPathStack的pushPathByName方法，使组件可以在点击之后从当前页面跳转到输入参数name在路由表内对应的页面。 -```ts -//PageTwo.ets -@Builder -export function MySharePageBuilder(name: string) { - MySharePage({ name: name }); -} - -@Component -export struct MySharePage { - pathInfos: NavPathStack = new NavPathStack(); - name: String = ''; - private listArray: Array = ['Projection', 'Print', 'VPN', 'Private DNS', 'NFC']; - - build() { - NavDestination() { - Column() { - List({ space: 12, initialIndex: 0 }) { - ForEach(this.listArray, (item: string) => { - ListItem() { - Row() { - Row() { - Text(`${item.slice(0, 1)}`) - .fontColor(Color.White) - .fontSize(14) - .fontWeight(FontWeight.Bold) - } - .width(30) - .height(30) - .backgroundColor('#a8a8a8') - .margin({ right: 20 }) - .borderRadius(20) - .justifyContent(FlexAlign.Center) - - Column() { - Text(item) - .fontSize(16) - .margin({ bottom: 5 }) - } - .alignItems(HorizontalAlign.Start) - - Blank() - - Row() - .width(12) - .height(12) - .margin({ right: 15 }) - .border({ - width: { top: 2, right: 2 }, - color: 0xcccccc - }) - .rotate({ angle: 45 }) - } - .borderRadius(15) - .shadow({ radius: 100, color: '#ededed' }) - .width('90%') - .alignItems(VerticalAlign.Center) - .padding({ left: 15, top: 15, bottom: 15 }) - .backgroundColor(Color.White) - } - .width('100%') - .onClick(() => { - this.pathInfos.pushPathByName(`${item}`, '页面设置参数'); - }) - }, (item: string): string => item) - } - .listDirection(Axis.Vertical) - .edgeEffect(EdgeEffect.Spring) - .sticky(StickyStyle.Header) - .width('100%') - } - .size({ width: '100%', height: '100%' }) - }.title(`${this.name}`) - .onReady((ctx: NavDestinationContext) => { - // NavDestinationContext获取当前所在的页面栈 - this.pathInfos = ctx.pathStack; - }) - } -} -``` -## 创建路由跳转 -实现步骤为： - -1.工程配置文件module.json5中配置 {"routerMap": "$profile:route_map"}。 - -2.route_map.json中配置全局路由表，路由栈NavPathStack可根据路由表中的name将对应页面信息入栈。 -```ts -{ - "routerMap" : [ - { - "name" : "WLAN", - "pageSourceFile" : "src/main/ets/pages/PageOne.ets", - "buildFunction" : "MyCommonPageBuilder" - }, - { - "name" : "Bluetooth", - "pageSourceFile" : "src/main/ets/pages/PageOne.ets", - "buildFunction" : "MyCommonPageBuilder" - }, - { - "name" : "Personal Hotspot", - "pageSourceFile" : "src/main/ets/pages/PageOne.ets", - "buildFunction" : "MyCommonPageBuilder" - }, - { - "name" : "Connect & Share", - "pageSourceFile" : "src/main/ets/pages/PageTwo.ets", - "buildFunction" : "MySharePageBuilder" - }, - { - "name" : "Projection", - "pageSourceFile" : "src/main/ets/pages/PageOne.ets", - "buildFunction" : "MyCommonPageBuilder" - }, - { - "name" : "Print", - "pageSourceFile" : "src/main/ets/pages/PageOne.ets", - "buildFunction" : "MyCommonPageBuilder" - }, - { - "name" : "VPN", - "pageSourceFile" : "src/main/ets/pages/PageOne.ets", - "buildFunction" : "MyCommonPageBuilder" - }, - { - "name" : "Private DNS", - "pageSourceFile" : "src/main/ets/pages/PageOne.ets", - "buildFunction" : "MyCommonPageBuilder" - }, - { - "name" : "NFC", - "pageSourceFile" : "src/main/ets/pages/PageOne.ets", - "buildFunction" : "MyCommonPageBuilder" - } - ] -} -``` - -![zh-cn_image_0000001588458252](figures/arkts-navigation-transition_1.gif) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/arkts-page-transition-animation.md b/zh-cn/application-dev/ui/arkts-page-transition-animation.md index 1d07b86d09175e7ef78ad80c56204e5d5fe13483..3904f0a526e34183f1f8208c9a1ba09e276b34dd 100644 --- a/zh-cn/application-dev/ui/arkts-page-transition-animation.md +++ b/zh-cn/application-dev/ui/arkts-page-transition-animation.md @@ -1,6 +1,6 @@ # 页面转场动画 (不推荐) -为了实现更好的转场效果，推荐使用[导航转场](arkts-navigation-transition.md)和[模态转场](arkts-modal-transition.md)。 +为了实现更好的转场效果，推荐使用[导航转场](arkts-navigation-navigation.md)和[模态转场](arkts-modal-transition.md)。 两个页面间发生跳转，一个页面消失，另一个页面出现，这时可以配置各自页面的页面转场参数实现自定义的页面转场效果。[页面转场](../reference/apis-arkui/arkui-ts/ts-page-transition-animation.md)效果写在pageTransition函数中，通过[PageTransitionEnter](../reference/apis-arkui/arkui-ts/ts-page-transition-animation.md#pagetransitionenter)和[PageTransitionExit](../reference/apis-arkui/arkui-ts/ts-page-transition-animation.md#pagetransitionexit)指定页面进入和退出的动画效果。 pageTransition的函数为： diff --git a/zh-cn/application-dev/ui/arkts-router-to-navigation.md b/zh-cn/application-dev/ui/arkts-router-to-navigation.md index 9d8c4e410ee62f3a16c0a2c3fdbb4b3a91e608fa..8bcc11d1056e2f639c972d129910f66846c10f17 100644 --- a/zh-cn/application-dev/ui/arkts-router-to-navigation.md +++ b/zh-cn/application-dev/ui/arkts-router-to-navigation.md @@ -191,7 +191,7 @@ let size = this.getUIContext().getRouter().getLength(); let pageState = this.getUIContext().getRouter().getState(); ``` -Navigation通过页面栈对象[NavPathStack](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#navpathstack10)提供的方法来操作页面，需要创建一个栈对象并传入Navigation中。 +Navigation通过导航控制器对象[NavPathStack](../reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md#navpathstack10)提供的方法来操作页面，需要创建一个栈对象并传入Navigation中。 ```ts @Entry @@ -224,7 +224,7 @@ this.pathStack.replacePath({ name: 'pageOne' }); // clear all page this.pathStack.clear(); -// 获取页面栈大小 +// 获取路由栈大小 let size: number = this.pathStack.size(); // 删除栈中name为PageOne的所有页面 @@ -247,7 +247,7 @@ this.pathStack.getIndexByName("pageOne"); // ... ``` -Router作为全局通用模块，可以在任意页面中调用，Navigation作为组件，子页面想要做路由需要拿到Navigation持有的页面栈对象NavPathStack，可以通过如下几种方式获取： +Router作为全局通用模块，可以在任意页面中调用，Navigation作为组件，子页面想要做路由需要拿到Navigation持有的导航控制器对象NavPathStack，可以通过如下几种方式获取： **方式一**：通过`@Provide`和`@Consume`传递给子页面（有耦合，不推荐）。 @@ -697,7 +697,7 @@ Navigation也可以通过[queryNavDestinationInfo](../reference/apis-arkui/arkui | navigationId | ResourceStr | 是 | 包含NavDestination组件的Navigation组件的id。 | | name | ResourceStr | 是 | NavDestination组件的名称。 | | state | NavDestinationState | 是 | NavDestination组件的状态。 | -| index12+ | number | 是 | NavDestination在页面栈中的索引。 | +| index12+ | number | 是 | NavDestination在路由栈中的索引。 | | param12+ | Object | 否 | NavDestination组件的参数。 | | navDestinationId12+ | string | 是 | NavDestination组件的唯一标识ID。 | diff --git a/zh-cn/application-dev/ui/arkts-sheet-page.md b/zh-cn/application-dev/ui/arkts-sheet-page.md index 22c149a4efc8893cba85d762de8e63d01dc1c6db..19758813bafe9ccbda1f6e35060bd124ff313884 100644 --- a/zh-cn/application-dev/ui/arkts-sheet-page.md +++ b/zh-cn/application-dev/ui/arkts-sheet-page.md @@ -4,7 +4,7 @@ 半模态页面适用于展示简单的任务或信息面板，例如，个人信息、文本简介、分享面板、创建日程、添加内容等。若需展示可能影响父视图的半模态页面，半模态支持配置为非模态交互形式。 -半模态在不同宽度的设备上存在不同的形态能力，开发者对不同宽度的设备上有不同的形态诉求请参考([preferType](../reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md#sheetoptions))属性。可以使用bindSheet构建半模态转场效果，详见[模态转场](arkts-modal-transition.md#使用bindsheet构建半模态转场效果)。对于复杂或者冗长的用户流程，建议考虑其他的转场方式替代半模态。如[全模态转场](arkts-contentcover-page.md)和[Navigation转场](arkts-navigation-transition.md)。 +半模态在不同宽度的设备上存在不同的形态能力，开发者对不同宽度的设备上有不同的形态诉求请参考([preferType](../reference/apis-arkui/arkui-ts/ts-universal-attributes-sheet-transition.md#sheetoptions))属性。可以使用bindSheet构建半模态转场效果，详见[模态转场](arkts-modal-transition.md#使用bindsheet构建半模态转场效果)。对于复杂或者冗长的用户流程，建议考虑其他的转场方式替代半模态。如[全模态转场](arkts-contentcover-page.md)和[Navigation转场](arkts-navigation-navigation.md)。 ## 使用约束 diff --git a/zh-cn/application-dev/ui/arkts-transition-overview.md b/zh-cn/application-dev/ui/arkts-transition-overview.md index 0341bf9b61ce0472dbe81dec6e8df6a29372bb10..a0f59432dc1eacdca4738722f0879dd64b9cf9ba 100644 --- a/zh-cn/application-dev/ui/arkts-transition-overview.md +++ b/zh-cn/application-dev/ui/arkts-transition-overview.md @@ -9,12 +9,12 @@ - [出现/消失转场](arkts-enter-exit-transition.md)：对新增、消失的控件实现动画效果，是通用的基础转场效果。 -- [导航转场](arkts-navigation-transition.md)：页面的路由转场方式，对应一个界面消失，另外一个界面出现的动画效果，如设置应用一级菜单切换到二级界面。 +- [导航转场](arkts-navigation-navigation.md#导航示例)：页面的路由转场方式，对应一个界面消失，另外一个界面出现的动画效果，如设置应用一级菜单切换到二级界面。 - [模态转场](arkts-modal-transition.md)：新的界面覆盖在旧的界面之上的动画，旧的界面不消失，新的界面出现，如弹框就是典型的模态转场动画。 - [共享元素转场 (一镜到底)](arkts-shared-element-transition.md)：共享元素转场是一种界面切换时对相同或者相似的元素做的一种位置和大小匹配的过渡动画效果。 -- [页面转场动画（不推荐）](arkts-page-transition-animation.md)：页面的路由转场方式，可以通过在pageTransition函数中自定义页面入场和页面退场的转场动效。为了实现更好的转场效果，推荐使用[导航转场](arkts-navigation-transition.md)和[模态转场](arkts-modal-transition.md)。 +- [页面转场动画（不推荐）](arkts-page-transition-animation.md)：页面的路由转场方式，可以通过在pageTransition函数中自定义页面入场和页面退场的转场动效。为了实现更好的转场效果，推荐使用[导航转场](arkts-navigation-navigation.md)和[模态转场](arkts-modal-transition.md)。 - [旋转屏动画](arkts-rotation-transition-animation.md)：旋转屏动画主要分为两类：[布局切换的旋转屏动画](arkts-rotation-transition-animation.md#布局切换的旋转屏动画)和[透明度变化的旋转屏动画](arkts-rotation-transition-animation.md#透明度变化的旋转屏动画)，旨在实现屏幕显示方向变化时的自然过渡。 diff --git a/zh-cn/application-dev/website.md b/zh-cn/application-dev/website.md index 600e874f4a6aff63766889e89a51c4bf1007e9d2..aa3f86ffe1d7ae06250ab0c63a10c89cbad33730 100644 --- a/zh-cn/application-dev/website.md +++ b/zh-cn/application-dev/website.md @@ -459,8 +459,7 @@ - [自定义渲染 (XComponent)](ui/napi-xcomponent-guidelines.md) - 设置组件导航和页面路由 - [组件导航和页面路由概述](ui/arkts-navigation-introduction.md) - - [组件导航 (Navigation)(推荐)](ui/arkts-navigation-navigation.md) - - [实现组件导航转场](ui/arkts-navigation-transition.md) + - [组件导航(Navigation) (推荐)](ui/arkts-navigation-navigation.md) - [页面路由 (@ohos.router)(不推荐)](ui/arkts-routing.md) - [Router切换Navigation](ui/arkts-router-to-navigation.md) - 使用文本