HarmonyOS開(kāi)發(fā)案例：【多種樣式彈窗】

介紹

如何使用彈窗功能，實(shí)現(xiàn)四種類(lèi)型彈窗。分別是：警告彈窗、自定義彈窗、日期滑動(dòng)選擇器彈窗、文本滑動(dòng)選擇器彈窗。需要完成以下功能：

1. 點(diǎn)擊左上角返回按鈕展示警告彈窗。
2. 點(diǎn)擊出生日期展示日期滑動(dòng)選擇器彈窗。
3. 點(diǎn)擊性別展示文本滑動(dòng)選擇器彈窗。
4. 點(diǎn)擊興趣愛(ài)好（多選）展示自定義彈窗。

相關(guān)概念

• [警告彈窗]：顯示警告彈窗組件，可設(shè)置文本內(nèi)容與響應(yīng)回調(diào)。
• [自定義彈窗]： 通過(guò)CustomDialogController類(lèi)顯示自定義彈窗。
• [日期滑動(dòng)選擇器彈窗]：根據(jù)指定范圍的Date創(chuàng)建可以選擇日期的滑動(dòng)選擇器，展示在彈窗上。
• [文本滑動(dòng)選擇器彈窗]：根據(jù)指定的選擇范圍創(chuàng)建文本選擇器，展示在彈窗上。

環(huán)境搭建

軟件要求

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

硬件要求

• 開(kāi)發(fā)板類(lèi)型：[潤(rùn)和RK3568開(kāi)發(fā)板]。
• OpenHarmony系統(tǒng)：3.2 Release。

環(huán)境搭建

完成本篇Codelab我們首先要完成開(kāi)發(fā)環(huán)境的搭建，本示例以RK3568開(kāi)發(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開(kāi)發(fā)板的燒錄](méi)
3. 搭建開(kāi)發(fā)環(huán)境。
   1. 開(kāi)始前請(qǐng)參考[工具準(zhǔn)備]，完成DevEco Studio的安裝和開(kāi)發(fā)環(huán)境配置。
   2. 開(kāi)發(fā)環(huán)境配置完成后，請(qǐng)參考[使用工程向?qū)創(chuàng)建工程（模板選擇“Empty Ability”）。
   3. 工程創(chuàng)建完成后，選擇使用[真機(jī)進(jìn)行調(diào)測(cè)]。
   4. 鴻蒙開(kāi)發(fā)指導(dǎo)文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

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

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

├──entry/src/main/ets             // 代碼區(qū) 
│  ├──common
│  │  ├──constants
│  │  │  └──CommonConstants.ets   // 常量類(lèi)
│  │  └──utils
│  │     ├──CommonUtils.ets       // 彈窗操作工具類(lèi)
│  │     └──Logger.ets            // 日志打印工具類(lèi)
│  ├──entryability
│  │  └──EntryAbility.ets         // 程序入口類(lèi)
│  ├──pages
│  │  └──HomePage.ets             // 主頁(yè)面
│  ├──view
│  │  ├──CustomDialogWidget.ets   // 自定義彈窗組件
│  │  ├──TextCommonWidget.ets     // 自定義Text組件
│  │  └──TextInputWidget.ets      // 自定義TextInput組件
│  └──viewmodel
│     └──HobbyModel.ets           // 興趣愛(ài)好model類(lèi)
└──entry/src/main/resources       // 資源文件目錄

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

構(gòu)建主頁(yè)面

應(yīng)用主頁(yè)面采用Column容器嵌套自定義組件形式完成頁(yè)面整體布局，效果如圖所示：

從上面效果圖可以看出，主界面由2個(gè)相同樣式的文本輸入框和3個(gè)相同樣式的文本布局組成。我們可以將文本輸入框抽取成TextInputWidget子組件。再將文本布局抽取成TextCommonWidget子組件。

1. 在ets目錄下，點(diǎn)擊鼠標(biāo)右鍵 > New > Directory，新建名為view的自定義子組件目錄。然后在view目錄下，點(diǎn)擊鼠標(biāo)右鍵 > New > ArkTS File，新建兩個(gè)ArkTS文件，分別為T(mén)extInputWidget子組件、TextCommonWidget子組件。
2. 文本輸入框抽取成TextInputWidget子組件，效果如圖所示：
   

   // TextInputWidget.ets
   @Component
   export default struct TextInputWidget {
     // 文本框左側(cè)圖片
     private inputImage?: Resource; 
     // 文本框提示
     private hintText?: Resource;
   
     build() {
       Row() {
         Image(this.inputImage)
           ...
         TextInput({ placeholder: this.hintText })
           ...
       }
       ...
     }
   }
   

