【关键字】
全局 / 判断 / 弹窗 / 关闭
【问题描述】
工程包含一个超时自动退出帐号的功能,自动退出是通过一个单例功能类实现,在退出时,如何判断全局是否存在通过CustomDialogController创建的自定义弹窗?如果有弹窗,如何关闭所有弹窗?
【解决方案】
可以创建一个全局弹窗管理的对象,注册全局事件来维护弹窗弹窗对象。
示例代码如下:
-
EntryAbility.ets
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { let context = this.context; let eventhub = this.context.eventHub; AppStorage.setOrCreate('dialogList', []); eventhub.on('addDiaLog', (data: CustomDialogController ) => { let dialogList:SubscribedAbstractProperty<CustomDialogController[]> = AppStorage.link('dialogList'); let dialoginfo:CustomDialogController[] = dialogList.get(); dialoginfo.push(data); dialogList.set(dialoginfo) }); eventhub.on('closeAllDiaLog', ()=>{ let dialogList:SubscribedAbstractProperty<CustomDialogController[]> = AppStorage.link('dialogList'); let dialoginfo:CustomDialogController[] = dialogList.get(); for (let elem of dialoginfo.values()) { elem.close(); } }) hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); }
-
Index.ets
import common from '@ohos.app.ability.common'; @CustomDialog struct CustomDialogExampleTwo { private context = getContext(this) as common.UIAbilityContext; controllerTwo?: CustomDialogController build() { Column() { Text('我是第二个弹窗') .fontSize(30) .height(100) Button('点我关闭所有弹窗') .onClick(() => { this.context.eventHub.emit('closeAllDiaLog'); // if (this.controllerTwo != undefined) { // this.controllerTwo.close() // } }) .margin(20) } } } @CustomDialog struct CustomDialogExample { private context = getContext(this) as common.UIAbilityContext; @Link textValue: string @Link inputValue: string dialogControllerTwo: CustomDialogController | null = new CustomDialogController({ builder: CustomDialogExampleTwo(), alignment: DialogAlignment.Bottom, offset: { dx: 0, dy: -25 } }) controller?: CustomDialogController // 若尝试在CustomDialog中传入多个其他的Controller,以实现在CustomDialog中打开另一个或另一些CustomDialog,那么此处需要将指向自己的controller放在所有controller的后面 cancel: () => void = () => { } confirm: () => void = () => { } aboutToAppear() { this.context.eventHub.emit('addDiaLog', this.dialogControllerTwo); } build() { 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.controller != undefined) { this.controller.close() this.cancel() } }).backgroundColor(0xffffff).fontColor(Color.Black) Button('confirm') .onClick(() => { if (this.controller != undefined) { this.inputValue = this.textValue this.controller.close() this.confirm() } }).backgroundColor(0xffffff).fontColor(Color.Red) }.margin({ bottom: 10 }) Button('点我打开第二个弹窗') .onClick(() => { if (this.dialogControllerTwo != null) { this.dialogControllerTwo.open() } }) .margin(20) }.borderRadius(10) // 如果需要使用border属性或cornerRadius属性,请和borderRadius属性一起使用。 } } @Entry @Component struct Index { private context = getContext(this) as common.UIAbilityContext; @State textValue: string = '' @State inputValue: string = 'click me' dialogController: CustomDialogController | null = new CustomDialogController({ builder: CustomDialogExample({ cancel: ()=> { this.onCancel() }, confirm: ()=> { this.onAccept() }, textValue: $textValue, inputValue: $inputValue }), cancel: this.exitApp, autoCancel: true, alignment: DialogAlignment.Bottom, offset: { dx: 0, dy: -20 }, gridCount: 4, customStyle: false, cornerRadius: 10, }) aboutToAppear() { this.context.eventHub.emit('addDiaLog', this.dialogController); } // 在自定义组件即将析构销毁时将dialogControlle置空 aboutToDisappear() { this.dialogController = null // 将dialogController置空 } onCancel() { console.info('Callback when the first button is clicked') } onAccept() { console.info('Callback when the second button is clicked') } exitApp() { console.info('Click the callback in the blank area') } build() { Column() { Button(this.inputValue) .onClick(() => { if (this.dialogController != null) { this.dialogController.open() } }).backgroundColor(0x317aff) }.width('100%').margin({ top: 5 }) } }