自定義彈窗其實也是比較簡單的，通過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+	右下對齊。

參考文檔

自定義彈窗

語法糖