HarmonyOS開(kāi)發(fā)案例：【生活健康app之首頁(yè)啟動(dòng)】（1）

介紹

如何實(shí)現一個(gè)簡(jiǎn)單的健康生活應用，主要功能包括：

1. 用戶(hù)可以創(chuàng )建最多6個(gè)健康生活任務(wù)（早起，喝水，吃蘋(píng)果，每日微笑，刷牙，早睡），并設置任務(wù)目標、是否開(kāi)啟提醒、提醒時(shí)間、每周任務(wù)頻率。
2. 用戶(hù)可以在主頁(yè)面對設置的健康生活任務(wù)進(jìn)行打卡，其中早起、每日微笑、刷牙和早睡只需打卡一次即可完成任務(wù)，喝水、吃蘋(píng)果需要根據任務(wù)目標量多次打卡完成。
3. 主頁(yè)可顯示當天的健康生活任務(wù)完成進(jìn)度，當天所有任務(wù)都打卡完成后，進(jìn)度為100%，并且用戶(hù)的連續打卡天數加一。
4. 當用戶(hù)連續打卡天數達到3、7、30、50、73、99天時(shí)，可以獲得相應的成就。成就在獲得時(shí)會(huì )以動(dòng)畫(huà)形式彈出，并可以在“成就”頁(yè)面查看。
5. 用戶(hù)可以查看以前的健康生活任務(wù)完成情況。

本應用的運行效果如下圖所示：

相關(guān)概念

• [@Observed 和 @ObjectLink]：@Observed適用于類(lèi)，表示類(lèi)中的數據變化由UI頁(yè)面管理；@ObjectLink應用于被@Observed裝飾類(lèi)的對象。
• [@Consume 和 @Provide]：@Provide作為數據提供者，可以更新子節點(diǎn)的數據，觸發(fā)頁(yè)面渲染。@Consume檢測到@Provide數據更新后，會(huì )發(fā)起當前視圖的重新渲染。
• [Flex]：一個(gè)功能強大的容器組件，支持橫向布局，豎向布局，子組件均分和流式換行布局。
• [List]：List是很常用的滾動(dòng)類(lèi)容器組件之一，它按照水平或者豎直方向線(xiàn)性排列子組件， List的子組件必須是ListItem，它的寬度默認充滿(mǎn)List的寬度。
• [TimePicker]：TimePicker是選擇時(shí)間的滑動(dòng)選擇器組件，默認以00:00至23:59的時(shí)間區創(chuàng )建滑動(dòng)選擇器。
• [Toggle]：組件提供勾選框樣式、狀態(tài)按鈕樣式及開(kāi)關(guān)樣式。
• [后臺代理提醒]：使用后臺代理提醒能力后，應用可以被凍結或退出，計時(shí)和彈出提醒的功能將被后臺系統服務(wù)代理。
• [關(guān)系型數據庫（Relational Database，RDB）]：一種基于關(guān)系模型來(lái)管理數據的數據庫。

環(huán)境搭建

軟件要求

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

硬件要求

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

環(huán)境搭建

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

1. [獲取OpenHarmony系統版本]：標準系統解決方案（二進(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)始前請參考[工具準備]，完成DevEco Studio的安裝和開(kāi)發(fā)環(huán)境配置。
   2. 開(kāi)發(fā)環(huán)境配置完成后，請參考[使用工程向導]創(chuàng )建工程（模板選擇“Empty Ability”），選擇JS或者eTS語(yǔ)言開(kāi)發(fā)。
   3. 工程創(chuàng )建完成后，選擇使用[真機進(jìn)行調測]。
   4. 開(kāi)發(fā)前請熟悉鴻蒙開(kāi)發(fā)指導文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

代碼結構解讀

本篇Codelab只對核心代碼進(jìn)行講解，完整代碼可以直接從gitee獲取。

