HarmonyOS 鸿蒙Next @customDialog修饰的弹窗,在弹窗不关闭的情况下新开页面,新页面会在弹窗下层展示

发布于 1周前 作者 nodeper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next @customDialog修饰的弹窗,在弹窗不关闭的情况下新开页面,新页面会在弹窗下层展示

@customDialog修饰的弹窗,在弹窗不关闭的情况下新开页面,弹窗会盖在新页面的上面

期望新页面在弹窗上,弹窗不可见,关闭新页面后,显示弹窗

2 回复
使用模态弹窗可能会更合适:
import { router } from '[@kit](/user/kit).ArkUI';

[@Entry](/user/Entry)
[@Component](/user/Component)
struct ModalTransitionTest {
[@State](/user/State) message: string = 'Hello World';
[@State](/user/State) showDialog: boolean = false

onBackPress(): boolean | void {
if (this.showDialog) {
animateTo({duration: 300}, () => {
this.showDialog = false
})
return true
}
return false
}

build() {
Stack() {
RelativeContainer() {
Text(this.message)
.id('ModalTransitionTestHelloWorld')
.fontSize(50)
.fontWeight(FontWeight.Bold)
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
.onClick(() => {
animateTo({duration: 300}, () => {
this.showDialog = true
})
})
}
.height('100%')
.width('100%')

if (this.showDialog) {
Column() {
Column() {
Text('跳转新页面')
.fontSize(30)
.onClick(() => {
router.pushUrl({
url: 'pages/Index'
})
})
}
.backgroundColor(Color.White)
.borderRadius(15)
.width('80%')
.height('40%')
.transition(
TransitionEffect.OPACITY.animation({ duration: 300, curve: Curve.FastOutLinearIn })
.combine(TransitionEffect.scale({
x: 0.3,
y: 0.3
}))
)
}
.backgroundColor(0x44000000)
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
.onClick(() => {
animateTo({duration: 300}, () => {
this.showDialog = false
})
})
}
}
.width('100%')
.height('100%')
}
}

在HarmonyOS鸿蒙系统中,当你使用@customDialog修饰的弹窗时,默认情况下,新打开的页面会在弹窗的下层展示,这是因为弹窗通常被设计为模态对话框,会阻塞其他界面元素的交互,直到弹窗被关闭。

若你希望在新页面打开时,@customDialog修饰的弹窗仍然保持显示且不被新页面覆盖,这涉及到UI层级和焦点管理的复杂问题。HarmonyOS的UI系统通常不允许这样的行为,因为它违背了用户界面的基本交互原则,可能会导致用户体验上的混乱。

然而,如果你有特殊需求,确实需要实现这种功能,可以考虑以下方向:

  1. 自定义弹窗实现:不使用@customDialog,而是通过自定义的AbilityFragment来实现弹窗效果,并手动管理其显示与隐藏。

  2. 调整页面层级:虽然不推荐,但可以尝试通过修改页面的Z轴顺序(如果API支持)来尝试改变页面的显示层级,不过这种方法可能带来其他不可预知的问题。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部