ArkUI如何自定义弹窗（eTS）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第27天， 点击查看活动详情

自定义弹窗其实也是比较简单的，通过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 7
   */
  builder: any;
​
  /**
   * Defines the cancel function.
   * @since 7
   */
  cancel?: () => void;
​
  /**
   * Defines if use auto cancel when click on the outside of the dialog.
   * @since 7
   */
  autoCancel?: boolean;
​
  /**
   * Defines the dialog alignment of the screen.
   * @since 7
   */
  alignment?: DialogAlignment;
​
  /**
   * Defines the dialog offset.
   * @since 7
   */
  offset?: Offset;
​
  /**
   * Defines if use costom style.
   * @since 7
   */
  customStyle?: boolean;
​
  /**
   * Grid count of dialog.
   * @since 8
   */
  gridCount?: number;
}

DialogAlignment的位置

名称	描述
Top	垂直顶部对齐。
Center	垂直居中对齐。
Bottom	垂直底部对齐。
Default	默认对齐。
TopStart8+	左上对齐。
TopEnd8+	右上对齐。
CenterStart8+	左中对齐。
CenterEnd8+	右中对齐。
BottomStart8+	左下对齐。
BottomEnd8+	右下对齐。

参考文档

自定义弹窗

语法糖