HarmonyOS：构建双模式计时器应用的实践 原创

// 定义自定义弹窗结构，用于设置倒计时时间
@CustomDialog
export struct TimerDialog {
  controller?: CustomDialogController;
  selectedTime: Date = initDate();
  currentFileName: string = 'TimerDialog';
  @State date: TimePickerResult | undefined = undefined;
  onConfirm: (date: TimePickerResult | undefined) => TimePickerResult | undefined = (date: TimePickerResult | undefined) => {
    return date;
  };
  onCancle: () => void = () => {};

  build() {
    Column() {
      Text('设置倒计时')
        .fontSize(24)
        .margin(30);
      TimePicker({
        selected: this.selectedTime, 
        format: TimePickerFormat.HOUR_MINUTE_SECOND
      })
        .useMilitaryTime(true)
        .onChange((date: TimePickerResult) => {
          this.date = date;
          console.info('select current date is: ' + JSON.stringify(date));
        });

      Row() {
        Button('确定')
          .padding({ left: 30, right: 30 })
          .onClick(() => {
            this.onConfirm(this.date);
          });
        Button('取消')
          .padding({ left: 30, right: 30 })
          .onClick(() => {
            this.onCancle();
          });
      }
      .width('100%')
      .margin(30)
      .justifyContent(FlexAlign.SpaceAround);
    }.width('100%');
  }
}

// 初始化日期函数，用于设置时间选择器的默认值
export function initDate(): Date {
  let date = new Date();
  date.setHours(0);
  date.setMinutes(0);
  date.setSeconds(0);

  return date;
}
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.

// 自定义弹窗的回调函数及相关参数
dialogController: CustomDialogController = new CustomDialogController({
  builder: TimerDialog({
    onConfirm: (date: TimePickerResult | undefined) => {
      this.dialogController.close();
      if (date) {
        this.millSeconds = date.hour * 3600000 + date.minute * 60000 + date.second * 1000;
      }
      return date;
    },
    onCancle: () => {
      animateTo({ duration: 200 }, () => {
        this.countMode = !this.countMode;
        this.dialogController.close();
      });
    }
  })
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

@Component
@Entry
export struct ClockDemo1 {
  textTimerController: TextTimerController = new TextTimerController();
  @State countMode: boolean = true;
  countUp: string = '正计时 => 倒计时';
  countDown: string = '倒计时 => 正计时';
  @State millSeconds: number = -1;
  dialogController: CustomDialogController = new CustomDialogController({
    builder: TimerDialog({
      onConfirm: (date: TimePickerResult | undefined) => {
        this.dialogController.close();
        if (date) {
          this.millSeconds = date.hour * 3600000 + date.minute * 60000 + date.second * 1000;
        }
        return date;
      },
      onCancle: () => {
        animateTo({ duration: 200 }, () => {
          this.countMode = !this.countMode;
          this.dialogController.close();
        });
      }
    })
  });

  build() {
    Column() {
      Text(this.countMode ? this.countUp : this.countDown)
        .fontColor(Color.Blue)
        .fontSize(28)
        .onClick(() => {
          this.countMode = !this.countMode;
          if (this.countMode) {
            this.textTimerController.reset();
          }
          if (!this.countMode) {
            this.millSeconds = 0;
            this.dialogController.open();
          }
        })
        .borderWidth({ bottom: 1 });

      Row() {
        if (this.countMode) {
          TextTimer({
            controller: this.textTimerController,
          })
            .fontSize(120)
            .format('HH:mm:ss');
        } else {
          TextTimer({
            controller: this.textTimerController,
            count: this.millSeconds,
            isCountDown: true
          })
            .fontSize(120)
            .format('HH:mm:ss');
        }
      }
      .borderWidth(1)
      .borderRadius(30);

      Row() {
        TextButton({ text: '启动' })
          .onClick(() => {
            this.textTimerController.start();
          });
        TextButton({ text: '暂停' })
          .onClick(() => {
            this.textTimerController.pause();
          });
        TextButton({ text: '重置' })
          .onClick(() => {
            this.textTimerController.reset();
          });
      }
      .width('50%')
      .justifyContent(FlexAlign.SpaceEvenly);
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceEvenly);
  }
}

@Component
struct TextButton {
  text: string = '文本按钮';

  build() {
    Row() {
      Text(this.text)
        .margin(5);
    }
    .borderWidth(1)
    .width(80)
    .borderRadius(100)
    .justifyContent(FlexAlign.Center)
    .alignItems(VerticalAlign.Center);
  }
}
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.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.