《HarmonyOS應用開發(fā)基礎》 課件知識點2-13-2 自定義對話框

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

class

CustomDialogController

{

//自定義對話框的構造方法

constructor(value:

CustomDialogControllerOptions);

open();

//

打開對話框

close();

//

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

interface

CustomDialogControllerOptions

{

builder:

any;

//對話框內(nèi)部自定義UI的構造器

cancel?:

()

=>

void;

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

autoCancel?:

boolean;

//點擊蒙層(對話框外部)是否自動關閉對話框

alignment?:

DialogAlignment;

//對話框在豎直方向上的對齊方式

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

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

DialogExample

{

controller:

CustomDialogController

title:

string

=

'自定義對話框標題'

content:

string

=

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

confirm:

()

=>

void

cancel:

()

=>

void}自定義對話框使用自定義對話框組件第三步：構建自定義對話框顯示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('確認')

.onClick(()

=>

{

this.controller.close()

this.confirm()

})

.width('50%')

}

}.padding(20)

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

CustomDialogUser

{

dialogController:

CustomDialogController

=

new

CustomDialogController({

builder:

DialogExample({

confirm:

this.confirmDialog,

cancel:

this.cancelDialog

}),

cancel:

this.cancelDialog,

autoCancel:

true//true表示點擊對話框外會自動關閉對話框

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

CustomDialogUser

{...

build()

{

Column()

{

Button(