學習筆記（二十八）：ArkUi-自定義彈窗 (CustomDialog)

听着music睡發表於2024-11-06
筆記UI

概述：

CustomDialog是自定義彈窗，可用於廣告、中獎、警告、軟體更新等與使用者互動響應操作。開發者可以透過CustomDialogController類顯示自定義彈窗

一、建立自定義彈框

1、使用@CustomDialog裝飾器裝飾自定義彈窗，可在此裝飾器內自定義彈窗內容

// 自定義彈框內容
@CustomDialog
struct MyCustomerDialog{
  controller: CustomDialogController = new CustomDialogController({
    builder: MyCustomerDialog({})
  })
  build(){
    Text('這是內容')
      .height(40)
  }
}

2、建立構造器，與裝飾器呼應相連，並實現onClick事件繫結的元件使彈窗彈出

@Entry
@Component
struct CustomerDIalogExample {
  controller: CustomDialogController = new CustomDialogController({
    builder: MyCustomerDialog()
  })
  build() {
    Row() {
      Column() {
        Button('顯示彈框')
          .onClick(()=>{
              this.controller.open()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

學習筆記（二十八）：ArkUi-自定義彈窗 (CustomDialog) 
 1 // 自定義彈框使用示例
 2 @Entry
 3 @Component
 4 struct CustomerDIalogExample {
 5   controller: CustomDialogController = new CustomDialogController({
 6     builder: MyCustomerDialog()
 7   })
 8   build() {
 9     Row() {
10       Column() {
11         Button('顯示彈框')
12           .onClick(()=>{
13               this.controller.open()
14           })
15       }
16       .width('100%')
17     }
18     .height('100%')
19   }
20 }
21 
22 // 自定義彈框內容
23 @CustomDialog
24 struct MyCustomerDialog{
25   controller: CustomDialogController = new CustomDialogController({
26     builder: MyCustomerDialog({})
27   })
28   build(){
29     Text('這是內容')
30       .height(40)
31   }
32 }
完整程式碼

二、彈窗資料互動

1、在@CustomDialog裝飾器內新增按鈕，同時新增資料函式

// 自定義彈框內容
@CustomDialog
struct MyCustomerDialog {
  @State title:string = "提示"  // 標題
  @State message:string = "";   // 提示內容
  cancel?:()=>void   // 取消事件
  confirm?:()=>void   // 確定事件
  controller: CustomDialogController = new CustomDialogController({
    builder: MyCustomerDialog({})
  })

  build() {
    Column() {
      Text(this.title)
        .width('100%')
        .height(40)
        .textAlign(TextAlign.Center)
        .fontColor(Color.White)
        .backgroundColor($r('app.color.dialog_title_bg'))
      Text(this.message)
        .height(70)
        .width('100%')
        .textAlign(TextAlign.Center)
      Row() {
        Button('取消')
          .layoutWeight(1)
          .backgroundColor(Color.White)
          .fontColor(Color.Black)
          .type(ButtonType.Normal)
          .height(40)
          .onClick(()=>this.cancel())
        Button('確定')
          .layoutWeight(1)
          .type(ButtonType.Normal)
          .backgroundColor($r('app.color.main_color'))
          .fontColor(Color.White)
          .height(40)
          .onClick(()=>this.confirm())
      }
      .width('100%')
    }
  }
}

2、頁面內需要在構造器內進行接收，同時建立相應的函式操作

// 自定義彈框使用示例
@Entry
@Component
struct CustomerDIalogExample {
  controller: CustomDialogController = new CustomDialogController({
    builder: MyCustomerDialog({
      title:'警告',
      message: '是否退出',
      cancel:()=>{
        this.cancelEvent()
      },
      confirm:()=>{
        this.confirmEvent()
      }
    })
  })

  cancelEvent(){
    console.log('點選了取消')
  }
  confirmEvent(){
    console.log('點選了確定')
  }

  build() {
    Row() {
      Column() {
        Button('顯示彈框')
          .onClick(() => {
            this.controller.open()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

學習筆記（二十八）：ArkUi-自定義彈窗 (CustomDialog) 
 1 // 自定義彈框使用示例
 2 @Entry
 3 @Component
 4 struct CustomerDIalogExample {
 5   controller: CustomDialogController = new CustomDialogController({
 6     builder: MyCustomerDialog({
 7       title:'警告',
 8       message: '是否退出',
 9       cancel:()=>{
10         this.cancelEvent()
11       },
12       confirm:()=>{
13         this.confirmEvent()
14       }
15     })
16   })
17 
18   cancelEvent(){
19     console.log('點選了取消')
20   }
21   confirmEvent(){
22     console.log('點選了確定')
23   }
24 
25   build() {
26     Row() {
27       Column() {
28         Button('顯示彈框')
29           .onClick(() => {
30             this.controller.open()
31           })
32       }
33       .width('100%')
34     }
35     .height('100%')
36   }
37 }
38 
39 // 自定義彈框內容
40 @CustomDialog
41 struct MyCustomerDialog {
42   @State title:string = "提示"  // 標題
43   @State message:string = "";   // 提示內容
44   cancel?:()=>void   // 取消事件
45   confirm?:()=>void   // 確定事件
46   controller: CustomDialogController = new CustomDialogController({
47     builder: MyCustomerDialog({})
48   })
49 
50   build() {
51     Column() {
52       Text(this.title)
53         .width('100%')
54         .height(40)
55         .textAlign(TextAlign.Center)
56         .fontColor(Color.White)
57         .backgroundColor($r('app.color.dialog_title_bg'))
58       Text(this.message)
59         .height(70)
60         .width('100%')
61         .textAlign(TextAlign.Center)
62       Row() {
63         Button('取消')
64           .layoutWeight(1)
65           .backgroundColor(Color.White)
66           .fontColor(Color.Black)
67           .type(ButtonType.Normal)
68           .height(40)
69           .onClick(()=>this.cancel())
70         Button('確定')
71           .layoutWeight(1)
72           .type(ButtonType.Normal)
73           .backgroundColor($r('app.color.main_color'))
74           .fontColor(Color.White)
75           .height(40)
76           .onClick(()=>this.confirm())
77       }
78       .width('100%')
79     }
80   }
81 }
完整程式碼

相關文章