3. 日程提醒时间设置
@Builder
reminderTimeMenu() {
Column() {
ForEach(this.reminderTimeOption, (item: string, index: number) => {
Column() {
Flex({
direction: FlexDirection.Row,
justifyContent: FlexAlign.SpaceBetween,
alignItems: ItemAlign.Center
}) {
Text(item)
.fontSize($r('app.integer.calendar_switch_size_fifteen'))
Image($r('app.media.up'))
.visibility(this.reminderTimeIndex === index ? Visibility.Visible : Visibility.Hidden)
.width($r('app.integer.calendar_switch_size_twenty'))
.height($r('app.integer.calendar_switch_size_twenty'))
}
.height($r('app.integer.calendar_switch_size_forty_eight'))
Divider()
.visibility(index !== this.reminderTimeOption.length - 1 ? Visibility.Visible : Visibility.Hidden)
.width($r('app.string.calendar_switch_full_size'))
}
.width($r('app.integer.calendar_switch_size_ninety'))
.onClick(() => {
this.reminderTimeIndex = index;
switch (item) {
case '准时':
this.reminderTimeArray = [0];
break;
case '1分钟前':
this.reminderTimeArray = [1];
break;
case '5分钟前':
this.reminderTimeArray = [5];
break;
case '30分钟前':
this.reminderTimeArray = [30];
break;
case '1小时前':
this.reminderTimeArray = [60];
break;
}
})
}, (item: string) => item)
}
.borderRadius($r('app.integer.calendar_switch_size_ten'))
.width($r('app.integer.calendar_switch_size_hundred'))
.backgroundColor(Color.White)
.focusable(false)
}
@Builder
reminderTime() {
Row() {
Text($r('app.string.calendar_switch_reminder_time'))
.fontSize($r('app.integer.calendar_switch_size_sixteen'))
.fontColor(Color.Gray)
Blank()
Row() {
Text(this.reminderTimeOption[this.reminderTimeIndex])
.fontSize($r('app.integer.calendar_switch_size_fifteen'))
Image($r('app.media.down'))
.width($r('app.integer.calendar_switch_size_twenty_two'))
.height($r('app.integer.calendar_switch_size_sixteen'))
.margin({
left: $r('app.integer.calendar_switch_size_eight'),
right: $r('app.integer.calendar_switch_size_eight')
})
}
.bindMenu(this.reminderTimeMenu(), { placement: Placement.Top })
}
.width($r('app.string.calendar_switch_full_size'))
.height($r('app.integer.calendar_switch_size_forty_eight'))
.borderRadius($r('app.integer.calendar_switch_size_ten'))
.backgroundColor(Color.White)
.padding({
left: $r('app.integer.calendar_switch_size_sixteen'),
right: $r('app.integer.calendar_switch_size_sixteen')
})
}
- 功能：
reminderTimeMenu构建日程提醒时间的菜单选项，点击不同选项更新reminderTimeIndex和reminderTimeArray。reminderTime构建提醒时间设置项，绑定菜单。 - 代码段：
reminderTimeMenu和reminderTime方法内的代码。
4. 新建日程页面及保存逻辑
@Builder
addScheduleInfo() {
Column({ space: COLUMN_SPACE }) {
// ...
Text($r('app.string.calendar_switch_add'))
.fontSize($r('app.integer.calendar_switch_size_eighteen'))
.fontColor(this.title === '' ? Color.Gray : Color.Black)
.onClick(() => {
if (this.title === '') {
AlertDialog.show({
message: $r('app.string.calendar_switch_title_msg'),
alignment: DialogAlignment.Center
});
return;
}
if (this.startTime.getTime() >= this.endTime.getTime()) {
AlertDialog.show({
message: $r('app.string.calendar_switch_time_msg'),
alignment: DialogAlignment.Center
});
return;
}
const EVENT_NOT_REPEATED: calendarManager.Event = {
title: this.title,
location: { location: this.location },
type: calendarManager.EventType.NORMAL,
startTime: this.startTime.getTime(),
endTime: this.endTime.getTime(),
reminderTime: this.reminderTimeArray
};
this.calendar?.addEvent(EVENT_NOT_REPEATED).then((data: number) => {
hilog.info(0X0000,TAG, `Succeeded in adding event, id -> ${data}`);
}).catch((err: BusinessError) => {
hilog.error(0X0000,TAG, `Failed to addEvent. Code: ${err.code}, message: ${err.message}`);
});
const PARTS: string[] = this.scheduleStartTime.split(' ');
this.scheduleData.push(new ScheduleInfo(this.title, this.location, this.startTime,
this.endTime, this.describe, PARTS[0], this.reminderTimeArray));
this.addSchedule(this.startTime, this.endTime);
let options: preferences.Options = { name: 'mySchedule' };
this.dataPreferences = preferences.getPreferencesSync(this.context, options);
this.dataPreferences.putSync('schedule', this.scheduleData);
this.dataPreferences.flush();
this.isSystemAddShow = false;
promptAction.showToast({
message: $r('app.string.calendar_switch_add_system_completed')
});
})
// ...
}
}
- 功能：构建新建日程页面，包含日程标题、地点、时间、提醒时间等输入项。点击添加按钮时，验证输入信息，创建日程事件，将日程信息保存到本地，并更新
scheduleData和scheduleArray。 - 代码段：
addScheduleInfo方法内的代码。
总结
通过上述核心代码，我们在 HarmonyOS Next 中成功构建了一个日程提醒组件。该组件实现了权限申请、日历账户管理、日程时间范围处理、提醒时间设置以及日程的添加和持久化存储等功能。开发者可以根据实际需求，进一步扩展该组件，如添加日程编辑、删除功能，优化用户界面等，以满足更多办公场景的需求。
