介紹

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

相關(guān)概念

• [AlertDialog]：警告彈窗，可設(shè)置文本內(nèi)容和響應(yīng)回調(diào)。
• [CustomDialogController]：通過CustomDialogController類顯示自定義彈窗。

環(huán)境搭建

軟件要求

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

硬件要求

• 開發(fā)板類型：[潤和RK3568開發(fā)板]。
• OpenHarmony系統(tǒng)：3.2 Release。

環(huán)境搭建

完成本篇Codelab我們首先要完成開發(fā)環(huán)境的搭建，本示例以RK3568開發(fā)板為例，參照以下步驟進(jìn)行：

1. [獲取OpenHarmony系統(tǒng)版本]：標(biāo)準(zhǔn)系統(tǒng)解決方案（二進(jìn)制）。以3.2 Release版本為例：
   
2. 搭建燒錄環(huán)境。
   1. [完成DevEco Device Tool的安裝]
   2. [完成RK3568開發(fā)板的燒錄]
3. 搭建開發(fā)環(huán)境。
   1. 開始前請參考[工具準(zhǔn)備]，完成DevEco Studio的安裝和開發(fā)環(huán)境配置。
   2. 開發(fā)環(huán)境配置完成后，請參考[使用工程向?qū)創(chuàng)建工程（模板選擇“Empty Ability”）。
   3. 工程創(chuàng)建完成后，選擇使用[真機(jī)進(jìn)行調(diào)測]。
   4. 鴻蒙開發(fā)指導(dǎo)文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

代碼結(jié)構(gòu)解讀

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

├──entry/src/main/ets               // 代碼區(qū)
│  ├──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直接拿`

構(gòu)建頁面

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

公共彈窗組件

首先創(chuàng)建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屬性設(shè)置自定義彈窗組件，調(diào)用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)
  }
}```**

審核編輯 黃宇