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 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+	右下对齐。

参考文档

自定义弹窗

语法糖

审核编辑：汤梓红