【HarmonyOS NEXT】如何判断全局是否存在通过CustomDialogController创建的自定义弹窗

 【关键字】

全局 / 判断 / 弹窗 / 关闭

【问题描述】

工程包含一个超时自动退出帐号的功能，自动退出是通过一个单例功能类实现，在退出时，如何判断全局是否存在通过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 })
  }
  }