├─entry/src/main/ets                 // 代碼區
│  ├─common
│  │  ├─constants
│  │  │  └─CommonConstants.ets       // 公共常量
│  │  ├─database
│  │  │  ├─rdb                       // 數據庫
│  │  │  │  ├─RdbHelper.ets
│  │  │  │  ├─RdbHelperImp.ets
│  │  │  │  ├─RdbUtil.ets
│  │  │  │  └─TableHelper.ets
│  │  │  └─tables                    // 數據庫接口
│  │  │     ├─DayInfoApi.ets
│  │  │     ├─GlobalInfoApi.ets
│  │  │     └─TaskInfoApi.ets
│  │  └─utils
│  │     ├─BroadCast.ets             // 通知
│  │     ├─GlobalContext.ets         // 全局上下文
│  │     ├─HealthDataSrcMgr.ets      // 數據管理單例
│  │     ├─Logger.ets                // 日志類(lèi)
│  │     └─Utils.ets                 // 工具類(lèi)
│  ├─entryability
│  │  └─EntryAbility.ets             // 程序入口類(lèi)
│  ├─model                           // model
│  │  ├─AchieveModel.ets
│  │  ├─DatabaseModel.ets            // 數據庫model
│  │  ├─Mine.ets
│  │  ├─NavItemModel.ets             // 菜單欄model
│  │  ├─RdbColumnModel.ets           // 數據庫表數據
│  │  ├─TaskInitList.ets
│  │  └─WeekCalendarModel.ets        // 日歷model
│  ├─pages
│  │  ├─AdvertisingPage.ets          // 廣告頁(yè)
│  │  ├─MainPage.ets                 // 應用主頁(yè)面
│  │  ├─MinePage.ets                 // 我的頁(yè)面
│  │  ├─SplashPage.ets               // 啟動(dòng)頁(yè)
│  │  ├─TaskEditPage.ets             // 任務(wù)編輯頁(yè)面
│  │  └─TaskListPage.ets             // 任務(wù)列表頁(yè)面
│  ├─service
│  │  └─ReminderAgent.ets            // 后臺提醒
│  ├─view
│  │  ├─dialog                       // 彈窗組件
│  │  │  ├─AchievementDialog.ets     // 成就彈窗
│  │  │  ├─CustomDialogView.ets      // 自定義彈窗
│  │  │  ├─TaskDetailDialog.ets      // 打卡彈窗
│  │  │  ├─TaskDialogView.ets        // 任務(wù)對話(huà)框
│  │  │  ├─TaskSettingDialog.ets     // 任務(wù)編輯相關(guān)彈窗
│  │  │  └─UserPrivacyDialog.ets
│  │  ├─home                         // 主頁(yè)面相關(guān)組件
│  │  │  ├─AddBtnComponent.ets       // 添加任務(wù)按鈕組件
│  │  │  ├─HomeTopComponent.ets      // 首頁(yè)頂部組件
│  │  │  ├─TaskCardComponent.ets     // 任務(wù)item組件件
│  │  │  └─WeekCalendarComponent.ets // 日歷組件
│  │  ├─task                         // 任務(wù)相關(guān)組件
│  │  │  ├─TaskDetailComponent.ets   // 任務(wù)編輯詳情組件
│  │  │  ├─TaskEditListItem.ets      // 任務(wù)編輯行內容
│  │  │  └─TaskListComponent.ets     // 任務(wù)列表組件
│  │  ├─AchievementComponent.ets     // 成就頁(yè)面
│  │  ├─BadgeCardComponent.ets       // 勛章卡片組件
│  │  ├─BadgePanelComponent.ets      // 勛章面板組件
│  │  ├─HealthTextComponent.ets      // 自定義text組件
│  │  ├─HomeComponent.ets            // 首頁(yè)頁(yè)面
│  │  ├─ListInfo.ets                 // 用戶(hù)信息列表
│  │  ├─TitleBarComponent.ets        // 成就標題組件
│  │  └─UserBaseInfo.ets             // 用戶(hù)基本信息
│  └─viewmodel                       // viewmodel
│     ├─AchievementInfo.ets          // 成就信息
│     ├─AchievementMapInfo.ets       // 成就map信息
│     ├─AchievementViewModel.ets     // 成就相關(guān)模塊
│     ├─BroadCastCallBackInfo.ets    // 通知回調信息
│     ├─CalendarViewModel.ets        // 日歷相關(guān)模塊
│     ├─CardInfo.ets                 // 成就卡片信息
│     ├─ColumnInfo.ets               // 數據庫表結構
│     ├─CommonConstantsInfo.ets      // 公共常量信息
│     ├─DayInfo.ets                  // 每日信息
│     ├─GlobalInfo.ets               // 全局信息
│     ├─HomeViewModel.ets            // 首頁(yè)相關(guān)模塊
│     ├─PublishReminderInfo.ets      // 發(fā)布提醒信息
│     ├─ReminderInfo.ets             // 提醒信息
│     ├─TaskInfo.ets                 // 任務(wù)信息
│     ├─TaskViewModel.ets            // 任務(wù)設置相關(guān)模塊
│     ├─WeekCalendarInfo.ets         // 日歷信息
│     └─WeekCalendarMethodInfo.ets   // 日歷方法信息
└─entry/src/main/resources           // 資源文件夾

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

應用架構分析

本應用的基本架構如下圖所示，數據庫為其他服務(wù)提供基礎的用戶(hù)數據，主要業(yè)務(wù)包括：用戶(hù)可以查看和編輯自己的健康任務(wù)并進(jìn)行打卡、查看成就。UI層提供了承載上述業(yè)務(wù)的UI界面。

應用主頁(yè)面

本節將介紹如何給應用添加一個(gè)啟動(dòng)頁(yè)，設計應用的主界面，以及首頁(yè)的界面開(kāi)發(fā)和數據展示。

啟動(dòng)頁(yè)

