【时间盒子】-【12.任务时长弹窗】设置/修改任务时长

Tips:

（参考上一篇）

一、预览

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

二、任务时长选项TASK_DURATION

在目录constants下的DetailConstant.ets类中定义一个静态常量TASK_DURATION：任务时长选项数组15分钟~120分钟。代码如下：

/**
 * 任务时长
 */
static readonly TASK_DURATION: number[] = [15, 30, 45, 60, 90, 120];

三、DurationDialog组件

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

页面采用Flex布局，任务名称输入框对应TaskModel对象的duration属性。duration有值时对应的选项被选中，所选项修改后的内容赋值给属性duration。代码如下：

/**
 * 持续时间弹窗
 */
import { DetailConstant } from '../../constants/DetailConstant';
import SizeUtil from '../../utils/SizeUtil';
import TaskModel from '../../viewmodel/TaskModel';
import CommonDialog from './CommonDialog';

@CustomDialog
export default struct DurationDialog {
  @Consume taskModel: TaskModel; // 任务数据实体对象
  private durations: Array<number> = DetailConstant.TASK_DURATION; // 任务时长选项的数组
  private duration: number; // 被选中的任务时长
  controller: CustomDialogController = new CustomDialogController({
    builder: DurationDialog(),
    autoCancel: true
  });

  build() {
    Flex() {
      CommonDialog({
        title: $r('app.string.task_duration'),
        controller: this.controller,
        onConfirm: () => {
          this.taskModel.duration = this.duration;
        }
      }) {
        ForEach(this.durations, (item: number) => {
          Row() {
            // 选项内容
            Text(`${item} 分钟`)
              .fontColor($r('app.color.grey_divider'))
              .fontSize(SizeUtil.getFp($r('app.float.duration_dialog_content_font_size')))
              .layoutWeight(1)

            // 单选按钮
            Radio({
              value: item.toString(),
              group: 'radioGroup'
            })
              .width(SizeUtil.getVp($r('app.float.duration_dialog_radio_size')))
              .height(SizeUtil.getVp($r('app.float.duration_dialog_radio_size')))
              .checked(item === this.taskModel.duration ? true : false)
              .onChange(() => {
                this.duration = item;
              })
          }
          .width('100%')

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

 

四、任务设置项类型TaskSettingType

新建任务设置项类型的枚举常量对象，右击目录constant >> 新建 >> ArkTS File，文件命名为TaskSettingType。

分别定义0表示任务名称类型TASK_NAME，1表示任务时长类型TASK_DURATION，代码如下：

/**
 * 任务设置类型
 */
export enum TaskSettingType {
  /**
   * 任务名称
   */
  TASK_NAME = 0,
  /**
   * 任务时长
   */
  TASK_DURATION = 1

}

五、完善任务设置项列表组件SettingList

在目录component/SettingList.ets组件中增加任务项点击事件showSettingDialog：弹出对应的设置弹窗。点击任务名称弹窗RenameDialog，点击任务时长弹出DurationDialog。新增的代码如下：

import DurationDialog from './dialog/DurationDialog';
import RenameDialog from './dialog/RenameDialog';
import { TaskSettingType } from '../constants/TaskSettingType';

/**
 * 显示设置对话框
 * @param settingType
 */
private showSettingDialog(settingType: TaskSettingType) {
  switch (settingType) {
  // 弹窗设置任务名对话框
    case TaskSettingType.TASK_NAME:
      this.renameDialogController.open();
      break;

  // 弹窗设置任务时长对话框
    case TaskSettingType.TASK_DURATION:
      this.durationDialogController.open();
      break;
    default:
      break;
  }
}

六、其他文件更新的内容

string.json文件

代码如下：

{
  "name": "task_duration",
  "value": "任务时长"
}

float.json文件

代码如下：

{
  "name": "duration_dialog_content_font_size",
  "value": "14"
},
{
  "name": "duration_dialog_radio_size",
  "value": "20"
}

下一篇：初始化任务页面