鸿蒙开发基础运用（ArkTS）-健康生活APP

健康生活应用，主要功能包括：

用户可以创建最多6个健康生活任务（早起，喝水，吃苹果，每日微笑，刷牙，早睡），并设置任务目标、是否开启提醒、提醒时间、每周任务频率。
用户可以在主页面对设置的健康生活任务进行打卡，其中早起、每日微笑、刷牙和早睡只需打卡一次即可完成任务，喝水、吃苹果需要根据任务目标量多次打卡完成。
主页可显示当天的健康生活任务完成进度，当天所有任务都打卡完成后，进度为100%，并且用户的连续打卡天数加一。

实操步骤

应用主页面

启动页

给应用添加一个启动页，启动页里需要用到定时器来实现启动页展示固定时间后跳转应用主页的功能。具体实现逻辑是：

通过修改entryability里的loadContent路径可以改变应用的入口文件，此处改为SplashPage。
在SplashPage通过首选项来实现"权限管理"弹窗。如果需要弹窗，用户点击同意后通过首选项对用户的操作做持久化保存。

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

// SplashPage.ets
import common from '@ohos.app.ability.common';
import data_preferences from '@ohos.data.preferences';

@Entry
@Component
struct SplashIndex {
context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;

onConfirm() {
let preferences = data_preferences.getPreferences(that.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();
}
});
});
}

build() {
...
}
}

应用入口

我们需要给APP添加底部菜单栏，用于切换不同的应用模块，由于各个模块之间属于完全独立的情况，并且不需要每次切换都进行界面的刷新，所以我们用到了Tabs，TabContent组件。本应用一共有首页（HomeIndex），成就（AchievementIndex）和我的（MineIndex）三个模块，分别对应Tabs组件的三个子组件TabContent。

// MainPage.ets
Tabs({ barPosition: BarPosition.End, controller: this.tabController }) {
  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()
  }
  .tabBar(this.TabBuilder(TabId.MINE))
}

首页

首页包含了任务信息的所有入口，包含任务列表的展示，任务的编辑和新增，上下滚动的过程中顶部导航栏的渐变，日期的切换以及随着日期切换界面任务列表跟着同步的功能。具体代码实现我们将在下边分模块进行说明。

导航栏背景渐变

Scroll滚动的过程中，在它的onScrollAction()方法里我们通过计算它Y轴的偏移量来改变当前界面的@State修饰的naviAlpha变量值，进而改变顶部标题的背景色。

// HomeComponent.ets
// 视图滚动的过程中处理导航栏的透明度
@State naviAlpha: number = 0;
...
onScrollAction() {  
  this.yOffset = this.scroller.currentOffset().yOffset;  
  if (this.yOffset > Const.DEFAULT_56) {    
    this.naviAlpha = 1;  
  } else {    
    this.naviAlpha = this.yOffset / Const.DEFAULT_56;  
  }
}

日历组件

日历组件主要用到的是一个横向滑动的Scroll组件。手动滑动页面时，通过在onScrollEndAction()方法里计算Scroll的偏移量来实现分页的效果，同时Scroll有提供scrollPage()方法可供我们点击左右按钮的时候来进行页面切换。需要在Scroll滑动到左边边缘的时候去请求更多的历史数据以便Scroll能一直滑动，通过Scroll的onScrollEdge方法可以判断它是否已滑到边缘位置。homeStore主要是请求数据库的数据并对数据进行处理进而渲染到界面上。同时还需要知道怎么根据当天的日期计算出本周内的所有日期数据。

// 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))            
          })          
         }       
        }               
        .onScrollStop(() => this.onScrollEndAction())        
        .onScrollEdge((event) => this.onScrollEdgeAction(event))      
      }
    }
  }
}

// WeekCalendarComponent.ets
// scroll滚动停止时通过判断偏移量进行分页处理
onScrollEndAction() {
  // 区分是否是手动滑动，点击左右箭头按钮导致Scroll滑动时不作处理，不然会引起死循环
  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;
    let dayModel: WeekDateModel = this.homeStore.dateArr[Const.WEEK_DAY_NUM * page + this.homeStore.selectedDay];
    this.homeStore!.setSelectedShowDate(dayModel!.date!.getTime());
  }
  this.isPageScroll = false;
}

// 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);
      that.homeStore.getPreWeekData(date, () => {});
      this.isLoadMore = true;
    }
  }
}