首先我們需要給應用添加一個(gè)啟動(dòng)頁(yè)，啟動(dòng)頁(yè)里我們需要用到一個(gè)定時(shí)器來(lái)實(shí)現啟動(dòng)頁(yè)展示固定時(shí)間后跳轉應用主頁(yè)的功能，效果圖如下：

打開(kāi)應用時(shí)會(huì )進(jìn)入此頁(yè)面，具體實(shí)現邏輯是：

通過(guò)修改/entry/src/main/ets/entryability里的loadContent路徑可以改變應用的入口文件，我們需要把入口文件改為我們寫(xiě)的SplashPage啟動(dòng)頁(yè)面。

// EntryAbility.ets
windowStage.loadContent('pages/SplashPage', (err, data) = > {    
  if (err.code) {...}    
  Logger.info('windowStage','Succeeded in loading the content. Data: ' + JSON.stringify(data));
});

在SplashPage啟動(dòng)頁(yè)的文件里通過(guò)首選項來(lái)實(shí)現是否需要彈“權限管理”的彈窗，如果需要彈窗的情況下，用戶(hù)點(diǎn)擊同意權限后通過(guò)首選項對用戶(hù)的操作做持久化保存。相關(guān)代碼如下：

// SplashPage.ets
import data_preferences from '@ohos.data.preferences';
onConfirm() {
  let preferences = data_preferences.getPreferences(this.context, H_STORE);
  preferences.then((res) = > {
    res.put(IS_PRIVACY, true).then(() = > {
      res.flush();
      Logger.info('SplashPage','isPrivacy is put success');
    }).catch((err: Error) = > {
      Logger.info('SplashPage','isPrivacy put failed. Cause:' + err);
    });
  })
  this.jumpAdPage();
}
exitApp() {
  this.context.terminateSelf();
}
jumpAdPage() {
  setTimeout(() = > {
    router.replaceUrl({ url: 'pages/AdvertisingPage' });
  }, Const.LAUNCHER_DELAY_TIME);
}
aboutToAppear() {
  let preferences = data_preferences.getPreferences(this.context, H_STORE);
  preferences.then((res) = > {
    res.get(IS_PRIVACY, false).then((isPrivate) = > {
      if (isPrivate === true) {
        this.jumpAdPage();
      } else {
        this.dialogController.open();
      }
    });
  });
}

APP功能入口

我們需要給APP添加底部菜單欄，用于切換不同的應用模塊，由于各個(gè)模塊之間屬于完全獨立的情況，并且不需要每次切換都進(jìn)行界面的刷新，所以我們用到了Tabs，TabContent組件。

本應用一共有首頁(yè)（HomeIndex），成就（AchievementIndex）和我的（MineIndex）三個(gè)模塊，分別對應Tabs組件的三個(gè)子組件TabContent。

// MainPage.ets
TabContent() {
  HomeIndex({ homeStore: $homeStore, editedTaskInfo: $editedTaskInfo, editedTaskID: $editedTaskID })
    .borderWidth({ bottom: 1 })
    .borderColor($r('app.color.primaryBgColor'))
}
.tabBar(this.TabBuilder(TabId.HOME))
.align(Alignment.Start)
TabContent() {
  AchievementIndex()
}
.tabBar(this.TabBuilder(TabId.ACHIEVEMENT))
TabContent() {
  MineIndex()
    .borderWidth({ bottom: 1 })
    .borderColor($r('app.color.primaryBgColor'))
}
.tabBar(this.TabBuilder(TabId.MINE))

首頁(yè)

首頁(yè)包含了任務(wù)信息的所有入口，包含任務(wù)列表的展示，任務(wù)的編輯和新增，上下滾動(dòng)的過(guò)程中頂部導航欄的漸變，日期的切換以及隨著(zhù)日期切換界面任務(wù)列表跟著(zhù)同步的功能，效果圖如下：

具體代碼實(shí)現我們將在下邊分模塊進(jìn)行說(shuō)明：

1. 導航欄背景漸變
   Scroll滾動(dòng)的過(guò)程中，在它的onScroll方法里我們通過(guò)計算它Y軸的偏移量來(lái)改變當前界面的@State修飾的naviAlpha變量值，進(jìn)而改變頂部標題的背景色，代碼實(shí)現如下：

   // HomeComponent.ets
   // 視圖滾動(dòng)的過(guò)程中處理導航欄的透明度
   onScrollAction() {  
     this.yOffset = this.scroller.currentOffset().yOffset;  
     if (this.yOffset > Const.DEFAULT_56) {    
       this.naviAlpha = 1; 
     } else {    
       this.naviAlpha = this.yOffset / Const.DEFAULT_56;
     }
   }
   

2. 日歷組件
   日歷組件主要用到的是一個(gè)橫向滑動(dòng)的Scroll組件。

