【时间盒子】-【11.任务名称弹窗】

Tips:

@Consume：应用于与后代组件的双向数据同步，应用于状态数据在多个层级之间传递的场景。请参考官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-provide-and-consume-0000001820879589

@ohos.reminderAgentManager：后台提醒代理。请参考官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-reminderagentmanager-V5#reminderagentmanagerpublishreminder

Flex布局：请参考官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-flex-layout-V5

一、预览

任务名称弹窗是一个组件，使用了上一篇我们自定义的弹窗。 任务名称输入框、分割线是嵌入在自定义弹窗的内容；而窗体顶部的标题、底部的按钮是自定义弹窗原有的元素，可通过传入参数设置标题、按钮文本及按钮点击事件。

二、ReminderObj实体对象

我们需要知道两个对象，分别是系统后台提醒代理对象和任务对象。添加的任务是否需要后台提醒、以什么方式提醒、提醒间隔时间、每次提醒持续的时长？这些都交给后台提醒代理去完成。

右击目录viewmodel >> 新建 >> ArkTS File，文件命名为ReminderObj。

给代理对象定义属性，代码如下： 

import reminderAgentManager from '@ohos.reminderAgentManager';
/**
 * 后台提醒代理对象
 */
export default class ReminderObj {
  /**
   * 提醒ID
   */
  id: number = 0;
  /**
   * 提醒名称
   */
  name: string = '';
  /**
   * 提醒时间，小时
   */
  hour: number = 0;
  /**
   * 提醒时间，分钟
   */
  minute: number = 0;
  /**
   * 任务时长
   */
  duration: number = 0;
  /**
   * 提醒类型
   */
  remindType: reminderAgentManager.ReminderType = reminderAgentManager.ReminderType.REMINDER_TYPE_ALARM;
  /**
   * 通知ID
   */
  notificationId:number = 0;
}

三、TaskModel实体对象

创建任务对象，右击目录viewmodel >> 新建 >> ArkTS File，文件命名为TaskModel。

TaskModel对象继承提醒代理对象ReminderObj，并定义任务名称、任务时长、是否提醒开关等属性。代码如下：

import ReminderObj from './ReminderObj';
/**
 * 任务实体对象
 */
@Observed export default class TaskModel extends ReminderObj {
  name = '';
  isOpen: boolean = true;
  duration: number = 15; // 任务时长默认为15分钟
}

四、RenameDialog组件

右击目录dialog >> 新建 >> ArkTS File，文件命名为RenameDialog。

页面采用Flex布局，任务名称输入框对应TaskModel对象的name属性。name有值时在输入框显示，输入修改后的内容赋值给name。代码如下：

import SizeUtil from '../../utils/SizeUtil';
import TaskModel from '../../viewmodel/TaskModel';
import CommonDialog from './CommonDialog';

/**
 * 重命名弹窗
 */
@CustomDialog
export default struct RenameDialog {
  @Consume taskModel: TaskModel;
  private name: string = '';
  controller: CustomDialogController = new CustomDialogController({
    builder: RenameDialog(),
    autoCancel: true
  });

  build() {
    Flex() {
      CommonDialog({
        title: $r('app.string.task_name'),
        controller: this.controller,
        onConfirm: () => {
          this.taskModel.name = this.name
        }
      }) {
        // 输入框
        TextArea({ text: this.taskModel.name, placeholder: $r('app.string.task_name_placeholder') })
          .width('100%')
          .margin({ bottom: SizeUtil.getVp($r('app.float.rename_dialog_text_margin_bottom')) })
          .onChange((value: string) => {
            this.name = value.trim();
          })

        // 分割线
        Divider()
          .color($r('app.color.grey_divider'))
          .lineCap(LineCapStyle.Round)
          .opacity($r('app.float.divider_opacity'))
      }
    }
  }

}

五、其他文件更新的内容

string.json文件

代码如下：

{
  "name": "task_name",
  "value": "任务名称"
},
{
  "name": "task_name_placeholder",
  "value": "请输入"
}

float.json文件

代码如下：

{
  "name": "rename_dialog_text_margin_bottom",
  "value": "20"
}

下一篇：任务时长弹窗