3. 文本布局抽取成TextCommonWidget子組件，效果如圖所示：
   

   // TextCommonWidget.ets
   @Component
   export default struct TextCommonWidget {
     // 顯示內(nèi)容
     @Link content: string;
     // 文字標(biāo)題左側(cè)圖片
     private textImage?: Resource;
     // 文本標(biāo)題
     private title?: Resource;
     // 點(diǎn)擊事件回調(diào)
     onItemClick: () = > void = () = > {};
   
     build() {
       Row() {
         Image(this.textImage)
           ...
         Text(this.title)
           ...
         Text(this.content)
           ...
         Image($r('app.media.ic_arrow'))
           ....
       }
       .onClick(this.onItemClick)
       ...
     } 
   }
   

4. 在HomePage主界面引用TextInputWidget和TextCommonWidget子組件，然后初始化出生日期、性別、興趣愛(ài)好默認(rèn)數(shù)據(jù)。

   // HomePage.ets
   @Entry
   @Component
   struct HomePage {
     @State birthdate: string = '';
     @State sex: string = '';
     @State hobbies: string = '';
   
     build() {
       Column() {
         ...
         TextInputWeight({
           inputImage: $r("app.media.ic_nickname"),
           hintText: $r("app.string.text_input_hint")
         })
         TextCommonWeight({
           textImage: $r("app.media.ic_birthdate"),
           title: $r("app.string.title_birthdate"),
           content: $birthdate,
           onItemClick: () = > {
             CommonUtils.datePickerDialog((birthValue: string) = > {
               this.birthdate = birthValue;
             });
           }
         }) 
         TextCommonWeight({
           textImage: $r("app.media.ic_sex"),
           title: $r("app.string.title_sex"),
           content: $sex,
           onItemClick: () = > {
             CommonUtils.textPickerDialog(this.sexArray, (sexValue: string) = > {
               this.sex = sexValue;
             });
           }
         })
         TextInputWeight({
           inputImage: $r("app.media.ic_signature"),
           hintText: $r("app.string.text_input_signature")
         })
         TextCommonWeight({
           textImage: $r("app.media.ic_hobbies"),
           title: $r("app.string.title_hobbies"),
           content: $hobbies,
           onItemClick: () = > {
             this.customDialogController.open();
           }
         })
       }
       ...
     }
   }
   

警告彈窗

點(diǎn)擊主頁(yè)面左上角返回按鈕，通過(guò)CommonUtils.alertDialog方法彈出警告彈窗，提醒用戶(hù)是否進(jìn)行當(dāng)前操作，效果如圖所示：

// CommonUtils.ets
alertDialog(context: Context.UIAbilityContext) {
  AlertDialog.show({
    // 提示信息
    message: $r('app.string.alert_dialog_message'), 
    // 彈窗顯示位置
    alignment: DialogAlignment.Bottom,
    // 彈窗偏移位置
    offset: {
      dx: 0,
      dy: CommonConstants.DY_OFFSET
    },
    primaryButton: {
      ...
    },
    secondaryButton: {
      // 退出應(yīng)用
      context.terminateSelf();
      ...
    }
  });
}

日期滑動(dòng)選擇器彈窗

點(diǎn)擊出生日期選項(xiàng)，通過(guò)CommonUtils.datePickerDialog方法彈出日期選擇器彈窗，根據(jù)需要選擇相應(yīng)時(shí)間，效果如圖所示：

// CommonUtils.ets
datePickerDialog(dateCallback) {
  DatePickerDialog.show({
    // 開(kāi)始時(shí)間
    start: new Date(CommonConstants.START_TIME),
    // 結(jié)束時(shí)間
    end: new Date(CommonConstants.END_TIME), 
    // 當(dāng)前選中時(shí)間
    selected: new Date(),
    // 是否顯示農(nóng)歷
    lunar: false,
    onAccept: (value: DatePickerResult) = > {
      let year = value.year as number;
      let month = value.month as number + CommonConstants.PLUS_ONE;
      let day = value.day as number;
      let birthdate: string = this.getBirthDateValue(year, month, day);
      dateCallback(birthdate);
    }
  });
}

// 獲取出生日期值
getBirthDateValue(year: number, month: number, day: number): string {
  let birthdate: string = `${year}${CommonConstants.DATE_YEAR}${month}` +
    `${CommonConstants.DATE_MONTH}${day}${CommonConstants.DATE_DAY}`;
  return birthdate;
}  

// HomePage.ets
build() {
  Column() {
    ...
    TextCommonWeight({
      textImage: $r('app.media.ic_birthdate'),
      title: $r("app.string.title_birthdate"),
      content: $birthdate,
      onItemClick: () = > {
        CommonUtils.datePickerDialog((birthValue: string) = > {
          this.birthdate = birthValue;
        });
      }
    })
    ...
  }
  ...
}

文本滑動(dòng)選擇器彈窗

點(diǎn)擊性別選項(xiàng)，通過(guò)CommonUtils.textPickerDialog方法彈出性別選擇器彈窗，根據(jù)需要選擇相應(yīng)性別，效果如圖所示：

