【时间盒子】-【13.任务新建】创建新任务原创

与辉鸿蒙

发布于 2024-11-15 23:19

浏览

1收藏

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
一、预览
【时间盒子】-【13.任务新建】创建新任务-鸿蒙开发者社区
回顾【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);
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

定义一个属性变量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: 待完善
  }

}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.

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

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

1.
2.
3.
4.

四、任务设置项
我们在【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)
    ];
  }

}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.

五、其他文件更新的内容
string.json文件
代码如下：

{
  "name": "new_task",
  "value": "新建任务"
},
{
  "name": "update_task",
  "value": "修改任务"
}

1.
2.
3.
4.
5.
6.
7.
8.
9.

media目录
将附件icon_confirm.png添加到media目录中。
【时间盒子】-【13.任务新建】创建新任务-鸿蒙开发者社区
下一篇：任务编辑

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

标签

已于2025-1-8 11:10:10修改

51CTO

51CTO博客

51CTO学堂

【时间盒子】-【13.任务新建】创建新任务原创

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

【时间盒子】-【13.任务新建】创建新任务 原创

订阅鸿蒙技术特刊，精选内容抢先看

【时间盒子】-【13.任务新建】创建新任务原创