【时间盒子】-【14.任务编辑】修改删除任务

Tips：

aboutToAppear：页面生命周期。请参考官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-page-custom-components-lifecycle-0000001820879573

Blank()：空白填充组件。请参考官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-blank-0000001815767768

一、预览

点击某个任务时，进入当前Detail.ets页面对该任务进行修改或删除。

判断isNew的值是false，标题文本显示为“修改任务”。
根据页面传值任务对象，赋值给TaskModel，并将对象的属性值显示在对应的任务时间、任务名称、任务时长。
编辑时，页面底部显示“删除”按钮，对该任务进行删除操作。

二、DetailController控制器

需要定义一个类DetailController，用于处理任务新增/编辑页面的业务逻辑。比如，接收到页面传值时，需要给时间选择器赋值。

在ets目录下创建新目录controllers，右击目录controllers >> 新建 >> ArkTS File，文件命名为DetailController。

定义一个方法setTaskDefaultTime设置任务的时间，DetailController.ets文件代码如下：

import { DetailConstant } from '../constants/DetailConstant';
import TaskModel from '../viewmodel/TaskModel';
export default class DetailController {
  static instant: DetailController = new DetailController();
  private constructor() {
    // TODO:
  }

  /**
   * 设置任务的默认时间
   */
  public setTaskDefaultTime(task?: TaskModel) {
    let hour, minute: number;
    if (task == null) {
      let date = new Date();
      hour = date.getHours();
      minute = date.getMinutes();
    } else {
      hour = task.hour;
      minute = task.minute;
    }
    DetailConstant.DAY_DATA[0].delSelect = (hour >= 12 ? 1 : 0); // 超过12点，默认选中下午
    DetailConstant.DAY_DATA[1].delSelect = (hour === 0 ? 12 : (hour > 12 ? hour - 12 : hour)) - 1; // 时，十二小时制
    DetailConstant.DAY_DATA[2].delSelect = (minute === 0 ? 60 : minute) - 1; // 分
  }

}

三、router页面传值

接收到页面的传值是一个任务对象TaskModel，解析该对象的属性值并在页面对应的任务时间、任务名称、任务时长中显示。

在页面即将出现时aboutToAppear()生命周期函数中，接收页面传值过来的参数。DetailController.ets文件代码增加如下：

private taskController: DetailController = DetailController.instant;
aboutToAppear() {
  let params = router.getParams() as Record<string, Object | undefined>;
  if (params !== undefined) {
    // 从页面参数中获取任务对象，并赋值
    let pTask: TaskModel = params.taskItem as TaskModel;
    if (pTask !== undefined) {
      this.isNew = false;
      this.taskModel = pTask;
      this.taskController.setTaskDefaultTime(this.taskModel);
    } else {
      this.taskController.setTaskDefaultTime();
    }
  } else {
    this.taskController.setTaskDefaultTime();
  }
  this.initData();
}

四、任务删除按钮

任务编辑时，在页面底部显示“删除”按钮。页面布局是纵向布局，删除按钮保持在页面底部位置，在删除按钮上方，添加一个Blank空白组件，自动填充布局空余部分。删除任务的同时，记得移除后台代理中的任务提醒（见后续篇章）DetailController.ets文件代码增加如下：

// 空白
Blank()

// 删除按钮
Button($r('app.string.delete'))
  .visibility(this.isNew ? Visibility.None : Visibility.Visible) // 新增任务时，不显示删除按钮
  .width(SizeUtil.getVp($r('app.float.delete_button_width')))
  .height(SizeUtil.getVp($r('app.float.delete_button_height')))
  .fontSize(SizeUtil.getFp($r('app.float.delete_button_font_size')))
  .fontColor($r('app.color.red_light'))
  .backgroundColor($r('app.color.grey_with_opacity'))
  .borderRadius(SizeUtil.getVp($r('app.float.delete_button_radius')))
  .margin({
    bottom: SizeUtil.getVp($r('app.float.delete_button_margin_bottom'))
  })
  .onClick(() => {
    // 删除任务的同时，记得移除后台代理中的任务提醒
    // TODO：待完善，见后续篇章
    router.back();
  })

五、其他文件更新的内容

string.json文件

代码如下：

{
  "name": "delete",
  "value": "删除"
}

float.json文件

代码如下：

{
  "name": "delete_button_width",
  "value": "120"
},
{
  "name": "delete_button_height",
  "value": "40"
},
{
  "name": "delete_button_font_size",
  "value": "16"
},
{
  "name": "delete_button_radius",
  "value": "20"
},
{
  "name": "delete_button_margin_bottom",
  "value": "24"
}

color.json文件

代码如下：

{
  "name": "red_light",
  "value": "#FA2A2D"
},
{
  "name": "grey_with_opacity",
  "value": "#0C182431"
}

下一篇：任务保持本地，数据持久化