# HarmonyOS next之彈出框（Dialog）簡易使用指南
在 HarmonyOS 應用開發(fā)中，彈出框（Dialog）是一種常用的 UI 組件，用于與用戶進行交互并提供重要信息或獲取用戶的操作確認。以下是彈出框的簡易使用方法：
## 一、導入模塊
在使用彈出框之前，需要導入相應的模塊。通常使用以下語句導入所需的彈出框類型：
```javascript
import { TipsDialog, SelectDialog, ConfirmDialog, AlertDialog, LoadingDialog, CustomContentDialog } from '@kit.ArkUI';
```
## 二、創(chuàng)建彈出框控制器
每種彈出框類型都需要一個對應的控制器來管理其顯示和交互。例如，創(chuàng)建一個`TipsDialog`的控制器：
```javascript
let dialogController = new CustomDialogController({
? ? builder: TipsDialog({
? ? ? ? // 彈出框的具體配置參數(shù)
? ? })
});
```
## 三、配置彈出框參數(shù)
1. 通用參數(shù)
? - `controller`：彈出框控制器，用于控制彈出框的顯示、隱藏等操作。
? - `theme`（可選，從 API version 12 開始支持）：主題信息，可以是自定義主題或從`onWillApplyTheme`中獲取的主題實例。
? - `themeColorMode`（可選，從 API version 12 開始支持）：自定義彈窗深淺色模式。
2. 特定類型彈出框參數(shù)
? - `TipsDialog`
? ? ：
? ? - `imageRes`（必填，從 API version 12 + 支持`ResourceStr`或`PixelMap`）：展示的圖片。
? ? - `imageSize`（可選）：自定義圖片尺寸，默認值為`64*64vp`。
? ? - `title`（可選）：提示彈出框標題。
? ? - `content`（可選）：提示彈出框內(nèi)容。
? ? - `checkTips`（可選）：checkbox 的提示內(nèi)容。
? ? - `isChecked`（可選，默認值為`false`）：checkbox 的初始選中狀態(tài)。
? ? - `checkAction`（可選，從 API version 12 + 推薦使用`onCheckedChange`）：checkbox 選中狀態(tài)改變時的回調(diào)函數(shù)。
? ? - `onCheckedChange`（可選，從 API version 12+）：checkbox 選中狀態(tài)改變事件。
? ? - `primaryButton`（可選）：提示框左側(cè)按鈕的配置。
? ? - `secondaryButton`（可選）：提示框右側(cè)按鈕的配置。
? - `SelectDialog`
? ? ：
? ? - `title`（必填）：選擇彈出框標題。
? ? - `content`（可選）：選擇彈出框內(nèi)容。
? ? - `selectedIndex`（可選，默認值為`-1`）：選擇彈出框的初始選中項。
? ? - `confirm`（可選）：選擇彈出框底部按鈕的配置。
? ? - `radioContent`（必填）：選擇彈出框的子項內(nèi)容列表，每個子項包含文本和選中回調(diào)事件。
? - `ConfirmDialog`
? ? ：
? ? - `title`（必填）：確認彈出框標題。
? ? - `content`（可選）：確認彈出框內(nèi)容。
? ? - `checkTips`（可選）：checkbox 的提示內(nèi)容。
? ? - `isChecked`（可選，默認值為`false`）：checkbox 的初始選中狀態(tài)。
? ? - `onCheckedChange`（可選，從 API version 12+）：checkbox 選中狀態(tài)改變事件。
? ? - `primaryButton`（可選）：確認框左側(cè)按鈕的配置。
? ? - `secondaryButton`（可選）：確認框右側(cè)按鈕的配置。
? - `AlertDialog`
? ? ：
? ? - `primaryTitle`（可選，從 API version 12+）：確認框一級標題。
? ? - `secondaryTitle`（可選，從 API version 12+）：確認框二級標題。
? ? - `content`（必填）：確認彈出框內(nèi)容。
? ? - `primaryButton`（可選）：確認框左側(cè)按鈕的配置。
? ? - `secondaryButton`（可選）：確認框右側(cè)按鈕的配置。
? - `LoadingDialog`
? ? ：
? ? - `content`（可選）：加載彈出框內(nèi)容。
? - `CustomContentDialog`（從 API version 12+）
? ? ：
? ? - `contentBuilder`（必填）：彈出框內(nèi)容的構(gòu)建函數(shù)。
? ? - `primaryTitle`（可選）：彈出框標題。
? ? - `secondaryTitle`（可選）：彈出框輔助文本。
? ? - `contentAreaPadding`（可選）：彈出框內(nèi)容區(qū)內(nèi)邊距。
? ? - `buttons`（可選）：彈出框操作區(qū)按鈕配置數(shù)組，最多支持 4 個按鈕。
## 四、處理按鈕點擊事件
在按鈕的配置中，可以設置`action`屬性來定義按鈕點擊時的回調(diào)函數(shù)。例如：
```javascript
primaryButton: {
? ? value: '取消',
? ? action: () => {
? ? ? ? console.info('取消按鈕被點擊');
? ? }
}
```
## 五、顯示彈出框
通過調(diào)用控制器的`open`方法來顯示彈出框：
```javascript
dialogController.open();
```
通過以上步驟，就可以在 HarmonyOS 應用中使用不同類型的彈出框與用戶進行交互，提供更好的用戶體驗。根據(jù)具體需求選擇合適的彈出框類型，并根據(jù)其參數(shù)進行配置，以滿足各種場景下的信息展示和操作確認需求。
