开源一夏｜ArkUI 如何自定义弹窗（eTS）

作者：坚果

2022 年 8 月 04 日
本文字数：1874 字
阅读完需：约 6 分钟

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

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

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

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

import CustomDialogExample from './customdialog'
@Entry@Componentstruct 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类显示自定义弹窗。@CustomDialogstruct 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;}