HarmonyOS 鸿蒙Next弹窗之上再弹一个弹窗如何实现
HarmonyOS 鸿蒙Next弹窗之上再弹一个弹窗如何实现
需要一个弹窗上面,弹出再弹一个城市选择的弹窗。目前不知道怎么弹两个弹窗。
2 回复
嵌套自定义弹窗可参考官方文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-common-components-custom-dialog-V5 ,或者还可以使用Stack组件模拟实现Dialog的效果,示例代码如下:
@Entry
@Component
struct Index {
@State bottomOpacity: number = 1;
@State topOpacity: number = 0;
popShow() {
console.info("Pop show ...");
if (this.topOpacity === 1) {
return;
}
console.info("Pop show start ...");
this.bottomOpacity = 0.6;
this.topOpacity = 1;
console.info("Pop show end ...");
}
popHide(): void {
console.info("Pop hide ...");
if (this.topOpacity === 0) {
return;
}
console.info("Pop hide start ...");
this.bottomOpacity = 1;
this.topOpacity = 0;
console.info("Pop hide end ...");
}
build() {
Stack({ alignContent: Alignment.Bottom }) {
Column() {
Text('First child, show in level 1')
.width('60%')
.height('20%')
.align(Alignment.Center)
}
.width('100%')
.height('100%')
.backgroundColor(0xd2cab3)
.justifyContent(FlexAlign.Center)
.opacity(this.bottomOpacity)
this.popup();
Button('Click Me')
.width('40%')
.height('10%')
.backgroundColor(Color.Green)
.zIndex(3)
.onClick(() => this.popShow())
}
.width('100%')
.height('100%')
.margin({ top: 5 })
}
@Builder popup() {
if (this.topOpacity === 1) {
Column() {
Text('Second child, show in level2')
.width('70%')
.height('20%')
.align(Alignment.Center)
}
.width('70%')
.height('20%')
.backgroundColor(0xc1cbac)
.justifyContent(FlexAlign.Center)
.position({
x: 50,
y: 90
})
.opacity(this.topOpacity)
.onClick(() => this.popHide())
}
}
}
更多关于HarmonyOS 鸿蒙Next弹窗之上再弹一个弹窗如何实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html