介紹

基于ArkTS的聲明式開發范式實現了三種不同的彈窗，第一種直接使用公共組件，后兩種使用CustomDialogController實現自定義彈窗，效果如圖所示：

相關概念

• [AlertDialog]：警告彈窗，可設置文本內容和響應回調。
• [CustomDialogController]：通過CustomDialogController類顯示自定義彈窗。

環境搭建

軟件要求

• [DevEco Studio]版本：DevEco Studio 3.1 Release。
• OpenHarmony SDK版本：API version 9。

硬件要求

• 開發板類型：[潤和RK3568開發板]。
• OpenHarmony系統：3.2 Release。

環境搭建

完成本篇Codelab我們首先要完成開發環境的搭建，本示例以RK3568開發板為例，參照以下步驟進行：

1. [獲取OpenHarmony系統版本]：標準系統解決方案（二進制）。以3.2 Release版本為例：
   
2. 搭建燒錄環境。
   1. [完成DevEco Device Tool的安裝]
   2. [完成RK3568開發板的燒錄]
3. 搭建開發環境。
   1. 開始前請參考[工具準備]，完成DevEco Studio的安裝和開發環境配置。
   2. 開發環境配置完成后，請參考[使用工程向導]創建工程（模板選擇“Empty Ability”）。
   3. 工程創建完成后，選擇使用[真機進行調測]。
   4. 鴻蒙開發指導文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

代碼結構解讀

本篇Codelab只對核心代碼進行講解，對于完整代碼，我們會在gitee中提供。

├──entry/src/main/ets               // 代碼區
│  ├──common
│  │  └──constants
│  │     └──StyleConstants.ets      // 抽離樣式
│  │  └──utils
│  │     └──Logger.ets              // 日志工具類
│  ├──entryability
│  │  └──EntryAbility.ts            // 程序入口類
│  ├──pages
│  │  └──DialogPage.ets	            // 主界面	
│  └──view
│     ├──CustomAlertDialog.ets      // 自定義彈窗組件
│     └──ConfirmDialog.ets          // 自定義彈窗組件
└──entry/src/main/resources         // 資源文件目錄

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

構建頁面

界面主要包括自定義彈窗以及公共組件警告彈窗兩部分，效果如圖所示：

公共彈窗組件

首先創建DialogPage.ets作為主界面，公共彈窗組件直接使用AlertDialog的show方法拉起，效果如圖所示：

// DialogPage.ets
@Entry
@Component
struct DialogPage {
  ...
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button($r('app.string.one_button_dialog'))
        .onClick(() = > {
          AlertDialog.show(
            {
              message: $r('app.string.dialog_message'),
              offset: { dx: $r('app.float.dialog_offset_x'), dy: $r('app.float.dialog_offset_y') },
              alignment: DialogAlignment.Bottom,
              confirm: {
                value: $r('app.string.confirm_txt'),
                action: () = > {
                  Logger.info('Button clicking callback');
                }
              },
              cancel: () = > {
                Logger.info('Closed callbacks');
              }
            }
          );
        })
        .height(StyleConstants.BUTTON_HEIGHT)
        .width(StyleConstants.BUTTON_WIDTH)
      ...
  }
}

自定義彈窗

通過CustomDialogController的builder屬性設置自定義彈窗組件，調用open方法拉起彈窗，效果如圖所示：

// DialogPage.ets
@Entry
@Component
struct DialogPage {
  dialogControllerExample: CustomDialogController = new CustomDialogController({
    builder: ConfirmDialog({ cancel: this.onCancel, confirm: this.onAccept }),
    cancel: this.existApp,
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    customStyle: true,
    offset: { dx: $r('app.float.dialog_offset_x'), dy: $r('app.float.dialog_offset_y') }
  });
  dialogControllerAlert: CustomDialogController = new CustomDialogController({
    builder: CustomAlertDialog({ cancel: this.onCancel, confirm: this.onAccept }),
    cancel: this.existApp,
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    customStyle: true,
    offset: { dx: $r('app.float.dialog_offset_x'), dy: $r('app.float.dialog_offset_y') }
  });
  ...
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      ...
      Button($r('app.string.two_button_dialog'))
        .onClick(() = > {
          this.dialogControllerAlert.open();
        })
        .margin({ top: $r('app.float.button_margin_top') })
        .height(StyleConstants.BUTTON_HEIGHT)
        .width(StyleConstants.BUTTON_WIDTH)
      Button($r('app.string.customization_dialog'))
        .onClick(() = > {
          this.dialogControllerExample.open();
        })
        .margin({ top: $r('app.float.button_margin_top') })
        .height(StyleConstants.BUTTON_HEIGHT)
        .width(StyleConstants.BUTTON_WIDTH)
    }
    .width(StyleConstants.FULL_PERCENT)
    .height(StyleConstants.FULL_PERCENT)
  }
}```**

審核編輯 黃宇