HarmonyOS 鸿蒙Next CustomDialog中打开Component类型的页面,新开的页面在dialog下层
HarmonyOS 鸿蒙Next CustomDialog中打开Component类型的页面,新开的页面在dialog下层
新的页面显示将dialog覆盖,然后在新页面返回,dialog还在
想要实现Dialog跳转页面之后 再返回Dialog不消失 ,可以使用Stack组件模拟实现Dialog的效果。
import router from '[@ohos](/user/ohos).router';
[@Entry](/user/Entry)
[@Component](/user/Component)
struct a {
[@State](/user/State) textValue: string = 'Hello World'
// 显隐控制设置为不占用
[@State](/user/State) visible: Visibility = Visibility.None
build() {
// 使用stack可以实现假的dialog覆盖原页面上面
Stack() {
Row() {
// 初始页面
Column() {
Text('Hello World')
.fontSize(50)
.fontWeight(FontWeight.Bold)
// 触发dialog的地方
Button('click')
.onClick(() => {
//用于检测点击事件是否透传到原来的页面,我测了一下是没有透传的,符合dialog规范
console.log("hit me!")
if (this.visible == Visibility.Visible) {
this.visible = Visibility.None
} else {
this.visible = Visibility.Visible
}
})
.backgroundColor(0x777474)
.fontColor(0x000000)
}
.width('100%')
}
.height('100%')
.backgroundColor(0x885555)
Column() {
// 这个可以调节对话框效果,栅格布局,xs,sm,md,lg分别为四种规格
// 下面的breakpoints是用来区别当前属于哪个类型的断点
// gridRow里的栅格数量为总数,gridCol里的就是偏移和假Dialog所占据的栅格数
GridRow({
columns:{xs:10 ,sm: 4, md: 8, lg: 12},
breakpoints: { value: ["400vp", "600vp", "800vp"],
reference: BreakpointsReference.WindowSize },
})
{
GridCol({
span:{xs:10 ,sm: 2, md: 4, lg: 8},
offset:{xs:2,sm: 1, md: 2, lg: 2}
}){
// 这里放的就是原Dialog里的column里的东西,稍微改改应该就可以用了
Column() {
Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%')
.onChange((value: string) => {
this.textValue = value
})
Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })
Flex({ justifyContent: FlexAlign.SpaceAround }) {
Button('cancel')
.onClick(() => {
if (this.visible == Visibility.Visible) {
this.visible = Visibility.None
} else {
this.visible = Visibility.Visible
}
}).backgroundColor(0xffffff).fontColor(Color.Black)
Button('jump')
.onClick(() => {
router.pushUrl({
url: 'pages/Index'
})
}).backgroundColor(0xffffff).fontColor(Color.Red)
}.margin({ bottom: 10 })
}
.backgroundColor(0xffffff)
.visibility(this.visible)
.clip(true)
.borderRadius(20)
}
}
}.width('95%')//设置弹窗宽度
}
}
}
自定义弹窗是顶级窗口,会显示在最上面,打开的page界面还在Ability的窗口,所以界面会显示到弹窗下面,想实现界面再弹窗上面,
1.如果使用的navigation架构,可以将自定义弹窗改成navigation的dialog模式
2。如果是router架构,可以考虑将自定义弹窗改成上一个界面的布局显示
在HarmonyOS鸿蒙系统中,如果你在使用Next CustomDialog时尝试打开Component类型的页面,并遇到新页面显示在Dialog下层的问题,这通常是由于页面栈管理或Dialog的层级设置不当导致的。
要解决这个问题,你可以考虑以下几个方面:
-
检查Dialog的层级设置:确保你的CustomDialog在显示时具有足够的层级,以覆盖其他UI元素。可以通过调整Dialog的显示属性或层级参数来实现。
-
页面栈管理:鸿蒙系统使用页面栈来管理页面,当打开新页面时,该页面会被推送到页面栈顶。如果新页面没有正确推送到栈顶,就可能会被其他UI元素覆盖。检查你的页面跳转逻辑,确保新页面被正确推送到栈顶。
-
使用合适的显示方式:如果CustomDialog不适合你的需求,可以考虑使用其他UI组件或显示方式,如ModalSheet或全屏页面,来实现类似的功能。
-
代码审查:仔细检查相关代码,确保没有逻辑错误或配置不当导致的问题。
如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html。