// WeekCalendarComponent.ets
   build() {    
     Row() {      
       Column() {        
         Row() {...}             
         Scroll(this.scroller) {          
           Row() {            
             ForEach(this.homeStore.dateArr, (item: WeekDateModel, index?: number) = > {              
               Column() {                
                 Text(item.weekTitle)                  
                   .fontColor(sameDate(item.date, this.homeStore.showDate) ? $r('app.color.blueColor') : $r('app.color.titleColor'))                                 
                 Divider()
                   .color(sameDate(item.date, this.homeStore.showDate) ? $r('app.color.blueColor') : $r('app.color.white'))                
                 Image(this.getProgressImg(item))                               
               } 
               .onClick(() = > WeekCalendarMethods.calenderItemClickAction(item, index, this.homeStore))            
             })          
           }       
         }
         ...               
         .onScrollEdge((event) = > this.onScrollEdgeAction(event))      
       }
       ...       
     }
     ...    
   }

手動(dòng)滑動(dòng)頁(yè)面時(shí)，我們通過(guò)在onScrollEnd方法里計算Scroll的偏移量來(lái)實(shí)現分頁(yè)的效果，同時(shí)Scroll有提供scrollPage()方法可供我們點(diǎn)擊左右按鈕的時(shí)候來(lái)進(jìn)行頁(yè)面切換。

// WeekCalendarComponent.ets
import display from '@ohos.display';
...
// scroll滾動(dòng)停止時(shí)通過(guò)判斷偏移量進(jìn)行分頁(yè)處理
onScrollEndAction() {
  if (this.isPageScroll === false) {
    let page = Math.round(this.scroller.currentOffset().xOffset / this.scrollWidth);
    page = (this.isLoadMore === true) ? page + 1 : page;
    if (this.scroller.currentOffset().xOffset % this.scrollWidth != 0 || this.isLoadMore === true) {
      let xOffset = page * this.scrollWidth;
      this.scroller.scrollTo({ xOffset, yOffset: 0 } as ScrollTo);
      this.isLoadMore = false;
    }
    this.currentPage = this.homeStore.dateArr.length / Const.WEEK_DAY_NUM - page - 1;
    Logger.info('HomeIndex', 'onScrollEnd: page ' + page + ', listLength ' + this.homeStore.dateArr.length);
    let dayModel: WeekDateModel = this.homeStore.dateArr[Const.WEEK_DAY_NUM * page+this.homeStore.selectedDay];
    Logger.info('HomeIndex', 'currentItem: ' + JSON.stringify(dayModel) + ', selectedDay  ' + this.homeStore.selectedDay);
    this.homeStore!.setSelectedShowDate(dayModel!.date!.getTime());
  }
  this.isPageScroll = false;
}

我們在需要在Scroll滑動(dòng)到左邊邊緣的時(shí)候去請求更多的歷史數據以便Scroll能一直滑動(dòng)，通過(guò)Scroll的onScrollEdge方法我們可以判斷它是否已滑到邊緣位置。

// WeekCalendarComponent.ets
onScrollEdgeAction(side: Edge) {
  if (side === Edge.Top && this.isPageScroll === false) {
    Logger.info('HomeIndex', 'onScrollEdge: currentPage ' + this.currentPage);
    if ((this.currentPage + 2) * Const.WEEK_DAY_NUM >= this.homeStore.dateArr.length) {
      Logger.info('HomeIndex', 'onScrollEdge: load more data');
      let date: Date = new Date(this.homeStore.showDate);
      date.setDate(date.getDate() - Const.WEEK_DAY_NUM);
      this.homeStore.getPreWeekData(date, () = > {});
      this.isLoadMore = true;
    }
  }
}

homeStore主要是請求數據庫的數據并對數據進(jìn)行處理進(jìn)而渲染到界面上。

// HomeViewModel.ets
public getPreWeekData(date: Date, callback: Function) {
  let weekCalendarInfo: WeekCalendarInfo = getPreviousWeek(date);
    
  // 請求數據庫數據
  DayInfoApi.queryList(weekCalendarInfo.strArr, (res: DayInfo[]) = > {

    // 數據處理
    ...  
    this.dateArr = weekCalendarInfo.arr.concat(...this.dateArr);
  })
}

同時(shí)我們還需要知道怎么根據當天的日期計算出本周內的所有日期數據。