// 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);
  })
}

// WeekCalendarModel.ets
export function getPreviousWeek(showDate: Date): WeekCalendarInfo {
  let weekCalendarInfo: WeekCalendarInfo = new WeekCalendarInfo();
  let arr: Array<WeekDateModel> = [];
  let strArr: Array<string> = []; 

  // 由于date的getDay()方法返回的是0-6代表周日到周六，我们界面上展示的周一-周日为一周，所以这里要将getDay()数据偏移一天
  let currentDay = showDate.getDay() - 1;

  // 将日期设置为当前周第一天的数据（周一）
  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));
  }
  weekCalendarInfo.arr = arr;
  weekCalendarInfo.strArr = strArr;
  return weekCalendarInfo;
}

悬浮按钮

由于首页右下角有一个悬浮按钮，所以首页整体我们用了一个Stack组件，将右下角的悬浮按钮和顶部的title放在滚动组件层的上边。

// 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'))
    }
    .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'))
}

界面跳转及传参

首页任务列表长按时需要跳转到对应的任务编辑界面，同时点击悬浮按钮时需要跳转到任务列表页面。页面跳转需要在头部引入router。

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

taskItemAction(item: TaskInfo, isClick: boolean): void {
  if (!this.homeStore.checkCurrentDay()) {
    return;
  }
  if (isClick) {
    // 点击任务打卡
    let callback: CustomDialogCallback ={ confirmCallback: (taskTemp: TaskInfo) => { this.onConfirm(taskTemp) }, cancelCallback: () => {} };
    this.broadCast.emit(BroadCastType.SHOW_TASK_DETAIL_DIALOG, [item, callback]);
  } else {
    // 长按编辑任务
    let editTaskStr: string = JSON.stringify(TaskMapById[item.taskID - 1]);
    let editTask: ITaskItem = JSON.parse(editTaskStr);
    editTask.targetValue = item?.targetValue;
    editTask.isAlarm = item.isAlarm;
    editTask.startTime = item.startTime;
    editTask.frequency = item.frequency;
    editTask.isOpen = item.isOpen;
    router.pushUrl({ url: 'pages/TaskEditPage', params: { params: JSON.stringify(editTask) } });
  }
}

任务创建与编辑

功能概述

用户点击悬浮按钮进入任务列表页，点击任务列表可进入对应任务编辑的页面中，对任务进行详细的设置，之后点击完成按钮编辑任务后将返回首页。实现效果如图所示。

任务列表

任务列表页

任务列表页由上部分的标题、返回按钮以及正中间的任务列表组成。使用Navigation以及List组件构成元素，使用ForEach遍历生成具体列表。这里是Navigation构成页面导航，实现效果如图所示：

