各大网站的软文怎么做,网页设计入门图片,wordpress护肤品,网站被收录后又被提出了闹钟功能要求
展示指针表盘或数字时间。添加、修改和删除闹钟。展示闹钟列表#xff0c;并可打开和关闭单个闹钟。闹钟到设定的时间后弹出提醒。将闹钟的定时数据保存到轻量级数据库。
闹钟主界面
闹钟界面包括当前时间、闹钟列表、添加闹钟子组件#xff0c;具体包括以下…闹钟功能要求
展示指针表盘或数字时间。添加、修改和删除闹钟。展示闹钟列表并可打开和关闭单个闹钟。闹钟到设定的时间后弹出提醒。将闹钟的定时数据保存到轻量级数据库。
闹钟主界面
闹钟界面包括当前时间、闹钟列表、添加闹钟子组件具体包括以下模块
展示当前时间。展示闹钟列表。添加闹钟。后台代理提醒。 展示当前时间
当前时间使用了Canvas组件绘制默认展示指针表盘点击表盘区域切换为数字时钟。效果如图所示 在主页的ClockArea组件中初始化Canvas画布并绑定指针表盘和数字时钟切换事件。
// ClockArea.ets
Component
export default struct ClockArea {build() {Canvas(this.renderContext).width(this.canvasSize).aspectRatio(CommonConstants.DEFAULT_LAYOUT_WEIGHT).onReady(() {if (this.drawInterval CommonConstants.DEFAULT_NUMBER_NEGATIVE) {// 启动绘画任务 this.startDrawTask();}}).onClick(() {this.showClock !this.showClock;})}...// 启动绘画任务private startDrawTask() {let that this;that.renderContext.translate(this.canvasSize / CommonConstants.DEFAULT_DOUBLE,this.canvasSize / CommonConstants.DEFAULT_DOUBLE);that.drawClockArea();this.drawInterval setInterval(() {that.drawClockArea();}, MainConstant.DEFAULT_ONE_SECOND_MS);}
}绘画任务是使用CanvasRenderingContext2D对象在Canvas画布组件上绘制指针表盘和数字时钟。
// ClockArea.ets
// 开始绘制时钟区域
private drawClockArea(): void {this.renderContext.clearRect(-this.canvasSize,-this.canvasSize / CommonConstants.DEFAULT_DOUBLE,this.canvasSize * CommonConstants.DEFAULT_DOUBLE,this.canvasSize);let date new Date();let hours date.getHours();let minutes date.getMinutes();let seconds date.getSeconds();if (this.showClock) {// 绘制表盘时钟...} else {// 绘制数字时钟...}
}展示闹钟列表
展示已添加的闹钟信息可对闹钟进行启停操作点击闹钟可跳转到闹钟操作界面修改和删除闹钟。主页启动后获取轻量级数据库中的闹钟定时数据并监控数据库数据变化。
// MainViewModel.ets
public queryAlarmsTasker(callback: (alarms: ArrayAlarmItem) void) {let that this;that.queryDatabaseAlarms(callback);let preference GlobalContext.getContext().getObject(preference) as PreferencesHandler;preference.addPreferencesListener({onDataChanged() {that.queryDatabaseAlarms(callback);}} as PreferencesListener)
}在AlarmList.ets中添加闹钟列表子组件并绑定启停、跳转事件。
// AlarmList.ets
Component
export default struct AlarmList {Link alarmItems: ArrayAlarmItem;build() {List({ space: DimensionUtil.getVp($r(app.float.alarm_list_space)) }) {ForEach(this.alarmItems, (item: AlarmItem) {ListItem() {AlarmListItem({ alarmItem: item })}.onClick(() {router.pushUrl({ url: pages/DetailIndex, params: { alarmItem: item } });})}, (item: AlarmItem) JSON.stringify(item))}.padding({left: DimensionUtil.getVp($r(app.float.alarm_list_content_distance)),right: DimensionUtil.getVp($r(app.float.alarm_list_content_distance))}).listDirection(Axis.Vertical).layoutWeight(CommonConstants.DEFAULT_LAYOUT_WEIGHT).margin({ top: DimensionUtil.getVp($r(app.float.alarm_list_content_distance)) })}
}添加闹钟
点击界面底部闹钟添加按钮跳转到闹钟操作界面新增闹钟。效果如图所示 在MainIndex.ets中为添加按钮绑定跳转事件。
// MainIndex.ets
Entry
Component
struct MainIndex {...build() {Column() {...Button() {Image($r(app.media.ic_add)).objectFit(ImageFit.Fill)}....onClick(() {router.pushUrl({ url: pages/DetailIndex });})}...}
}后台代理提醒
根据闹钟列表中的数据来设置启停闹钟实例。
// MainViewModel.ets
// 开启/关闭闹钟
public openAlarm(id: number, isOpen: boolean) {for (let i 0; i this.alarms.length; i) {if (this.alarms[i].id id) {this.alarms[i].isOpen isOpen;if (isOpen) {this.reminderService.addReminder(this.alarms[i]);} else {this.reminderService.deleteReminder(this.alarms[i].id);}let preference GlobalContext.getContext().getObject(preference) as PreferencesHandler;preference.set(CommonConstants.ALARM_KEY, JSON.stringify(this.alarms));break;}}
}闹钟详情界面
闹钟操作界面分为新增和修改界面其中在修改界面可删除闹钟。具体包括以下模块
退出或保存详情。设置闹钟时间。设置闹钟详情。提供后台代理提醒能力 退出或保存详情
点击左上角“x”图标关闭操作界面关闭闹钟操作界面子组件点击右上角“√”图标保存当前设置并关闭操作界面。 在DetailIndex.ets入口页面中引入头部组件BackContainer自定义了返回按钮和返回逻辑操作添加确定“√”子组件并绑定点击事件。
// BackContainer.ets
build() {Row() {Button() {Image(this.backImgRes null ? $r(app.media.ic_public_back) : this.backImgRes).objectFit(ImageFit.Fill)}.backgroundColor($r(app.color.trans_parent)).width(DimensionUtil.getVp($r(app.float.title_button_size))).height(DimensionUtil.getVp($r(app.float.title_button_size))).onClick(() {this.backFunc ? this.backFunc() : router.back();})Text(this.header).fontSize(DimensionUtil.getFp($r(app.float.detail_title_font_size))).lineHeight(DimensionUtil.getVp($r(app.float.title_line_height))).margin({ left: DimensionUtil.getVp($r(app.float.title_margin)) }).fontColor($r(app.color.grey_divider)).fontWeight(FontWeight.Bold)Blank()if (this.closer) {this.closer();}}.padding({left: DimensionUtil.getVp($r(app.float.title_horizon_margin)),right: DimensionUtil.getVp($r(app.float.title_horizon_margin))}).height(DimensionUtil.getVp($r(app.float.page_title_height))).width(CommonConstants.FULL_LENGTH)
}设置闹钟时间
设置闹钟提醒时间在闹钟操作界面可通过滑动选择器设置闹钟的提醒时间包括时段、小时、分钟。详情页DetailIndex.ets中添加闹钟时间选择器子组件DatePickArea.ets。
// DatePickArea.ets
Component
export default struct DatePickArea {build() {Stack({ alignContent: Alignment.Center }) {Row() {ForEach(DetailConstant.DAY_DATA, (item: DayDataItem) {TextPicker({ range: item.data, selected: item.delSelect }).layoutWeight(CommonConstants.DEFAULT_LAYOUT_WEIGHT).backgroundColor($r(app.color.grey_light)).onChange((value: string, index: number) {item.delSelect index;})}, (item: DayDataItem) JSON.stringify(item))}}.height(DimensionUtil.getVp($r(app.float.date_picker_height))).padding({left: DimensionUtil.getVp($r(app.float.date_picker_padding_horizon)),right: DimensionUtil.getVp($r(app.float.date_picker_padding_horizon))})}
}设置闹钟时间
设置闹钟提醒时间在闹钟操作界面可通过滑动选择器设置闹钟的提醒时间包括时段、小时、分钟。详情页DetailIndex.ets中添加闹钟时间选择器子组件DatePickArea.ets。
// DatePickArea.ets
Component
export default struct DatePickArea {build() {Stack({ alignContent: Alignment.Center }) {Row() {ForEach(DetailConstant.DAY_DATA, (item: DayDataItem) {TextPicker({ range: item.data, selected: item.delSelect }).layoutWeight(CommonConstants.DEFAULT_LAYOUT_WEIGHT).backgroundColor($r(app.color.grey_light)).onChange((value: string, index: number) {item.delSelect index;})}, (item: DayDataItem) JSON.stringify(item))}}.height(DimensionUtil.getVp($r(app.float.date_picker_height))).padding({left: DimensionUtil.getVp($r(app.float.date_picker_padding_horizon)),right: DimensionUtil.getVp($r(app.float.date_picker_padding_horizon))})}
}设置闹钟详情
// SettingItem.ets
build() {Column() {ForEach(this.settingInfo, (item: AlarmSettingItem, index: number | undefined) {Divider()...Row() {Text(item.title)...Text(item.content)...Image($r(app.media.ic_right))...}....onClick(() {this.showSettingDialog(item.sType);})}, (item: AlarmSettingItem, index: number | undefined) JSON.stringify(item) index)}...
}提供后台代理提醒能力
导入系统提醒服务类ReminderService.ets它由系统后台代理提醒能力封装支持新增、修改、删除系统闹钟功能在设置、删除闹钟后同步更新到轻量级数据库中并刷新主页页面。
// DetailViewModel.ets
public async setAlarmRemind(alarmItem: AlarmItem) {alarmItem.hour this.getAlarmTime(CommonConstants.DEFAULT_SINGLE);alarmItem.minute this.getAlarmTime(CommonConstants.DEFAULT_DATA_PICKER_HOUR_SELECTION);let index await this.findAlarmWithId(alarmItem.id);if (index ! CommonConstants.DEFAULT_NUMBER_NEGATIVE) { // 已存在删除原有提醒this.reminderService.deleteReminder(alarmItem.id);} else { // 不存在以数据长度为notificationId新增闹钟数据index this.alarms.length;alarmItem.notificationId index;this.alarms.push(alarmItem);}this.reminderService.addReminder(alarmItem, (newId: number) {alarmItem.id newId;alarmItem.isOpen true;this.alarms[index] alarmItem;let preference GlobalContext.getContext().getObject(preference) as PreferencesHandler;preference.set(CommonConstants.ALARM_KEY, JSON.stringify(this.alarms));})
}public async removeAlarmRemind(id: number) {this.reminderService.deleteReminder(id);let index await this.findAlarmWithId(id);if (index ! CommonConstants.DEFAULT_NUMBER_NEGATIVE) {this.alarms.splice(index, CommonConstants.DEFAULT_SINGLE);}let preference GlobalContext.getContext().getObject(preference) as PreferencesHandler;preference.set(CommonConstants.ALARM_KEY, JSON.stringify(this.alarms));
}全文是对鸿蒙开发的技术运用更多的鸿蒙开发实战技术可以前往主页查看更多信息。分享一份鸿蒙的学习路线图略缩版高清完整版在主页找我保存。 最后
实现一个简易闹钟效果图