// WeekCalendarModel.ets
export function getPreviousWeek(showDate: Date): WeekCalendarInfo {
  Logger.debug('WeekCalendarModel', 'get week date by date: ' + showDate.toDateString());
  let weekCalendarInfo: WeekCalendarInfo = new WeekCalendarInfo();
  let arr: Array< WeekDateModel > = [];
  let strArr: Array< string > = [];
  let currentDay = showDate.getDay() - 1;
  // 由于date的getDay()方法返回的是0-6代表周日到周六，我們界面上展示的周一-周日為一周，所以這里要將getDay()數據偏移一天
  let currentDay = showDate.getDay() - 1;
  if (showDate.getDay() === 0) {
    currentDay = 6;
  }
  // 將日期設置為當前周第一天的數據（周一）
  showDate.setDate(showDate.getDate() - currentDay);
  for (let index = WEEK_DAY_NUM; index > 0; index--) {
    let tempDate = new Date(showDate);
    tempDate.setDate(showDate.getDate() - index);
    let dateStr = dateToStr(tempDate);
    strArr.push(dateStr);
    arr.push(new WeekDateModel(WEEK_TITLES[tempDate.getDay()], dateStr, tempDate));
  }
  Logger.debug('WeekCalendarModel', JSON.stringify(arr));
  weekCalendarInfo.arr = arr;
  weekCalendarInfo.strArr = strArr;
  return weekCalendarInfo;
}

3. 懸浮按鈕
   由于首頁(yè)右下角有一個(gè)懸浮按鈕，所以首頁(yè)整體我們用了一個(gè)Stack組件，將右下角的懸浮按鈕和頂部的title放在滾動(dòng)組件層的上邊。

   // HomeComponent.ets
   build() {  
     Stack() {    
       Scroll(this.scroller) {      
         Column() {     
           ...   // 上部界面組件
           Column() {          
             ForEach(this.homeStore.getTaskListOfDay(), (item: TaskInfo) = > {            
               TaskCard({
                 taskInfoStr: JSON.stringify(item),
                 clickAction: (isClick: boolean) = > this.taskItemAction(item, isClick)
               })
               ...
             }, (item: TaskInfo) = > JSON.stringify(item))} 
         }   
       }
     }
     .onScroll(() = > {
       this.onScrollAction()
     })
     // 懸浮按鈕
     AddBtn({ clickAction: () = > {
       this.editTaskAction()
     } }) 
     // 頂部title 
     Row() {
       Text($r('app.string.EntryAbility_label'))
         .titleTextStyle()
         .fontSize($r('app.float.default_24'))
         .padding({ left: Const.THOUSANDTH_66 })
     }
     .width(Const.THOUSANDTH_1000)
     .height(Const.DEFAULT_56)
     .position({ x: 0, y: 0 })
     .backgroundColor(`rgba(${WHITE_COLOR_0X},${WHITE_COLOR_0X},${WHITE_COLOR_0X},${this.naviAlpha})`)
     CustomDialogView()
   } 
   .allSize() 
   .backgroundColor($r('app.color.primaryBgColor'))
   

4. 界面跳轉及傳參
   首頁(yè)任務(wù)列表長(cháng)按時(shí)需要跳轉到對應的任務(wù)編輯界面，同時(shí)點(diǎn)擊懸浮按鈕時(shí)需要跳轉到任務(wù)列表頁(yè)面。
   頁(yè)面跳轉需要在頭部引入router。

   // HomeComponent.ets
   import router from '@ohos.router';
   

   任務(wù)item的點(diǎn)擊事件代碼如下

   // HomeComponent.ets
   taskItemAction(item: TaskInfo, isClick: boolean): void {
     if (!this.homeStore.checkCurrentDay()) {
       return;
     }
     if (isClick) {  
       // 點(diǎn)擊任務(wù)打卡    
       let callback: CustomDialogCallback = { confirmCallback: (taskTemp: TaskInfo) = > {
         this.onConfirm(taskTemp)
       }, cancelCallback: () = > {
       } };
       this.broadCast.emit(BroadCastType.SHOW_TASK_DETAIL_DIALOG, [item, callback]); 
     } else {   
       // 長(cháng)按編輯任務(wù)    
       let editTaskStr: string = JSON.stringify(TaskMapById[item.taskID - 1]);
       let editTask: ITaskItem = JSON.parse(editTaskStr);
       ...
       router.pushUrl({ url: 'pages/TaskEditPage', params: { params: JSON.stringify(editTask) } });
     }
   }
   

任務(wù)創(chuàng )建與編輯

本節將介紹如何創(chuàng )建和編輯健康生活任務(wù)。

功能概述

用戶(hù)點(diǎn)擊懸浮按鈕進(jìn)入任務(wù)列表頁(yè)，點(diǎn)擊任務(wù)列表可進(jìn)入對應任務(wù)編輯的頁(yè)面中，對任務(wù)進(jìn)行詳細的設置，之后點(diǎn)擊完成按鈕編輯任務(wù)后將返回首頁(yè)。實(shí)現效果如下圖：

任務(wù)列表與編輯任務(wù)

這里主要為大家介紹添加任務(wù)列表頁(yè)的實(shí)現、任務(wù)編輯的實(shí)現、以及具體彈窗設置和編輯完成功能的邏輯實(shí)現。

任務(wù)列表頁(yè)

任務(wù)列表頁(yè)由包括上部分的標題、返回按鈕以及正中間的任務(wù)列表組成。實(shí)現效果如圖：

