HarmonyOS：弹出框焦点策略

一、简介

ArkUI的弹出框焦点策略可以设定是否中断用户当前操作，并聚焦到新弹出的弹出框。若设定弹出框不获取焦点，则新弹出时不会中断用户当前操作，例如，当用户正在文本框中输入内容时，新弹出的弹出框不会关闭软键盘，焦点仍保留在文本框中。
从API version 19开始，可以通过设置focusable参数来管理弹出框是否获取焦点。

二、使用约束

openCustomDialog和CustomDialog支持通过focusable参数来管理弹出框是否获取焦点。
说明 只有弹出覆盖在当前窗口之上的弹出框才可以获取焦点。

三、创建不获取焦点的弹出框

1. 初始化一个弹出框内容区域，内含一个Text组件。

private message = '弹窗'
@State dialogIdIndex: number = 0
@Builder customDialogComponent() {
  Column({ space: 5 }) {
    Text(this.message + this.dialogIdIndex)
      .fontSize(30)
  }
  .height(200)
  .padding(5)
  .justifyContent(FlexAlign.SpaceBetween)
}

2. 创建一个TextInput组件，在onChange事件函数中通过调用UIContext中的getPromptAction方法获取PromptAction对象，再通过该对象调用openCustomDialog接口，并设置focusable参数为false，以创建弹出框。

TextInput()
  .onChange(() => {
    this.dialogIdIndex++
    this.getUIContext().getPromptAction().openCustomDialog({
      builder: () => {
        this.customDialogComponent()
      },
      focusable: false
    }).then((dialogId: number) => {
      setTimeout(() => {
        this.getUIContext().getPromptAction().closeCustomDialog(dialogId);
      }, 3000)
    })
  })

四、完整示例

当用户正在文本框中输入内容时，新弹出的弹出框不会关闭软键盘，焦点仍保留在文本框中。

效果图

示例代码

@Entry
@Component
export struct TestOpenCustomDialog6 {
  private message = '弹窗不获取焦点';
  @State dialogIdIndex: number = 0;

  @Builder
  customDialogComponent() {
    Column({ space: 5 }) {
      Text(this.message + this.dialogIdIndex)
        .fontSize(30)
    }
    .height(200)
    .padding(5)
    .justifyContent(FlexAlign.SpaceBetween)
  }

  build() {
    Column({ space: 5 }) {
      TextInput()
        .onChange(() => {
          this.dialogIdIndex++;
          this.getUIContext().getPromptAction().openCustomDialog({
            builder: () => {
              this.customDialogComponent()
            },
            focusable: false// 从API version 19开始，可以通过设置focusable参数来管理弹出框是否获取焦点。
          }).then((dialogId: number) => {
            setTimeout(() => {
              this.getUIContext().getPromptAction().closeCustomDialog(dialogId);
            }, 3000)
          })
        })
    }.width('100%')
  }
}