1.引言
在人们的日常生活中，很常见的会使用闹钟以及始终软件来查看时间。我想那使用一个闹钟软件便是一个非常好用的工具，平时我也经常使用闹钟软件来定个时间，或者偶尔看个时间，于是我就有了个灵感来做个鸿蒙方面的闹钟软件，这也是我做者人格项目的灵感来源。
2.项目背景
在现代快节奏的生活中，时间管理变得愈发重要。人们需要一种简单而有效的方式来提醒自己各种重要的事件和任务。为了满足这个需求，我们计划设计并开发一款全新的闹钟应用。
- 个性化提醒： 不同人有不同的生活习惯和作息时间，我们的闹钟应用将提供个性化的设置，以适应用户的日常生活。
- 轻松操作： 用户界面将设计得简洁直观，使用户能够轻松设置和管理闹钟，而不需要花费过多时间和精力。
- 提高生产力： 通过帮助用户更好地管理时间，我们的目标是提高用户的工 作和生活效率。
- 创造愉悦的用户体验： 我们致力于打造一款操作简便、功能丰富且令人 愉悦的应用，让用户在使用中感受到方便和乐趣。
随着生活压力的增加，人们对时间管理工具的需求正在不断增加。我们相 信，设计一款符合用户需求的高效闹钟应用将具有广泛的市场潜力。我们计划采用最新的技术和设计理念，为用户提供卓越的体验。通过整合先进的人工智能和用户界面设计，我们将在竞争激烈的市场中脱颖而出。我们已经进行了初步的市场调查和用户反馈收集，发现现有的闹钟应用在某些方面存在不足。通过分析用户的需求和痛点，我们有信心设计一款更符合用户期望的应用。通过这个项目，我们希望为用户提供一种更智能、更个性化的时间管理方式，帮助他们更好地平衡工作和生活，提高生活质量。
3.项目框架
本项目主要实现功能有：
闹钟
世界时钟
秒表
计时器（1）CLOCK stopwatch
主要代码：
import { CommonConstants } from '../common/constant/CommonConstants';
import { TimerConstants } from '../common/constant/TimerConstants';
import DimensionUtil from '../common/util/DimensionUtils';
import HeaderContainer from '../view/HeaderContainer';
import MyTimePicker from '../view/Timer/MyTimePicker';
import TimerComponent from '../view/Timer/TimerComponent';
@Component
export default struct TimerPage {
// startOrPauseImage 按钮图标
@State startOrPauseImage: Resource = $r('app.media.ic_play');
// 表示计时器状态，0 - 已重置 1 - 计时中 2 - 暂停中
@State @Watch('onStateChange') state: number = 0;
// buttonScale 和 buttonScale2 用于按钮动画
@State buttonScale: number = 1;
@State buttonScale2: number = 1;
// 状态变量 count 表示倒计时的时间（毫秒）
@State count: number = CommonConstants.MILLISECONDS_PER_MINUTE;
// 创建 TextTimerController 对象，用于控制计时器
private textTimerController: TextTimerController = new TextTimerController();
// 监听计时器状态变化
onStateChange() {
switch (this.state) {
case 0:
this.textTimerController.reset();
this.startOrPauseImage = $r('app.media.ic_play');
break;
case 1:
this.textTimerController.start();
this.startOrPauseImage = $r('app.media.ic_pause');
break;
case 2:
this.textTimerController.pause();
this.startOrPauseImage = $r('app.media.ic_play');
break;
}
}
// 计时结束回调函数
private onCountOver = () => {
animateTo({
duration: CommonConstants.ANIMATION_SHORT_DURATION,
tempo: 1,
playMode: PlayMode.Normal,
}, () => {
this.state = 0;
});
}
// 构建页面内容
build() {
Column() {
HeaderContainer({ title: TimerConstants.TIMER });
if (this.state === 0) {
MyTimePicker({ count: $count })
.transition({ type: TransitionType.All, opacity: 0, scale: { x: 0, y: 0 } });
} else {
TimerComponent({
textTimerController: this.textTimerController,
count: this.count,
onCountOver: this.onCountOver
}).transition({ type: TransitionType.All, opacity: 0, scale: { x: 0, y: 0 } });
}
Row() {
if (this.state != 0) {
Button() {
Image($r('app.media.ic_reset')).objectFit(ImageFit.Fill);
}
.backgroundColor($r('app.color.trans_parent'))
.height(DimensionUtil.getVp($r('app.float.play_button_size')))
.width(DimensionUtil.getVp($r('app.float.play_button_size')))
.stateEffect(false)
.type(ButtonType.Circle)
.scale({ x: this.buttonScale2, y: this.buttonScale2 })
.padding(DimensionUtil.getVp($r('app.float.play_button_size')) / 4)
.border({ width: 2, color: $r('app.color.grey_light') })
.animation({ duration: CommonConstants.ANIMATION_SHORT_DURATION,
tempo: 2,
playMode: PlayMode.Normal,
onFinish: () => this.buttonScale2 = 1 })
.transition({ type: TransitionType.All, translate: { x: 50 }, opacity: 0 })
.onClick(() => {
// 缩放按钮动画
this.buttonScale2 = 0.95;
animateTo({
duration: CommonConstants.ANIMATION_SHORT_DURATION,
tempo: 1,
playMode: PlayMode.Normal,
}, () => {
this.state = 0;
});
});
}
Button() {
Image(this.startOrPauseImage).objectFit(ImageFit.Fill)
.align(Alignment.Center);
}
.enabled(this.state != 0 || this.count > 0)
.backgroundColor($r('app.color.red_light'))
.height(DimensionUtil.getVp($r('app.float.play_button_size')))
.width(DimensionUtil.getVp($r('app.float.play_button_size')))
.scale({ x: this.buttonScale, y: this.buttonScale })
.padding(DimensionUtil.getVp($r('app.float.play_button_size')) / 4)
.animation({ duration: CommonConstants.ANIMATION_SHORT_DURATION,
tempo: 2,
playMode: PlayMode.Normal,
onFinish: () => this.buttonScale = 1 })
.stateEffect(false)
.type(ButtonType.Circle)
.onClick(() => {
// 缩放按钮动画
this.buttonScale = 0.95;
animateTo({
duration: CommonConstants.ANIMATION_SHORT_DURATION,
tempo: 1,
playMode: PlayMode.Normal,
}, () => {
if (this.state === 1) {
this.state = 2;
} else {
this.state = 1;
}
});
});
}.padding(DimensionUtil.getVp($r('app.float.title_horizon_margin')))
.width(CommonConstants.FULL_LENGTH)
.justifyContent(FlexAlign.SpaceAround);
}.justifyContent(FlexAlign.SpaceBetween)
.width(CommonConstants.FULL_LENGTH)
.height(CommonConstants.FULL_LENGTH);
}
}（2）ALARMCLOCK
主要代码：
import router from '@ohos.router';
import { CommonConstants } from '../common/constant/CommonConstants';
import AlarmItem from '../viewmodel/AlarmItem';
import { AlarmClockConstants } from '../common/constant/AlarmClockConstants';
import AlarmClockViewModel from '../viewmodel/AlarmClockViewModel';
import AlarmList from '../view/AlarmClock/AlarmList';
import DimensionUtil from '../common/util/DimensionUtils';
import HeaderContainer from '../view/HeaderContainer';
import { findNearestAlarmTime } from '../common/util/AlarmClockUtils';
import NearestAlarmTime from '../view/AlarmClock/NearestAlarmTime';
/**
* 闹钟页面。
*/
@Component
export default struct AlarmClockPage {
// 用于定时刷新最近的闹钟时间的定时器ID
private intervalId: number = CommonConstants.DEFAULT_NUMBER_NEGATIVE;
// 闹钟模型，用于管理和查询闹钟数据
private alarmClockModel: AlarmClockViewModel = AlarmClockViewModel.instant;
// 存储闹钟列表数据的状态
@State alarmItems: Array<AlarmItem> = new Array();
// 存储最近的闹钟时间的状态
@State nearestAlarmTime: {
days: number,
hours: number,
minutes: number
} = null;
// 在页面即将显示时触发的生命周期函数
aboutToAppear() {
// 查询闹钟数据
this.alarmClockModel.queryAlarmsTasker((alarms: Array<AlarmItem>) => {
this.alarmClockModel.disableExpiredReminders();
// 将查询到的数据赋值给 alarmItems 和 nearestAlarmTime
animateTo({ duration: CommonConstants.ANIMATION_MEDIUM_DURATION }, () => {
this.alarmItems = alarms;
this.nearestAlarmTime = findNearestAlarmTime(this.alarmItems);
// 如果最近的闹钟时间为0，则默认设置为1分钟
if (this.nearestAlarmTime && this.nearestAlarmTime.days === 0 && this.nearestAlarmTime.hours === 0 && this.nearestAlarmTime.minutes === 0) {
this.nearestAlarmTime.minutes = 1;
}
});
});
// 设置定时器，定时刷新最近的闹钟时间并禁用过期的闹钟
this.intervalId = setInterval(() => {
this.nearestAlarmTime = findNearestAlarmTime(this.alarmItems);
// 如果最近的闹钟时间为0，则默认设置为1分钟
if (this.nearestAlarmTime && this.nearestAlarmTime.days === 0 && this.nearestAlarmTime.hours === 0 && this.nearestAlarmTime.minutes === 0) {
this.nearestAlarmTime.minutes = 1;
}
this.alarmClockModel.disableExpiredReminders();
}, AlarmClockConstants.DEFAULT_ONE_SECOND_MS);
}
// 在页面即将消失时触发的生命周期函数
aboutToDisappear() {
// 清除定时器
clearInterval(this.intervalId);
}
// 构建页面内容
build() {
Column() {
// 顶部容器，包括标题和添加闹钟按钮
HeaderContainer({ title: AlarmClockConstants.DEFAULT_STRING_ALARM }) {
// 添加闹钟按钮
Button() {
Image($r('app.media.ic_add')).objectFit(ImageFit.Fill);
}
.stateEffect(false)
.backgroundColor($r('app.color.trans_parent'))
.width(DimensionUtil.getVp($r('app.float.new_alarm_button_size')))
.height(DimensionUtil.getVp($r('app.float.new_alarm_button_size')))
.onClick(() => {
// 点击按钮跳转到添加闹钟页面
router.pushUrl({ url: 'pages/DetailPage' });
});
}
// 显示最近的闹钟时间的组件
NearestAlarmTime({ nearestAlarmTime: $nearestAlarmTime });
// 闹钟列表组件，显示用户添加的闹钟项
AlarmList({ alarmItems: $alarmItems });
}
.width(CommonConstants.FULL_LENGTH)
.height(CommonConstants.FULL_LENGTH)
.backgroundColor($r('app.color.grey_light'));
}
}四.项目总结
本项目还只是处于开发的初级阶段，主要还是用前端实现的，还有很大的不足和需要改进的地方。鸿蒙系统作为咱们第一个国产操作系统，其发展的艰辛可想而知，总的来说，国产操作系统这条路任重而道远，希望有更多的同学能投入到这里面来，为国产操作系统贡献自己的一份力量。