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

与辉鸿蒙

发布于 2024-11-15 23:13

浏览

1收藏

Tips:
（参考上一篇）
一、预览
【时间盒子】-【12.任务时长弹窗】设置/修改任务时长-鸿蒙开发者社区

任务时长弹窗是一个组件，使用了第10篇我们自定义的弹窗。
任务时长选项、分割线是嵌入在自定义弹窗的内容；而窗体顶部的标题、底部的按钮是自定义弹窗原有的元素，可通过传入参数设置标题、按钮文本及按钮点击事件。
二、任务时长选项TASK_DURATION
在目录constants下的DetailConstant.ets类中定义一个静态常量TASK_DURATION：任务时长选项数组15分钟~120分钟。代码如下：

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

1.
2.
3.
4.
5.

三、DurationDialog组件
右击目录dialog >> 新建 >> ArkTS File，文件命名为DurationDialog。
【时间盒子】-【12.任务时长弹窗】设置/修改任务时长-鸿蒙开发者社区
页面采用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'))
        })
      }
    }
  }
}

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.

四、任务设置项类型TaskSettingType
新建任务设置项类型的枚举常量对象，右击目录constant >> 新建 >> ArkTS File，文件命名为TaskSettingType。
【时间盒子】-【12.任务时长弹窗】设置/修改任务时长-鸿蒙开发者社区
分别定义0表示任务名称类型TASK_NAME，1表示任务时长类型TASK_DURATION，代码如下：

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

}

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

五、完善任务设置项列表组件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;
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

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

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

1.
2.
3.
4.
5.

float.json文件
代码如下：

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

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

下一篇：初始化任务页面

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

分类

标签

已于2025-1-8 11:09:33修改