使用Navigation以及List組件構成元素，ForEach遍歷生成具體列表。這里是Navigation構成頁(yè)面導航：

// TaskListPage.ets
Navigation() {
  Column() {
    // 頁(yè)面中間的列表
    TaskList() 
  }
  .width(Const.THOUSANDTH_1000)
  .justifyContent(FlexAlign.Center)
}
.size({ width: Const.THOUSANDTH_1000, height: Const.THOUSANDTH_1000 })
.title(Const.ADD_TASK_TITLE)
.titleMode(NavigationTitleMode.Mini)

列表右側有一個(gè)判斷是否開(kāi)啟的文字標識，點(diǎn)擊某個(gè)列表需要跳轉到對應的任務(wù)編輯頁(yè)里。具體的列表實(shí)現如下：

// TaskListComponent.ets

@Component
export default struct TaskList {
  ...
  build() {
    List({ space: Const.LIST_ITEM_SPACE }) {
      ForEach(this.taskList, (item: ITaskItem) = > {
        ListItem() {
          Row() {
            Row() {
              Image(item?.icon)
                ...
              Text(item?.taskName).fontSize(Const.DEFAULT_20).fontColor($r('app.color.titleColor'))
            }.width(Const.THOUSANDTH_500)

            Blank()
              ...
			// 狀態(tài)改變
            if (item?.isOpen) {
              Text($r('app.string.already_open'))
                ...
            }
            Image($r('app.media.ic_right_grey'))
              ...
          }
          ...
        }
        ...
        .onClick(() = > {
          router.pushUrl({
            url: 'pages/TaskEditPage',
            params: {
              params: formatParams(item),
            }
          })
        })
        ...
      }, (item: ITaskItem) = > JSON.stringify(item))
    }
  ...
  }
}

任務(wù)編輯頁(yè)

任務(wù)編輯頁(yè)由上方的“編輯任務(wù)”標題以及返回按鈕，主體內容的List配置項和下方的完成按鈕組成，實(shí)現效果如圖：

由于每一個(gè)配置項功能不相同，且邏輯復雜，故將其拆分為五個(gè)獨立的組件。

這是任務(wù)編輯頁(yè)面，由Navigation和一個(gè)自定義組件TaskDetail構成：

// TaskEditPage.ets
Navigation() {
  Column() {
    TaskDetail()
  }
  .width(Const.THOUSANDTH_1000)
  .height(Const.THOUSANDTH_1000)
}
.size({ width: Const.THOUSANDTH_1000, height: Const.THOUSANDTH_1000 })
.title(Const.EDIT_TASK_TITLE)
.titleMode(NavigationTitleMode.Mini)

自定義組件由List以及其子組件ListItem構成：

// TaskDetailComponent.ets
List({ space: Const.LIST_ITEM_SPACE }) {
  ListItem() {
    TaskChooseItem()
  }
  ...
  ListItem() {
    TargetSetItem()
  }
  ...
  ListItem() {
    OpenRemindItem()
  }
  ...
  ListItem() {
    RemindTimeItem()
  }
  ...
  ListItem() {
    FrequencyItem()
  }
  ...
}
.width(Const.THOUSANDTH_940)

其中做了禁用判斷，需要任務(wù)打開(kāi)才可以點(diǎn)擊編輯：

// TaskDetailComponent.ets
.enabled(
  this.settingParams?.isOpen
)

一些特殊情況的禁用，如每日微笑、每日刷牙的目標設置不可編輯：

// TaskDetailComponent.ets
.enabled(
  this.settingParams?.isOpen
    && this.settingParams?.taskID !== taskType.smile
    && this.settingParams?.taskID !== taskType.brushTeeth
)

提醒時(shí)間在開(kāi)啟提醒打開(kāi)之后才可以編輯：

// TaskDetailComponent.ets
.enabled(this.settingParams?.isOpen && this.settingParams?.isAlarm)

設置完成之后，點(diǎn)擊完成按鈕，會(huì )向數據庫更新現在進(jìn)行改變的狀態(tài)信息，并執行之后的邏輯判斷：

// TaskDetailComponent.ets
addTask(taskInfo, context).then((res: number) = > {
  GlobalContext.getContext().setObject('taskListChange', true);
  // 成功的狀態(tài)，成功后跳轉首頁(yè)
  router.back({
    url: 'pages/MainPage', 
    params: {
      editTask: this.backIndexParams(),
    }
  })
  Logger.info('addTaskFinished', JSON.stringify(res));
}).catch((error: Error) = > {
  // 失敗的狀態(tài)，失敗后彈出提示，并打印錯誤日志
  prompt.showToast({
    message: Const.SETTING_FINISH_FAILED_MESSAGE
  })
  Logger.error('addTaskFailed', JSON.stringify(error));
})

任務(wù)編輯彈窗

彈窗由封裝的自定義組件CustomDialogView注冊事件，并在點(diǎn)擊對應的編輯項時(shí)進(jìn)行觸發(fā)，從而打開(kāi)彈窗。