// CommonUtils.ets
textPickerDialog(sexArray: Resource, sexCallback: (sexValue: string) = > void) {
  TextPickerDialog.show({
    range: sexArray,
    selected: 0,
    onAccept: (result: TextPickerResult) = > {
      sexCallback(result.value);
    },
    onCancel: () = > {
      ...
    }
  });
}

// HomePage.ets
build() {
  Column() {
    ...
    TextCommonWeight({
      textImage: $r('app.media.ic_sex'),
      title: $r("app.string.title_sex"),
      content: $sex,
      onItemClick: () = > {
        CommonUtils.textPickerDialog(this.sexArray, (sexValue: string) = > {
          this.sex= sexValue;
        });
      }
    })
    ...
  }
  ...
}

自定義彈窗

點(diǎn)擊興趣愛(ài)好選項(xiàng)，通過(guò)customDialogController.open方法彈出自定義彈窗，根據(jù)需要選擇相應(yīng)的興趣愛(ài)好，效果如圖所示：

自定義彈窗實(shí)現(xiàn)分為以下步驟：

1. 在view目錄下，點(diǎn)擊鼠標(biāo)右鍵 > New > ArkTS File，新建一個(gè)ArkTS文件，然后命名為CustomDialogWeight子組件。
2. 在CustomDialogWeight的aboutToAppear方法，通過(guò)manager.getStringArrayValue方法獲取本地資源數(shù)據(jù)進(jìn)行初始化。

   // CustomDialogWeight.ets
   @State hobbyModels: HobbyModel[] = [];
   
   aboutToAppear() {
     let context: Context = getContext(this);
     if (CommonUtils.isEmpty(context) || CommonUtils.isEmpty(context.resourceManager)) {
       Logger.error(CommonConstants.TAG_CUSTOM, 'context or resourceManager is null');
       return;
     }
     let manager = context.resourceManager;
     manager.getStringArrayValue($r("app.strarray.hobbies_data").id, (error, hobbyArray) = > {
       if (!CommonUtils.isEmpty(error)) {
         Logger.error(CommonConstants.TAG_CUSTOM, 'error = ' + JSON.stringify(error));
       } else {
         hobbyArray.forEach((hobbyItem: string) = > {
           let hobbyModel = new HobbyModel();
           hobbyModel.label = hobbyItem;
           hobbyModel.isChecked = false;
           this.hobbyModels.push(hobbyModel);
         });
       }
     });
   }
   

3. 當(dāng)用戶(hù)點(diǎn)擊確定按鈕時(shí)，通過(guò)setHobbiesValue方法處理自定義彈窗選項(xiàng)結(jié)果。

   // CustomDialogWeight.ets
   @State hobbyModels: HobbyModel[] = [];
   @Link hobbies: string;
   
   // 處理自定義彈窗選項(xiàng)結(jié)果
   setHobbiesValue(hobbyModels: HobbyModel[]) {
     if (CommonUtils.isEmptyArr(hobbyModels)) {
       Logger.error(CommonConstants.TAG_CUSTOM, 'hobbyModels length is 0');
       return;
     }
     let hobbiesText: string = '';
     hobbiesText = hobbyModels.filter((isCheckItem: HobbyModel) = > isCheckItem?.isChecked)
       .map((checkedItem: HobbyModel) = > {
         return checkedItem.label;
       })
       .join(CommonConstants.COMMA);
     if (hobbiesText.length > 0) {
       this.hobbies = hobbiesText;
     }
   }
   
   build() {
     Column() {
       ...
       Row() {
         Button($r('app.string.cancel_button'))
           .dialogButtonStyle()
           .onClick(() = > {
             this.controller.close();
           })
         Blank()
           ...
         Button($r('app.string.definite_button'))
           .dialogButtonStyle()
           .onClick(() = > {
             this.setHobbiesValue(this.hobbyModels);
             this.controller.close();
           })
       }
     }
     ...
   }
   
   @Extend(Button) function dialogButtonStyle() {
     ....
   }
   

4. 通過(guò)@Link修飾的hobbies把值賦給HomePage的hobbies，然后hobbies刷新顯示內(nèi)容。

   // HomePage.ets
   @State hobbies: string = '';
   customDialogController: CustomDialogController = new CustomDialogController({
     builder: CustomDialogComponent({
       hobbies: $hobbies
     }),
     alignment: DialogAlignment.Bottom,
     customStyle: true,
     offset: {
       dx: 0,
       dy: CommonConstants.DY_OFFSET
     }
   });
   
   build() {
     Column() {
       ...
       TextCommonWeight({
         textImage: $r('app.media.ic_hobbies'),
         title: $r("app.string.title_hobbies"),
         content: $hobbies,
         onItemClick: () = > {
           // 打開(kāi)自定義彈窗
           this.customDialogController.open();
         }
       })
     }
     ...
   }
   

審核編輯 黃宇