【时间盒子】-【13.任务新建】创建一个新任务-优快云博客

本文链接：https://blog.youkuaiyun.com/cdblh/article/details/143351035

Tips：

@Watch、@Provide：对状态变量的监听。请参考我的帖子：https://developer.huawei.com/consumer/cn/forum/topic/0208152234389094513?fid=0101587866109860105

router：页面路由。请参考官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-router-0000001820880773#ZH-CN_TOPIC_0000001811317158__routerpushurl9

promptAction：创建并显示文本提示框。请参考官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-promptaction-V5#promptactionshowtoast

一、预览

回顾【6.任务页面】内容，Detail页面布局中遗留的todo 待完善的组件。本篇我们把已设计好的组件添加到该页面。

标题菜单栏
时间选择器
任务设置项

二、标题菜单栏

因为新增、修改都共用这个页面，所以标题文字需动态改变。我们定义一个属性变量isNew，判断是否新增，是则标题显示“新建任务”，否则显示“修改任务”。

另外，还需定义打勾按钮事件：保存任务。首先判断任务名称是否为空，是空则吐司toast提示；不为空时，才能保存。将任务保存到本地（数据持久化+后台代理提醒，见后续篇章），且保存成功后返回上一页面（任务列表页）。

定义一个数据工具类DataUtil，用来判断数据为NULL或空值。右击目录utils >> 新建 >> ArkTS File，文件命名为DataUtil。

定义一个判断是否为空的函数isNull，返回布尔值类型。DataUtil.ets文件代码如下：

/**
 * 数据工具类
 */
export default class DataUtil {
  /**
   * 判断对象是否为空
   */
  static isNull(obj: Object): Boolean {
    return (typeof obj === 'undefined' || obj === '' || obj == null);
  }
}

定义一个属性变量taskModel，用来缓存新建的任务实体。页面中的任务名称、任务时长对应实体对象taskModel的name属性和duration属性。并且，监听taskModel对象的变化，当发生变化时回调函数onTaskModelChangeHandler进行处理。Detail.ets文件代码如下：

import router from '@ohos.router'
import promptAction from '@ohos.promptAction'
import TitleContainer from '../component/TitleContainer'
import SizeUtil from '../utils/SizeUtil'
import DataUtil from '../utils/DataUtil'
import TaskModel from '../viewmodel/TaskModel'
@Entry
@Component
struct Detail {
  private isNew: boolean = true;
  @Watch('onTaskModelChangeHandler') @Provide taskModel: TaskModel = new TaskModel();
  build() {
    Column() {
      // 标题菜单栏
      TitleContainer({ title: this.isNew ? $r('app.string.new_task') : $r('app.string.update_task')
      , backImg: $r('app.media.icon_cancel')
      }) {
        Button() {
          Image($r('app.media.icon_confirm')).objectFit(ImageFit.Fill)
        }
        .width(SizeUtil.getVp($r('app.float.title_button_size')))
        .height(SizeUtil.getVp($r('app.float.title_button_size')))
        .backgroundColor("#00000000")
        .onClick(() => {
          if (!DataUtil.isNull(this.taskModel.name)) {
            // 保存任务，数据持久化+后台代理提醒
            // TODO: 待完善，见后续篇章
            router.back()
          } else {
            promptAction.showToast({
              message: '任务名不能为空！',
              duration: 2000
            })
          }
        })
      }

      // 时间选择器
      // TODO: 待完善

      // 任务设置项
      // TODO: 待完善

    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.grey_light'))
  }
  /**
   * 任务数据改变时回调
   */
  onTaskModelChangeHandler() {
    // 监听taskModel对象的变化，并做相应处理
    // TODO: 待完善
  }

}

三、时间选择器

我们在【8.时间选择器】文章中有介绍时间选择器，把DateSelector组件添加到页面布局中，Detail.ets文件增加的代码如下：

import DateSelector from '../component/DateSelector'
// 时间选择器
DateSelector()

四、任务设置项

我们在【9.任务设置项】文章中有介绍任务设置项，把SettingList组件添加到页面布局中，且需要传入参数settingItems值，这个参数值就是任务设置项数组taskSettingItems，含两个对象：任务名称和任务时长。

并且，taskModel对象发生变化时，同时影响taskSettingItems；设置任务名称、任务时长，taskSettingItems发生改变，也影响taskModel对象的值。

我们定义一个方法initData()，初始化任务设置项。并且被监听taskModel变化的onTaskModelChangeHandler回调函数中调用。

Detail.ets文件完整的代码如下：

import router from '@ohos.router'
import promptAction from '@ohos.promptAction'
import TitleContainer from '../component/TitleContainer'
import SizeUtil from '../utils/SizeUtil'
import DataUtil from '../utils/DataUtil'
import TaskModel from '../viewmodel/TaskModel'
import DateSelector from '../component/DateSelector'
import SettingList from '../component/SettingList'
import TaskSettingItem from '../viewmodel/TaskSettingItem'
import { TaskSettingType } from '../constants/TaskSettingType'
@Entry
@Component
struct Detail {
  private isNew: boolean = true;
  @Watch('onTaskModelChangeHandler') @Provide taskModel: TaskModel = new TaskModel();
  // 任务设置项数组
  @State taskSettingItems: Array<TaskSettingItem> = [];
  build() {
    Column() {
      // 标题菜单栏
      TitleContainer({ title: this.isNew ? $r('app.string.new_task') : $r('app.string.update_task')
      , backImg: $r('app.media.icon_cancel')
      }) {
        Button() {
          Image($r('app.media.icon_confirm')).objectFit(ImageFit.Fill)
        }
        .width(SizeUtil.getVp($r('app.float.title_button_size')))
        .height(SizeUtil.getVp($r('app.float.title_button_size')))
        .backgroundColor("#00000000")
        .onClick(() => {
          if (!DataUtil.isNull(this.taskModel.name)) {
            // 保存任务，数据持久化+后台代理提醒
            // TODO: 待完善，见后续篇章
            router.back()
          } else {
            promptAction.showToast({
              message: '任务名不能为空！',
              duration: 2000
            })
          }
        })
      }

      // 时间选择器
      DateSelector()

      // 任务设置项
      SettingList({
        settingItems: $taskSettingItems
      })

    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.grey_light'))
  }
  
  /**
   * 任务数据改变时回调
   */
  onTaskModelChangeHandler() {
    // 监听taskModel对象的变化，并做相应处理
    this.initData();
  }
  
  /**
   * 初始化数据
   */
  initData() {
    this.taskSettingItems = [
      new TaskSettingItem('任务名称', this.taskModel.name, TaskSettingType.TASK_NAME),
      new TaskSettingItem('任务时长', this.taskModel.duration + ' 分钟', TaskSettingType.TASK_DURATION)
    ];
  }

}