// TaskListPage.ets
Navigation() {
  Column() {
    // 页面中间的列表
    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)

列表右侧有一个判断是否开启的文字标识，点击某个列表需要跳转到对应的任务编辑页里。具体的列表实现：

// TaskListComponent.ets
List({ space: Const.LIST_ITEM_SPACE }) {
  ForEach(this.taskList, (item: ITaskItem) => {
    ListItem() {
      Row() {
        Row() {
          Image(item?.icon)
          Text(item?.taskName)
            ...
        }
        .width(Const.THOUSANDTH_500)

        Blank()
          .layoutWeight(1)

        // 状态显示
        if (item?.isOpen) {
          Text($r('app.string.already_open'))
        }
        Image($r('app.media.ic_right_grey'))
          .width(Const.DEFAULT_8)
          .height(Const.DEFAULT_16)

      }
      ...
    }
    ...

    // 路由跳转到任务编辑页
    .onClick(() => {
      router.pushUrl({
        url: 'pages/TaskEditPage',
        params: {
          params: formatParams(item)
        }
      })
    })
    ...
  })
}

任务编辑

任务编辑页

任务编辑页由上方的"编辑任务"标题以及返回按钮，主体内容的List配置项和下方的完成按钮组成。任务编辑页面，由Navigation和一个自定义组件TaskDetail构成。自定义组件由List以及其子组件ListItem构成，实现效果如图所示：

// 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)

// TaskDetailComponent.ets
List({ space: Const.LIST_ITEM_SPACE }) {
  ListItem() {
    TaskChooseItem()
  }
  .listItemStyle()

  ListItem() {
    TargetSetItem()
  }
  .listItemStyle()
  // 一些特殊情况的禁用，如每日微笑、每日刷牙的目标设置不可编辑
  .enabled( 
    this.settingParams?.isOpen
    && this.settingParams?.taskID !== taskType.smile
    && this.settingParams?.taskID !== taskType.brushTeeth
  )
  .onClick(() => {
    this.broadCast.emit(
      BroadCastType.SHOW_TARGET_SETTING_DIALOG);
  })

  ListItem() {
    OpenRemindItem()
  }
  .listItemStyle()
  // 其中做了禁用判断，需要任务打开才可以点击编辑
  .enabled(this.settingParams?.isOpen)

  ListItem() {
    RemindTimeItem()
  }
  .listItemStyle()
  // 提醒时间在开启提醒打开之后才可以编辑
  .enabled(this.settingParams?.isOpen && this.settingParams?.isAlarm)
  .onClick(() => {
    this.broadCast.emit(BroadCastType.SHOW_REMIND_TIME_DIALOG);
  })

  ListItem() {
    FrequencyItem()
  }
  .listItemStyle()
  .enabled(this.settingParams?.isOpen && this.settingParams?.isAlarm)
  .onClick(() => {
    this.broadCast.emit(BroadCastType.SHOW_FREQUENCY_DIALOG);
  })
}
.width(Const.THOUSANDTH_940)

// TaskDetailComponent.ets
addTask({
  // 相关参数
  ...
})
.then((res: number) => {
  // 成功的状态，成功后跳转首页
  GlobalContext.getContext().setObject('taskListChange', true);
  router.back({
    url: 'pages/MainPage',
    params: {
      editTask: this.backIndexParams()
    }
  })
  Logger.info('addTaskFinished', JSON.stringify(res));
})
.catch((error: Error) => {
  // 失败的状态，失败后弹出提示，并打印错误日志
  prompt.showToast({
    message: Const.SETTING_FINISH_FAILED_MESSAGE
  })
  Logger.error('addTaskFailed', JSON.stringify(error));
})

任务编辑弹窗

在自定义弹窗CustomDialogView组件内注册打开弹窗的事件，当点击对应任务的编辑项时触发该事件，进而打开弹窗。

// 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_TARGETSETTING_DIALOG, () => {
  this.targetSettingDialog.open();
})

// HomeComponent.ets
taskItemAction(item: TaskInfo, isClick: boolean): void {
  ...
  if (isClick) {
    let callback: CustomDialogCallback ={ confirmCallback: (taskTemp: TaskInfo) => { this.onConfirm(taskTemp) }, cancelCallback: () => {} };
    this.broadCast.emit(BroadCastType.SHOW_TASK_DETAIL_DIALOG, [item, callback]);
  } else {
    ...
  }
}

任务目标设置有三种类型，早睡早起的时间、喝水的量度、吃苹果的个数。故根据任务的ID进行区分，将同一弹窗复用，如图所示：

其余弹窗实现基本类似，这里不再赘述。

// 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`),
  })
  ...
} else {
  TextPicker({ 
    range: this.settingParams?.taskID === taskType.drinkWater ? 
      this.drinkRange : 
      this.appleRange 
  })
  ...
}

// TaskSettingDialog.ets
// 校验规则
compareTime(startTime: string, endTime: string) {
  if (returnTimeStamp(this.currentTime) < returnTimeStamp(startTime) || 
    returnTimeStamp(this.currentTime) > returnTimeStamp(endTime)) {
    // 弹出提示
    prompt.showToast({
      message: commonConst.CHOOSE_TIME_OUT_RANGE
    })
    return false;
  }
  return true;
}

// 设置修改项
setTargetValue() {
  ...
  if (this.settingParams?.taskID === taskType.sleepEarly) {
    if (!this.compareTime(commonConst.SLEEP_EARLY_TIME, commonConst.SLEEP_LATE_TIME)) {
      return;
    }
    this.settingParams.targetValue = this.currentTime;
    return;
  }
  this.settingParams.targetValue = this.currentValue;
}

本文是鸿蒙开发中对OpenHarmony技术的简单运用，更多的鸿蒙开发技术可以前往我主页查询，下面分享鸿蒙开发4.0技术分布（略缩图）：

高清完整版技术学习路线图如下寻找保存（附鸿蒙文档）

最后是效果如图：