《HarmonyOS應(yīng)用開發(fā)基礎(chǔ)》 課件知識(shí)點(diǎn)2-13-2 自定義對(duì)話框

自定義對(duì)話框自定義對(duì)話框概述使用@CustomDialog裝飾器用于裝飾自定義彈窗組件，使得彈窗可以動(dòng)態(tài)設(shè)置內(nèi)容及樣式。例如：標(biāo)題、內(nèi)容、對(duì)話框交互按鈕等內(nèi)容和樣式都可自定義。如右圖所示。自定義對(duì)話框控制器//自定義對(duì)話框declare

class

CustomDialogController

{

//自定義對(duì)話框的構(gòu)造方法

constructor(value:

CustomDialogControllerOptions);

open();

//

打開對(duì)話框

close();

//

關(guān)閉對(duì)話框}//自定義對(duì)話框常用參數(shù)的定義declare

interface

CustomDialogControllerOptions

{

builder:

any;

//對(duì)話框內(nèi)部自定義UI的構(gòu)造器

cancel?:

()

=>

void;

//點(diǎn)擊蒙層(對(duì)話框外部)的事件回調(diào)

autoCancel?:

boolean;

//點(diǎn)擊蒙層(對(duì)話框外部)是否自動(dòng)關(guān)閉對(duì)話框

alignment?:

DialogAlignment;

//對(duì)話框在豎直方向上的對(duì)齊方式

...}自定義對(duì)話框控制器參數(shù)與方法說明：自定義對(duì)話框使用自定義對(duì)話框組件第一步：使用裝飾器@CustomDialog裝飾組件。@CustomDialogstruct

DialogExample{}第二步：在自定義對(duì)話框中設(shè)置參數(shù)，可在使用時(shí)傳入對(duì)應(yīng)參數(shù)。@CustomDialogstruct

DialogExample

{

controller:

CustomDialogController

title:

string

=

'自定義對(duì)話框標(biāo)題'

content:

string

=

'對(duì)話框內(nèi)容'

confirm:

()

=>

void

cancel:

()

=>

void}自定義對(duì)話框使用自定義對(duì)話框組件第三步：構(gòu)建自定義對(duì)話框顯示UI。@CustomDialogstruct

DialogExample

{...

build()

{

Column()

{

Row()

{

Text(this.title).fontSize(20).width('100%').textAlign(TextAlign.Center)

}

Row()

{

Text(this.content).fontSize(18)

}.margin({

top:

10,

bottom:

10

})

Row({

space:

5

})

{

Button('取消')

.onClick(()

=>

{

this.controller.close()

this.cancel();

})

.width('50%')

Button('確認(rèn)')

.onClick(()

=>

{

this.controller.close()

this.confirm()

})

.width('50%')

}

}.padding(20)

}}自定義對(duì)話框使用使用自定義對(duì)話框組件第一步：創(chuàng)建自定義對(duì)話框控制器對(duì)象，并選擇傳入自定義對(duì)話框的參數(shù)。@Entry@Componentstruct

CustomDialogUser

{

dialogController:

CustomDialogController

=

new

CustomDialogController({

builder:

DialogExample({

confirm:

this.confirmDialog,

cancel:

this.cancelDialog

}),

cancel:

this.cancelDialog,

autoCancel:

true//true表示點(diǎn)擊對(duì)話框外會(huì)自動(dòng)關(guān)閉對(duì)話框

});confirmDialog(){('Confirmdialog!');}cancelDialog(){('Canceldialog!');}}自定義對(duì)話框使用使用自定義對(duì)話框組件第二步：打開對(duì)話框。@Entry@Componentstruct

CustomDialogUser

{...

build()

{

Column()

{

Button(