harmony 鸿蒙弹出框控制器

  • 2025-06-16
  • 浏览 (2)

弹出框控制器

ArkUI的弹出框控制器在绑定弹出框后，可提供对弹出框的操作能力，当前支持关闭功能。可以将控制器传入弹出框内容区域后进行操作。

从API version 18开始，可设置controller参数以绑定控制器，通过控制器能够操作弹出框。

使用约束

目前openCustomDialogWithController和presentCustomDialog支持通过controller参数来绑定弹出框进行操作，目前getDialogController支持获取自定义组件所在的弹出框的控制器。

说明：

一个弹出框控制器只能绑定一个弹出框，且操作只对该弹出框生效。 使用getDialogController获取弹出框控制器时，如果当前自定义组件不在弹出框中显示则获取为undefined。

创建自定义内容为ComponentContent的弹出框控制器

说明：

详细变量定义请参考完整示例。

  1. 初始化一个自定义弹出框内容区的入参类，内部包含弹出框控制器。
  class Params {
    public text: string = ''
    public dialogController: promptAction.CommonController = new promptAction.DialogController()
    constructor(text: string, dialogController: promptAction.CommonController) {
      this.text = text
      this.dialogController = dialogController
    }
  }
  1. 初始化一个自定义的弹出框内容区，内部包含一个按钮，该按钮通过该自定义组件自带的弹出框控制器实现关闭功能。
  @Component
  struct MyComponent {
    build() {
      Column({ space: 5 }) {
        Button('点我关闭弹窗：通过自定义组件自带的DialogController')
          .onClick(() => {
            let dialogController: promptAction.DialogController = this.getDialogController()
            if (dialogController !== undefined) {
              dialogController.close()
            }
          })
      }
    }
  }
  1. 初始化另一自定义弹出框内容区，其中包含一个Text组件和一个按钮，该按钮通过外部传递的弹出框控制器用于关闭弹出框，并且该内容区还包含前一个自定义弹出框内容区。
  @Builder
  function buildText(params: Params) {
    Column({ space: 5 }) {
      Text(params.text)
        .fontSize(30)
      if (params.dialogController !== undefined) {
        Button('点我关闭弹窗：通过外部传递的DialogController')
          .onClick(() => {
            params.dialogController.close()
          })
      }
      MyComponent()
    }
    .width(300)
    .height(200)
    .backgroundColor('#FFF0F0F0')
  }
  1. 初始化一个弹出框控制器，并通过设置控制器参数来初始化一个弹出框内容实体对象。最后，通过调用UIContext中的getPromptAction方法获取PromptAction对象，再通过该对象调用openCustomDialogWithController接口，并且设置初始化的内容实体对象和控制器参数以创建弹出框。
  let dialogController: promptAction.CommonController = new promptAction.DialogController()
  let contentNode: ComponentContent<Object> =
    new ComponentContent(this.getUIContext(), wrapBuilder(buildText), new Params(this.message, dialogController))
  this.getUIContext().getPromptAction().openCustomDialogWithController(
    contentNode, dialogController, this.baseDialogOptions).catch((err: BusinessError) => {
    console.error('openCustomDialogWithController error: ' + err.code + ' ' + err.message)
  })

创建自定义内容为CustomBuilder的弹出框控制器

说明：

详细变量定义请参考完整示例。

  1. 初始化一个自定义弹出框内容区，内部包含一个Text组件和一个按钮，该按钮通过外部传递的弹出框控制器实现关闭功能。
  @Builder customDialogComponent(dialogController: promptAction.DialogController) {
    Column({ space: 5 }) {
      Text(this.message)
        .fontSize(30)
      if (dialogController !== undefined) {
        Button('点击关闭弹窗：通过外部传递的DialogController')
          .onClick(() => {
            dialogController.close()
          })
      }
    }
    .height(200)
    .padding(5)
    .justifyContent(FlexAlign.SpaceBetween)
    .backgroundColor('#FFF0F0F0')
  }
  1. 初始化一个弹出框控制器，并通过调用UIContext中的getPromptAction方法获取PromptAction对象，再通过该对象调用presentCustomDialog接口，设置初始化的内容实体对象和控制器参数以创建弹出框。
  let dialogController: promptAction.CommonController = new promptAction.DialogController()
  this.getUIContext().getPromptAction().presentCustomDialog(() => {
    this.customDialogComponent(dialogController)
  }, dialogController, this.dialogOptions).catch((err: BusinessError) => {
    console.error('presentCustomDialog error: ' + err.code + ' ' + err.message)
  })

