ArkUI如何自定义弹窗（eTS）

​

自定义弹窗其实也是比较简单的，通过CustomDialogController类就可以显示自定义弹窗。

接下来我们通过代码来看一下

大家也都用过@Entry，@Component等弹窗的话，只要用@CustomDialog就可以

先来预览一下我实现的效果：

import CustomDialogExample from './customdialog'

@Entry
@Component
struct Index {

  // 方式一：使用箭头函数
  onAccept = () => {
    console.info('确定')
    this.dialogController.close();
  }
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({ cancel: this.onCancel, confirm: this.onAccept }),

    alignment: DialogAlignment.Center,
    cancel: () => {
      console.log("cancel")         // 点击蒙层的回调
    },
    autoCancel: true,               // 允许点击蒙层关闭弹窗
    customStyle: false               // 使用自定义样式
  })

  onCancel() {
    console.info('取消')
  }

  build() {
    Column({}) {
      Button('    自定义弹窗')
        .onClick(() => {
          //打开弹窗
          this.dialogController.open();
        })


    }.width("100%").height("100%").alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)
  }
}

/*
 * Copyright (c) 2021 JianGuo Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

//通过CustomDialogController类显示自定义弹窗。
@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController
  cancel: () => void
  confirm: () => void

  build() {


      Flex({ justifyContent: FlexAlign.Center ,alignItems:ItemAlign.Center,alignContent:FlexAlign.Center}) {
        Button('取消').fontSize(36)
          .onClick(() => {
            //方式二：关闭弹窗
            this.controller.close()
            this.cancel()
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('确定').fontSize(36)
          .onClick(() => {
//            this.controller.close()
            this.confirm()
          }).backgroundColor(0xffffff).fontColor(Color.Red)
      }.margin({ bottom: 10 }).width("100%").height(200)
    }

}
export default  CustomDialogExample

上面就是一个简单的自定义弹窗

接下来看一下它的有关属性

​​CustomDialogController​​​ 定义了 ​​open()​​​ 和 ​​close()​​ 方法，它们说明如下：

• open：打开对话框，如果对话框已经打开，则再次打开无效。
• close：关闭对话框，如果对话框已经关闭，则再次关闭无效。
• value：创建控制器需要的配置参数，

CustomDialogControllerOptions

说明如下：

• builder：创建自定义弹窗的构造器。
• cancel：点击蒙层的事件回调。
• autoCancel：是否允许点击遮障层退出。
• alignment：弹窗在竖直方向上的对齐方式。
• offset：弹窗相对​​alignment​​ 所在位置的偏移量。
• customStyle：弹窗容器样式是否自定义。

源码

declare interface CustomDialogControllerOptions{
  /**
   * Custom builder function.
   * @since
  builder: any;

  /**
   * Defines the cancel function.
   * @since
  cancel?: () => void;

  /**
   * Defines if use auto cancel when click on the outside of the dialog.
   * @since
  autoCancel?: boolean;

  /**
   * Defines the dialog alignment of the screen.
   * @since
  alignment?: DialogAlignment;

  /**
   * Defines the dialog offset.
   * @since
  offset?: Offset;

  /**
   * Defines if use costom style.
   * @since
  customStyle?: boolean;

  /**
   * Grid count of dialog.
   * @since

DialogAlignment的位置

参考文档

自定义弹窗

语法糖