HarmonyOS 鸿蒙Next navigation
HarmonyOS 鸿蒙Next navigation
为什么调用 replacePathByName 或者replacepath的时候 右滑返回还能返回到 被replace的那个页面。 splashpage-> homepae ->右滑退出home-> splashpage 。 不应该直接到桌面？
2 回复
目前 replace 只能替换非根页面的路径，规格如此。（replacepath：首页->PageA->PageB->右滑返回首页）此外，Dialog类型的页面默认无转场动画。
参考demo：
//index.page
import { CustomDialogA, CustomDialogB } from '../model/CustomDialog';
import { AppRouter } from '../router/AppRouter'
import { CaseDialog } from './CaseDialog';
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index{
[@Provide](/user/Provide)('pageInfos') pageInfos: NavPathStack = new NavPathStack()
aboutToAppear() {
AppRouter.getInstance().register(this.pageInfos);
}
[@Builder](/user/Builder)
PageMap(name: string) {
if (name === 'dialog') {
CaseDialog()
} else if (name === 'customDialog') {
CustomDialogA()
} else if (name === 'fullDialog') {
CustomDialogB()
}
}
build() {
Navigation(this.pageInfos) {
Column() {
Button('Dialog', { stateEffect: true, type: ButtonType.Capsule })
.onClick(() => {
this.pageInfos.pushPath({ name: 'dialog' })
})
}
}
.hideTitleBar(true)
.navDestination(this.PageMap)
}
}
//CaseDialog.page
import { AppRouter } from '../router/AppRouter';
[@Entry](/user/Entry)
[@Component](/user/Component)
export struct CaseDialog {
[@State](/user/State) message: string = "弹窗背景";
build() {
NavDestination() {
Column() {
Text(this.message)
Row()
.height("90%")
.width("100%")
.backgroundColor(Color.Brown)
Button('打开弹窗', { stateEffect: true, type: ButtonType.Capsule })
.onClick(() => {
// 打开组件弹窗
AppRouter.openDialog("customDialog");
})
}
}
}
}
//Customdialog
import { AppRouter, RouterParams } from '../router/AppRouter';
[@Component](/user/Component)
export struct CustomDialogA {
[@State](/user/State) heightSize: string = "50%";
[@State](/user/State) params: string = "";
aboutToAppear() {
this.params = AppRouter.getParams("customDialog");
}
build() {
NavDestination() {
Stack({ alignContent: Alignment.Bottom }) {
Column() {}
.width("100%")
.height("100%")
.backgroundColor('rgba(0,0,0,0.5)')
.transition(
TransitionEffect.OPACITY.animation({
duration: 300,
curve: Curve.Friction
})
)
.onClick(() => {
AppRouter.pop();
})
Column() {
Text("弹窗")
.fontColor(Color.White)
Text("参数:" + this.params)
.fontSize(18)
.fontColor(Color.White)
Button("新弹窗", { stateEffect: true, type: ButtonType.Capsule })
.onClick(() => {
AppRouter.openDialog("fullDialog", { name: "new Open" } as RouterParams)
})
}
.width("100%")
.backgroundColor(Color.Blue)
.height(this.heightSize)
// .align(Alignment.Bottom)
.transition(
TransitionEffect.move(TransitionEdge.BOTTOM)
.animation({
duration: 300,
curve: Curve.Friction
})
)
}
.width("100%")
.height("100%")
}
.mode(NavDestinationMode.DIALOG)
.hideTitleBar(true)
}
}
[@Component](/user/Component)
export struct CustomDialogB {
[@State](/user/State) info: string = "";
[@State](/user/State) transX: number = 0
aboutToAppear() {
this.info = AppRouter.getParams("fullDialog");
}
build() {
NavDestination() {
// Column() {
Column() {
Text("全屏弹窗")
Text("参数:" + this.info)
.fontSize(18)
Button("返回", { stateEffect: true, type: ButtonType.Capsule })
.onClick(() => {
AppRouter.pop()
})
}
.backgroundColor(Color.White)
.width("100%")
.height("100%")
.align(Alignment.Bottom)
.transition(
TransitionEffect.move(TransitionEdge.END)
// TransitionEffect.OPACITY
.animation({
duration: 3000,
curve: Curve.Friction
})
)
// }
// .width("100%")
// .height("100%")
// .backgroundColor('rgba(0,0,0,0.5)')
// .transition(
// TransitionEffect.OPACITY.animation({
// duration: 3000,
// curve: Curve.Friction
// })
// )
}
.mode(NavDestinationMode.DIALOG)
.hideTitleBar(true)
.transition(
TransitionEffect.move(TransitionEdge.TOP)
.animation({
duration: 3000,
curve: Curve.Friction
})
)
}
}
//AppRouter.ets:
import { HashMap } from '[@kit](/user/kit).ArkTS';
export interface RouterParams {
name?: string
}
export class AppRouter {
private pageStack?: NavPathStack;
private routeMap: HashMap<string, WrappedBuilder<[object]>> = new HashMap();
public static getInstance(): AppRouter {
return instance;
}
register(pageStack: NavPathStack): void {
this.pageStack = pageStack;
}
public addRouteMap(name: string, builder:
WrappedBuilder<[object]>): void {
this.routeMap.set(name, builder)
}
private pushPath(name: string): void {
this.pageStack!.pushPath({ name: name })
}
public static push(name: string): void {
instance.pushPath(name);
}
public static openDialog(name: string, params?: RouterParams): void {
instance.pageStack?.pushPath({ name: name, param: params });
}
public static replace(name: string, params?: RouterParams): void {
instance.pageStack?.replacePath({ name: name, param: params });
}
public static getParams(name: string): string {
return JSON.stringify(instance.pageStack?.getParamByName(name));
}
public static pop(): void {
instance.pageStack?.pop();
}
}
let instance: AppRouter = new AppRouter();
export interface AnimateCallback {
finish: ((isPush: boolean, isExit: boolean) => void | undefined) | undefined;
start: ((isPush: boolean, isExit: boolean) => void | undefined) | undefined;
onFinish: ((isPush: boolean, isExit: boolean) => void | undefined) | undefined;
timeout: (number | undefined) | undefined;
}
export class CustomTransition {
static delegate = new CustomTransition();
customTransitionMap: Map<string, AnimateCallback> = new Map()
static getAnimateParam(name: string): AnimateCallback {
let result: AnimateCallback = {
start: CustomTransition.delegate.customTransitionMap.get(name)?.start,
finish: CustomTransition.delegate.customTransitionMap.get(name)?.finish,
timeout: CustomTransition.delegate.customTransitionMap.get(name)?.timeout,
onFinish: CustomTransition.delegate.customTransitionMap.get(name)?.onFinish
};
return result;
}
static registerNavParam(name: string, startCallback: (operation: boolean, isExit: boolean) => void,
endCallback: (operation: boolean, isExit: boolean) => void,
onFinish: (opeation: boolean, isExit: boolean) => void, timeout: number): void {
if (CustomTransition.delegate.customTransitionMap.has(name)) {
let param = CustomTransition.delegate.customTransitionMap.get(name);
if (param != undefined) {
param.start = startCallback;
param.finish = endCallback;
param.timeout = timeout;
param.onFinish = onFinish;
return;
}
}
let params: AnimateCallback = {
timeout: timeout,
start: startCallback,
finish: endCallback,
onFinish: onFinish
};
CustomTransition.delegate.customTransitionMap.set(name, params);
}
}
更多关于HarmonyOS 鸿蒙Next navigation的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
HarmonyOS 鸿蒙Next navigation 提供了更为流畅和智能的导航体验，旨在提升用户在多设备间的切换与操作效率。以下是针对HarmonyOS 鸿蒙Next navigation的简要说明：
HarmonyOS 鸿蒙Next navigation引入了全新的导航框架，支持跨设备无缝衔接。用户可以在不同设备间自由切换，如从手机切换到平板，再切换到智慧屏，导航信息能够实时同步，确保用户在不同场景下获得一致且连贯的导航体验。
在界面设计上，HarmonyOS 鸿蒙Next navigation采用了更为简洁和直观的操作界面，用户可以轻松查看当前位置、目的地以及预计到达时间等信息。同时，系统还提供了多种导航模式，如步行、骑行、驾车等，以满足不同用户的需求。
此外，HarmonyOS 鸿蒙Next navigation还支持智能路线规划，能够根据实时路况和用户偏好，为用户推荐最优路线。在导航过程中，系统还会及时提供路况提醒、限行提示等实用信息，帮助用户更好地规划行程。
若用户在使用HarmonyOS 鸿蒙Next navigation时遇到问题，如导航不准确、信息同步失败等，可直接联系官网客服进行咨询和解决。官网客服团队将为用户提供专业的技术支持和解决方案。
如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html