创建自定义内容为CustomBuilderWithId的弹出框控制器

说明：

详细变量定义请参考完整示例。

  1. 初始化一个弹出框内容区，内部包含一个Text组件、一个通过外部传递的弹出框ID用于关闭弹出框的按钮和一个通过外部传递的弹出框控制器用于关闭弹出框的按钮。
  @Builder customDialogComponentWithId(dialogId: number, dialogController: promptAction.DialogController) {
    Column({ space: 5 }) {
      Text(this.message)
        .fontSize(30)
      if (dialogId !== undefined) {
        Button('点击关闭弹窗：通过DialogID')
          .onClick(() => {
            this.getUIContext().getPromptAction().closeCustomDialog(dialogId)
          })
      }
      if (dialogController !== undefined) {
        Button('点击关闭弹窗：通过外部传递的DialogController')
          .onClick(() => {
            dialogController.close()
          })
      }
    }
  }
  1. 初始化一个弹出框控制器，并通过调用UIContext中的getPromptAction方法获取PromptAction对象，再通过该对象调用presentCustomDialog接口，设置初始化的内容实体对象和控制器参数以创建弹出框。
  let dialogController: promptAction.CommonController = new promptAction.DialogController()
  this.getUIContext().getPromptAction().presentCustomDialog((dialogId: number) => {
    this.customDialogComponentWithId(dialogId, dialogController)
  }, dialogController, this.dialogOptions).catch((err: BusinessError) => {
    console.error('presentCustomDialog error: ' + err.code + ' ' + err.message)
  })

在CustomDialogController内容区直接获取弹出框控制器

说明：

详细变量定义请参考完整示例。

  1. 初始化一个自定义弹出框内容区，内部包含一个Text组件和一个按钮，该按钮通过弹出框控制器关闭弹出框。
@CustomDialog
@Component
struct CustomDialogExample {
  controller?: CustomDialogController

  build() {
    Column({ space: 5 }) {
      Text('我是内容')
        .fontSize(30)
      Button('点我关闭弹窗：通过自定义组件自带的DialogController')
        .onClick(() => {
          let dialogController: PromptActionDialogController = this.getDialogController()
          if (dialogController !== undefined) {
            dialogController.close()
          }
        })
    }
    .height(200)
    .backgroundColor('#FFF0F0F0')
  }
}
  1. 初始化一个自定义弹出框构造器，关联自定义弹出框内容区。
  let customDialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample(),
  })
  customDialogController.open()

完整示例