CustomDialogView引入實(shí)例并注冊事件：

// TaskDialogView.ets
targetSettingDialog: CustomDialogController = new CustomDialogController({ 
  builder: TargetSettingDialog(),
  autoCancel: true,
  alignment: DialogAlignment.Bottom,
  offset: { dx: Const.ZERO, dy: Const.MINUS_20 }
});
...

// 注冊事件
this.broadCast.on(BroadCastType.SHOW_TARGET_SETTING_DIALOG, () = > {
  this.targetSettingDialog.open();
})

點(diǎn)擊對應的編輯項進(jìn)行觸發(fā)：

// TaskDetailComponent.ets
.onClick(() = > {
  this.broadCast.emit(
    BroadCastType.SHOW_TARGET_SETTING_DIALOG);
})

自定義彈窗的實(shí)現：

任務(wù)目標設置的彈窗較為特殊，故單獨拿出來(lái)說(shuō)明。

因為任務(wù)目標設置有三種類(lèi)型：

• 早睡早起的時(shí)間
• 喝水的量度
• 吃蘋(píng)果的個(gè)數

如下圖所示：

故根據任務(wù)的ID進(jìn)行區分，將同一彈窗復用：

// TaskSettingDialog.ets
if ([taskType.getup, taskType.sleepEarly].indexOf(this.settingParams?.taskID) > Const.HAS_NO_INDEX) {
  TimePicker({
    selected: new Date(`${new Date().toDateString()} 8:00:00`),
  })
    .height(Const.THOUSANDTH_800)
    .useMilitaryTime(true)
    .onChange((value: TimePickerResult) = > {
      this.currentTime = formatTime(value);
    })
} else {
  TextPicker({ range: this.settingParams?.taskID === taskType.drinkWater ? this.drinkRange : this.appleRange })
    .width(Const.THOUSANDTH_900,)
    .height(Const.THOUSANDTH_800,)
    .onChange((value) = > {
      this.currentValue = value?.split(' ')[0];
    })
}

彈窗確認的時(shí)候將修改好的值賦予該項設置，如不符合規則，將彈出提示：

// TaskSettingDialog.ets
// 校驗規則
compareTime(startTime: string, endTime: string) {
  if (returnTimeStamp(this.currentTime) < returnTimeStamp(startTime) ||
    returnTimeStamp(this.currentTime) > returnTimeStamp(endTime)) {
    prompt.showToast({
      message: Const.CHOOSE_TIME_OUT_RANGE
    })
    return false;
  }
  return true;
}
// 設置修改項
setTargetValue() {
  if (this.settingParams?.taskID === taskType.getup) {
    if (!this.compareTime(Const.GET_UP_EARLY_TIME, Const.GET_UP_LATE_TIME)) {
      return;
    }
    this.settingParams.targetValue = this.currentTime;
    return;
  }
  if (this.settingParams?.taskID === taskType.sleepEarly) {
    if (!this.compareTime(Const.SLEEP_EARLY_TIME, Const.SLEEP_LATE_TIME)) {
      return;
    }
    this.settingParams.targetValue = this.currentTime;
    return;
  }
  this.settingParams.targetValue = this.currentValue;
}

其余彈窗實(shí)現基本類(lèi)似，這里不再贅述。

后臺代理提醒

健康生活App中提供了任務(wù)提醒功能，我們用系統提供的后臺代理提醒reminderAgent接口完成相關(guān)的開(kāi)發(fā)。

說(shuō)明： 后臺代理提醒接口需要在module.json5中申請ohos.permission.PUBLISH_AGENT_REMINDER權限，代碼如下：

// module.json5
"requestPermissions": [
  {
    "name": "ohos.permission.PUBLISH_AGENT_REMINDER"
  }
]

后臺代理提醒entrysrcmainetsserviceReminderAgent.ts文件中提供了發(fā)布提醒任務(wù)、查詢(xún)提醒任務(wù)、刪除提醒任務(wù)三個(gè)接口供任務(wù)編輯頁(yè)面調用，跟隨任務(wù)提醒的開(kāi)關(guān)增加、更改、刪除相關(guān)后臺代理提醒，代碼如下：開(kāi)發(fā)前請熟悉鴻蒙開(kāi)發(fā)指導文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

// ReminderAgent.ets
import reminderAgent from '@ohos.reminderAgentManager';
import notification from '@ohos.notificationManager';
import preferences from '@ohos.data.preferences';
import Logger from '../common/utils/Logger';
import { CommonConstants as Const } from '../common/constants/CommonConstants';
import ReminderInfo from '../viewmodel/ReminderInfo';
import PublishReminderInfo from '../viewmodel/PublishReminderInfo';

