#鸿蒙通关秘籍#如何在2in1设备上实现超出应用界面的弹窗显示？

在ArkUI中，通过设置showInSubWindow可以使模态弹窗显示在主窗口之外，以下代码展示了如何实现这一效果：

bash // xxx.ets
@CustomDialog struct CustomDialogExample { controller?: CustomDialogController cancel: () => void = () => { } confirm: () => void = () => { } build() { Column() { Text('可展示在主窗口外的弹窗') .fontSize(30) .height(100) Button('点我关闭弹窗') .onClick(() => { if (this.controller != undefined) { this.controller.close() } }) .margin(20) } } } @Entry @Component struct CustomDialogUser { dialogController: CustomDialogController | null = new CustomDialogController({ builder: CustomDialogExample({ cancel: ()=> { this.onCancel() }, confirm: ()=> { this.onAccept() } }), cancel: this.existApp, autoCancel: true, alignment: DialogAlignment.Center, offset: { dx: 0, dy: -20 }, gridCount: 4, showInSubWindow: true, isModal: true, customStyle: false, cornerRadius: 10, })

aboutToDisappear() { this.dialogController = null }

onCancel() { console.info('Callback when the first button is clicked') }

onAccept() { console.info('Callback when the second button is clicked') }

existApp() { console.info('Click the callback in the blank area') }

build() { Column() { Button('click me') .onClick(() => { if (this.dialogController != null) { this.dialogController.open() } }).backgroundColor(0x317aff) }.width('100%').margin({ top: 5 }) } }