通过外部传递的弹出框控制器和自定义组件自带的弹出框控制器，在自定义弹出框内容区域内实现关闭功能。

  import { ComponentContent, promptAction } from '@kit.ArkUI'
  import { BusinessError } from '@kit.BasicServicesKit'

  class Params {
    public text: string = ''
    public dialogController: promptAction.CommonController = new promptAction.DialogController()
    constructor(text: string, dialogController: promptAction.CommonController) {
      this.text = text
      this.dialogController = dialogController
    }
  }

  @Component
  struct MyComponent {
    build() {
      Column({ space: 5 }) {
        Button('点我关闭弹窗：通过自定义组件自带的DialogController')
          .onClick(() => {
            let dialogController: promptAction.DialogController = this.getDialogController()
            if (dialogController !== undefined) {
              dialogController.close()
            }
          })
      }
    }
  }

  @Builder
  function buildText(params: Params) {
    Column({ space: 5 }) {
      Text(params.text)
        .fontSize(30)
      if (params.dialogController !== undefined) {
        Button('点我关闭弹窗：通过外部传递的DialogController')
          .onClick(() => {
            params.dialogController.close()
          })
      }
      MyComponent()
    }
    .width(300)
    .height(200)
    .backgroundColor('#FFF0F0F0')
  }

  @CustomDialog
  @Component
  struct CustomDialogExample {
    controller?: CustomDialogController

    build() {
      Column({ space: 5 }) {
        Text('我是内容')
          .fontSize(30)
        Button('点我关闭弹窗：通过自定义组件自带的DialogController')
          .onClick(() => {
            let dialogController: PromptActionDialogController = this.getDialogController()
            if (dialogController !== undefined) {
              dialogController.close()
            }
          })
      }
      .height(200)
      .backgroundColor('#FFF0F0F0')
    }
  }

  @Entry
  @Component
  export struct Index {
    private message = '弹窗'
    @Builder customDialogComponent(dialogController: promptAction.DialogController) {
      Column({ space: 5 }) {
        Text(this.message)
          .fontSize(30)
        if (dialogController !== undefined) {
          Button('点击关闭弹窗：通过外部传递的DialogController')
            .onClick(() => {
              dialogController.close()
            })
        }
      }
      .height(200)
      .padding(5)
      .justifyContent(FlexAlign.SpaceBetween)
      .backgroundColor('#FFF0F0F0')
    }

    @Builder customDialogComponentWithId(dialogId: number, dialogController: promptAction.DialogController) {
      Column({ space: 5 }) {
        Text(this.message)
          .fontSize(30)
        if (dialogId !== undefined) {
          Button('点击关闭弹窗：通过DialogID')
            .onClick(() => {
              this.getUIContext().getPromptAction().closeCustomDialog(dialogId)
            })
        }
        if (dialogController !== undefined) {
          Button('点击关闭弹窗：通过外部传递的DialogController')
            .onClick(() => {
              dialogController.close()
            })
        }
      }
    }

    private baseDialogOptions: promptAction.BaseDialogOptions = {
      isModal: false,
      autoCancel: false
    }

    private dialogOptions: promptAction.DialogOptions = {
      isModal: false,
      autoCancel: false
    }

    build() {
      Column({ space: 5 }) {
        Button('openCustomDialogWithController弹窗')
          .onClick(() => {
            let dialogController: promptAction.CommonController = new promptAction.DialogController()
            let contentNode: ComponentContent<Object> =
              new ComponentContent(this.getUIContext(), wrapBuilder(buildText), new Params(this.message, dialogController))
            this.getUIContext().getPromptAction().openCustomDialogWithController(
              contentNode, dialogController, this.baseDialogOptions).catch((err: BusinessError) => {
              console.error('openCustomDialogWithController error: ' + err.code + ' ' + err.message)
            })
          })
        Button('presentCustomDialog+CustomBuilder弹窗')
          .onClick(() => {
            let dialogController: promptAction.CommonController = new promptAction.DialogController()
            this.getUIContext().getPromptAction().presentCustomDialog(() => {
              this.customDialogComponent(dialogController)
            }, dialogController, this.dialogOptions).catch((err: BusinessError) => {
              console.error('presentCustomDialog error: ' + err.code + ' ' + err.message)
            })
          })
        Button('presentCustomDialog+CustomBuilderWithId弹窗')
          .onClick(() => {
            let dialogController: promptAction.CommonController = new promptAction.DialogController()
            this.getUIContext().getPromptAction().presentCustomDialog((dialogId: number) => {
              this.customDialogComponentWithId(dialogId, dialogController)
            }, dialogController, this.dialogOptions).catch((err: BusinessError) => {
              console.error('presentCustomDialog error: ' + err.code + ' ' + err.message)
            })
          })
        Button('CustomDialogController弹窗')
          .onClick(() => {
            let customDialogController: CustomDialogController = new CustomDialogController({
              builder: CustomDialogExample(),
            })
            customDialogController.open()
          })
      }.width('100%')
    }
  }

dialog-controller-demo1

你可能感兴趣的鸿蒙文章

harmony 鸿蒙ArkUI（方舟UI框架）

harmony 鸿蒙全屏启动原子化服务组件（FullScreenLaunchComponent）

harmony 鸿蒙弧形按钮 (ArcButton)

harmony 鸿蒙动画衔接

harmony 鸿蒙动画概述

harmony 鸿蒙帧动画（ohos.animator）

harmony 鸿蒙实现属性动画

harmony 鸿蒙属性动画概述

harmony 鸿蒙弹出框概述

harmony 鸿蒙模糊

0  赞
  • 所属分类： 后端技术
  • 本文标签： 软件 鸿蒙
  • 版权声明： 原创文章如转载，请注明本文链接: https://m.seaxiang.com/blog/IHQVen
热门推荐
标签云
Linux Java Spring Spring Boot docker 大数据 前端 生活 maven golang 软件 spring cloud fintech mac vscode 其他 区块链 以太坊 V神 开发者 技术 股票 git greenplum 分布式事务 chrome mysql flink kafka 设计模式 原理 鸿蒙 seo
最新文章
本文目录