在弹窗中打开新页面,为什么会出现在弹窗底部(HarmonyOS 鸿蒙Next)
在弹窗中打开新页面,为什么会出现在弹窗底部(HarmonyOS 鸿蒙Next) 【设备信息】Mate60
【API版本】Api13
【DevEco Studio版本】5.0.7.200
【问题描述】我在打开一个自定义弹窗之后,有部分按钮会通过(router.pushUrl)跳转新页面,但是新页面会出现在弹窗的底部,而不是定位,我打开弹窗不应该是附加在当前页面的吗?
2 回复
自定义弹窗现已不再随路由关闭,是会一直展示在页面,页面的效果就是弹窗依然浮在新页面上。
可以参考下以下方案:
方案一:可调用close方法先进行手动关闭,返回页面时在onPageShow中设置this.dialogController?.open() 打开弹窗。
方案二:使用NavDestination的Dialog模式实现自定义弹窗,可以参考如下demo:
interface RouterParams {
name?: string,
onPop?: (data: PopInfo) => void
}
// 封装路由工具类,并注册自定义弹窗组件
class AppRouter {
private static instance = new AppRouter();
private pathStack: NavPathStack = new NavPathStack();
public static getInstance(): AppRouter {
return AppRouter.instance;
}
public getPathStack(): NavPathStack {
return this.pathStack;
}
private pushPath(name: string): void {
this.pathStack.pushPath({ name: name })
}
public static push(name: string): void {
AppRouter.instance.pushPath(name);
}
public static openDialog(name: string, params?: RouterParams): void {
AppRouter.instance.pathStack.pushPath({
name: name, param: params, onPop: (data: PopInfo) => {
if (params?.onPop) {
params.onPop!(data);
}
}
});
}
public static pop(): void {
AppRouter.instance.pathStack.pop();
}
}
@Component
// NavDestinationMode.DIALOG
struct DefaultDialog {
build() {
NavDestination() {
Stack({ alignContent: Alignment.Center }) {
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("dialogA")
.fontColor(Color.White)
Button("push pageC", { stateEffect: true, type: ButtonType.Capsule })
.onClick(() => {
AppRouter.push("pageC")
})
}
.width("50%")
.height("30%")
.backgroundColor('#ffae2d2d')
.transition(
TransitionEffect.scale({ x: 0, y: 0 }).animation({
duration: 300,
curve: Curve.Friction
})
)
}
.width("100%")
.height("100%")
}
.mode(NavDestinationMode.DIALOG)
.hideTitleBar(true)
}
}
@Component
struct PageA {
@Consume('pageInfos') pageInfos: NavPathStack;
build() {
NavDestination() {
Button('push dialogA', { stateEffect: true, type: ButtonType.Capsule })
.onClick(() => {
AppRouter.openDialog("DefaultDialog");
}).margin(10)
}.title('PageA')
}
}
@Component
struct PageC {
@Consume('pageInfos') pageInfos: NavPathStack;
build() {
NavDestination() {
Column() {
Text('pageC')
.margin(10)
Button('返回', { stateEffect: true, type: ButtonType.Capsule })
.onClick(() => {
AppRouter.pop();
}).margin(10)
}
}.mode(NavDestinationMode.STANDARD)
}
}
@Entry
@Component
struct pageRoot01 {
@Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()
// 显隐控制设置为不占用
@State visible: Visibility = Visibility.None
@Builder
PagesMap(name: string) {
if (name == 'pageA') {
PageA()
} else if (name == 'pageC') {
PageC()
} else if (name == 'DefaultDialog') {
DefaultDialog()
}
}
build() {
// 在根页面中注册NavPathStack
Navigation(AppRouter.getInstance().getPathStack()) {
Stack({ alignContent: Alignment.Center }) {
Column() {
Button('push PageA', { stateEffect: true, type: ButtonType.Capsule })
.onClick(() => {
AppRouter.push('pageA')
})
}
}
.height("100%")
.width("100%")
}
.hideTitleBar(true)
.navDestination(this.PagesMap)
}
}
更多关于在弹窗中打开新页面,为什么会出现在弹窗底部(HarmonyOS 鸿蒙Next)的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中,弹窗中打开新页面时出现在弹窗底部,可能是由于弹窗的层级管理机制导致的。鸿蒙系统的弹窗通常采用PopupWindow
或Dialog
组件,这些组件的默认行为是将内容显示在当前窗口的顶部。但在某些情况下,如果新页面的布局属性或窗口管理策略未正确配置,可能会导致新页面出现在弹窗底部。
具体原因可能包括:
- 布局层级:新页面的布局可能被放置在弹窗的底部层级,而非顶层。
- 窗口管理:鸿蒙系统的窗口管理器可能未正确处理弹窗与新页面的层级关系。
- 组件属性:弹窗或新页面的属性(如
gravity
或layout_gravity
)可能被设置为底部对齐。
解决方法通常涉及调整布局或窗口管理策略,确保新页面显示在弹窗的顶层。