// 發(fā)布提醒
function publishReminder(params: PublishReminderInfo, context: Context) {
  if (!params) {
    Logger.error(Const.REMINDER_AGENT_TAG, 'publishReminder params is empty');
    return;
  }
  let notifyId: string = params.notificationId.toString();
  hasPreferencesValue(context, notifyId, (preferences: preferences.Preferences, hasValue: boolean) = > {
    if (hasValue) {
      preferences.get(notifyId, -1, (error: Error, value: preferences.ValueType) = > {
        if (typeof value !== 'number') {
          return;
        }
        if (value >= 0) {
          reminderAgent.cancelReminder(value).then(() = > {
            processReminderData(params, preferences, notifyId);
          }).catch((err: Error) = > {
            Logger.error(Const.REMINDER_AGENT_TAG, `cancelReminder err: ${err}`);
          });
        } else {
          Logger.error(Const.REMINDER_AGENT_TAG, 'preferences get value error ' + JSON.stringify(error));
        }
      });
    } else {
      processReminderData(params, preferences, notifyId);
    }
  });
}

// 取消提醒
function cancelReminder(reminderId: number, context: Context) {
  if (!reminderId) {
    Logger.error(Const.REMINDER_AGENT_TAG, 'cancelReminder reminderId is empty');
    return;
  }
  let reminder: string = reminderId.toString();
  hasPreferencesValue(context, reminder, (preferences: preferences.Preferences, hasValue: boolean) = > {
    if (!hasValue) {
      Logger.error(Const.REMINDER_AGENT_TAG, 'cancelReminder preferences value is empty');
      return;
    }
    getPreferencesValue(preferences, reminder);
  });
}

// 可通知ID
function hasNotificationId(params: number) {
  if (!params) {
    Logger.error(Const.REMINDER_AGENT_TAG, 'hasNotificationId params is undefined');
    return;
  }
  return reminderAgent.getValidReminders().then((reminders) = > {
    if (!reminders.length) {
      return false;
    }
    let notificationIdList: Array< number > = [];
    for (let i = 0; i < reminders.length; i++) {
      let notificationId = reminders[i].notificationId;
      if (notificationId) {
        notificationIdList.push(notificationId);
      }
    }
    const flag = notificationIdList.indexOf(params);
    return flag === -1 ? false : true;
  });
}

function hasPreferencesValue(context: Context, hasKey: string, callback: Function) {
  let preferencesPromise = preferences.getPreferences(context, Const.H_STORE);
  preferencesPromise.then((preferences: preferences.Preferences) = > {
    preferences.has(hasKey).then((hasValue: boolean) = > {
      callback(preferences, hasValue);
    });
  });
}

// 進(jìn)程提醒數據
function processReminderData(params: PublishReminderInfo, preferences: preferences.Preferences, notifyId: string) {
  let timer = fetchData(params);
  reminderAgent.publishReminder(timer).then((reminderId: number) = > {
    putPreferencesValue(preferences, notifyId, reminderId);
  }).catch((err: Error) = > {
    Logger.error(Const.REMINDER_AGENT_TAG, `publishReminder err: ${err}`);
  });
}

// 獲取數據
function fetchData(params: PublishReminderInfo): reminderAgent.ReminderRequestAlarm {
  return {
    reminderType: reminderAgent.ReminderType.REMINDER_TYPE_ALARM,
    hour: params.hour || 0,
    minute: params.minute || 0,
    daysOfWeek: params.daysOfWeek || [],
    wantAgent: {
      pkgName: Const.PACKAGE_NAME,
      abilityName: Const.ENTRY_ABILITY
    },
    title: params.title || '',
    content: params.content || '',
    notificationId: params.notificationId || -1,
    slotType: notification.SlotType.SOCIAL_COMMUNICATION
  }
}

function putPreferencesValue(preferences: preferences.Preferences, putKey: string, putValue: number) {
  preferences.put(putKey, putValue).then(() = > {
    preferences.flush();
  }).catch((error: Error) = > {
    Logger.error(Const.REMINDER_AGENT_TAG, 'preferences put value error ' + JSON.stringify(error));
  });
}

function getPreferencesValue(preferences: preferences.Preferences, getKey: string) {
  preferences.get(getKey, -1).then((value: preferences.ValueType) = > {
    if (typeof value !== 'number') {
      return;
    }
    if (value >= 0) {
      reminderAgent.cancelReminder(value).then(() = > {
        Logger.info(Const.REMINDER_AGENT_TAG, 'cancelReminder promise success');
      }).catch((err: Error) = > {
        Logger.error(Const.REMINDER_AGENT_TAG, `cancelReminder err: ${err}`);
      });
    }
  }).catch((error: Error) = > {
    Logger.error(Const.REMINDER_AGENT_TAG, 'preferences get value error ' + JSON.stringify(error));
  });
}

const reminder = {
  publishReminder: publishReminder,
  cancelReminder: cancelReminder,
  hasNotificationId: hasNotificationId
} as ReminderInfo

export default reminder;

審核編輯 黃宇