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

在硬件工程领域，我们追求的是精确和效率。今天，我将我的专业技能应用于软件开发，成功开发了一个具备正计时和倒计时功能的计时器应用。这个过程中，我深刻体会到了技术设计的精妙之处，即使是简单的代码也能实现强大的功能。

正计时功能

就像篮球比赛中的计时器一样，虽然它在后台默默工作，但它的存在不可或缺。想象你是一位篮球运动员，在每一次训练和比赛中，正计时器记录着你的每一滴汗水，它是你努力付出的见证。

倒计时功能

则是时间管理中的关键工具。想象你站在百米赛跑的起跑线上，倒计时器就像是你心中的发令枪，它提醒你每一刻的重要性和紧迫性。设置一个倒计时，它会在关键时刻响起，确保你能够从容不迫地完成热身，并在枪响的那一刻爆发出全部的力量。

在构建这个计时器时，我们采用了HarmonyOS NEXT的TextTimer组件，它的流畅性让我们的开发过程如鱼得水。以下是我对这次开发的一些心得体会：

正计时器的开发，就像是球场上的即兴表演，快速而直接。用户通过简洁的界面操作，就能轻松管理时间的流逝，让每一秒都变得可控。

倒计时器的开发，则像是精心编排的赛事策略，每一个细节都至关重要。用户可以自定义倒计时的时间，当倒计时结束时，计时器会自动发出提醒，确保用户不会错过任何一个关键时刻。我们不断优化这一功能，力求在用户的每一次使用中，都能感受到便捷与完美。

代码实现与注释

自定义封装弹窗

// 定义自定义弹窗结构，用于设置倒计时时间
@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;
}

ArkTS 交互逻辑

// 自定义弹窗的回调函数及相关参数
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();
      });
    }
  })
})

通过触发弹窗的 open() 方法，我们展示了弹窗界面供用户进行选择。一旦用户选择了日期，我们便可以利用回调函数来执行毫秒级的换算操作，进而更新 TextTimer 倒计时组件，确保其显示与用户所选日期同步。

核心UI结构

@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. 用户界面优化：为了提供最佳的用户体验，我们对UI进行了多次迭代，包括调整字体大小、颜色和按钮布局。我们的目标是使界面既美观又实用。

3. 响应速度提升：我们对应用的响应速度进行了优化，确保用户在点击按钮时能够立即看到反馈。这包括减少渲染时间和优化事件处理流程。

设计理念探讨

在设计计时器应用时，我们遵循了简约而不简单的设计理念。我们相信，一个好的应用应该能够在不牺牲功能性的前提下，提供简洁直观的操作界面。以下是我们的一些设计原则：

1. 直观性：我们的设计目标是让用户能够一目了然地理解应用的功能。因此，我们避免了复杂的菜单和按钮，而是采用了直观的图标和标签。

2. 可用性：我们确保应用的每个功能都能够轻松访问和使用。这包括为按钮添加足够的点击区域，以及确保文本的可读性。

3. 美观性：虽然简约，但我们也没有忽视应用的美观性。我们选择了和谐的颜色方案，并使用了现代的字体和图标，以提升应用的整体外观。

未来发展方向

展望未来，我们计划为计时器应用添加更多功能，以满足用户的多样化需求。以下是我们计划的一些新功能：

1. 多时区支持：我们将添加对多个时区的支持，使用户能够在不同地区之间轻松切换。

2. 语音控制：我们计划集成语音控制功能，让用户能够通过语音命令来控制计时器。

3. 数据同步：我们将实现数据同步功能，让用户能够在多个设备之间同步他们的计时数据。

我们相信，通过不断的创新和改进，我们的计时器应用将成为用户日常生活中不可或缺的工具。