HarmonyOS开发案例:【闹钟】

news2025/1/16 20:17:57

介绍

使用后台代理提醒,实现一个简易闹钟。要求完成以下功能:

  1. 展示指针表盘或数字时间。
  2. 添加、修改和删除闹钟。
  3. 展示闹钟列表,并可打开和关闭单个闹钟。
  4. 闹钟到设定的时间后弹出提醒。
  5. 将闹钟的定时数据保存到轻量级数据库。

在这里插入图片描述

相关概念

  • [Canvas]:提供画布组件,用于自定义绘制图形。

  • [CanvasRenderingContext2D]:使用RenderingContext在Canvas组件上进行绘制,绘制对象可以是矩形、文本、图片等。

  • [后台代理提醒]:开发应用时,开发者可以调用后台提醒发布的接口创建定时提醒,包括倒计时、日历、闹钟三种提醒类型。使用后台代理提醒能力后,应用可以被冻结或退出,计时和弹出提醒的功能将被后台系统服务代理。本应用中主要使用到后台代理提醒的两个接口:

    • publishReminder 发布一个后台代理提醒,使用callback方式实现异步调用,该方法需要申请通知弹窗Notification.requestEnableNotification后才能调用。
    • cancelReminder 取消指定id的提醒,使用callback方式实现异步调用。
    • 鸿蒙开发指导文档:gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。

搜狗高速浏览器截图20240326151547.png

相关权限

本篇Codelab需要在module.json5中配置如下权限:

"requestPermissions": [
  {
    "name": "ohos.permission.PUBLISH_AGENT_REMINDER"
  }
]

环境搭建

软件要求

  • [DevEco Studio]版本:DevEco Studio 3.1 Release。
  • OpenHarmony SDK版本:API version 9。

硬件要求

  • 开发板类型:[润和RK3568开发板]。
  • OpenHarmony系统:3.2 Release。

环境搭建

完成本篇Codelab我们首先要完成开发环境的搭建,本示例以RK3568开发板为例,参照以下步骤进行:

  1. [获取OpenHarmony系统版本]:标准系统解决方案(二进制)。以3.2 Release版本为例:

  2. 搭建烧录环境。

    1. [完成DevEco Device Tool的安装]
    2. [完成RK3568开发板的烧录]
  3. 搭建开发环境。

    1. 开始前请参考[工具准备],完成DevEco Studio的安装和开发环境配置。
    2. 开发环境配置完成后,请参考[使用工程向导]创建工程(模板选择“Empty Ability”)。
    3. 工程创建完成后,选择使用[真机进行调测]。

代码结构解读

本篇Codelab只对核心代码进行讲解,对于完整代码,我们会在gitee中提供。

`HarmonyOS与OpenHarmony鸿蒙文档籽料:mau123789是v直接拿`

├──entry/src/main/ets                       // 代码区    
│  ├──common
│  │  ├──constants
│  │  │  ├──AlarmSettingType.ets            // 闹钟设置类型枚举
│  │  │  ├──CommonConstants.ets             // 公共常量类
│  │  │  ├──DetailConstant.ets              // 详情页常量类
│  │  │  └──MainConstant.ets                // 首页常量类
│  │  └──utils
│  │     ├──DataTypeUtils.ets               // 数据类型工具类
│  │     ├──DimensionUtil.ets               // 屏幕适配工具类
│  │     └──GlobalContext.ets               // 全局变量工具类
│  ├──entryability
│  │  └──EntryAbility.ets                   // 程序入口类
│  ├──model
│  │  ├──database
│  │  │  ├──PreferencesHandler.ets          // 轻量级数据库操作类
│  │  │  └──PreferencesListener.ets         // 轻量级数据库回调接口   
│  │  └──ReminderService.ets                // 系统后台提醒服务类   
│  │──pages
│  │  ├──DetailIndex.ets                    // 详情页入口文件
│  │  └──MainIndex.ets                      // 主页入口文件
│  │──view
│  │  ├──Detail     
│  │  │  ├──dialog
│  │  │  │  ├──CommonDialog.ets             // 公共Dialog组件
│  │  │  │  ├──DurationDialog.ets           // 闹铃时长选择Dialog组件
│  │  │  │  ├──IntervalDialog.ets           // 闹铃间隔选择Dialog组件
│  │  │  │  ├──RenameDialog.ets             // 闹铃名设置Dialog组件
│  │  │  │  └──RepeatDialog.ets             // 闹铃重复设置Dialog组件
│  │  │  ├──DatePickArea.ets                // 详情页时间选择组件
│  │  │  └──SettingItem.ets                 // 详情页设置组件
│  │  ├──Main    
│  │  │  ├──AlarmList.ets                   // 主页闹钟列表组件
│  │  │  ├──AlarmListItem.ets               // 主页闹钟列表子项组件
│  │  │  └──ClockArea.ets                   // 主页时钟组件
│  │  └──BackContainer.ets                  // 自定义头部组件
│  └──viewmodel
│     ├──AlarmItemBean.ets                  // 闹钟属性类
│     ├──AlarmSettingBean.ets               // 闹钟设置属性类
│     ├──DayDateBean.ets                    // 日期属性类
│     ├──DetailViewModel.ets                // 详情模块逻辑功能类   
│     ├──MainViewModel.ets                  // 主页逻辑功能类
│     └──ReminderItemBean.ets               // 后台提醒属性类
└──entry/src/main/resources                 // 资源文件目录

闹钟主界面

闹钟界面包括当前时间、闹钟列表、添加闹钟子组件,具体包括以下模块:

  • 展示当前时间。
  • 展示闹钟列表。
  • 添加闹钟。
  • 后台代理提醒。

展示当前时间

当前时间使用了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: Array<AlarmItem>) => 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: Array<AlarmItem>;

  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,自定义了返回按钮和返回逻辑操作,添加确定(“√”)子组件,并绑定点击事件。

// DetailIndex.ets
build()
{
  Column() {
    ...
    Button() {
      Image($r('app.media.ic_confirm')).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.viewModel.setAlarmRemind(this.alarmItem);
      router.back();
    })
    ...
  }
}

// BackContainer.ets
build() {
  Row() {
    ...
    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: DayDataBean) => {
          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: DayDataBean) => 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设置条目组件SettingItem.ets,支持设置闹钟重复时间、闹钟名称、重复次数和闹铃时长。

// SettingItem.ets
build() {
  Column() {
    ForEach(this.settingInfo, (item: AlarmSettingBean, index: number | undefined) => {
      Divider()
      ...
      Row() {
        Text(item.title)...
        Text(item.content)...
        Image($r('app.media.ic_right'))...
      }
      ...
      .onClick(() => {
        this.showSettingDialog(item.sType);
      })
    }, (item: AlarmSettingBean, 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));
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1623005.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据结构入门——排序(代码实现)(下)

int GetMidi(int* a, int left, int right) {int mid (left right) / 2;// left mid rightif (a[left] < a[mid]){if (a[mid] < a[right]){return mid;}else if (a[left] > a[right]) // mid是最大值{return left;}else{return right;}}else // a[left] > a[mid…

MySQL-----多表查询(一)

目录 一.多表关系&#xff1a; 1.1 一对多(多对一)&#xff1a; 1.2 多对多: 1.3 一对一: 二.多表查询概述&#xff1a; 三.连接查询&#xff1a; 3.1内连接&#xff1a; 3.2外连接&#xff1a; 3.3自连接查询&#xff1a; 3.4联合查询&#xff1a; 一.多表关系&…

测试的分类(3)

目录 按照测试阶段测试 系统测试 冒烟测试和回归测试的区别 验收测试 单元测试, 集成测试, 系统测试, 回归测试之间的关系 是否按手工进行测试 手工测试 自动化测试 自动化测试和手工测试的优缺点 自动化测试优点 自动化测试缺点 手工测试优点 手工测试缺点 按照…

鸿蒙HarmonyOS应用 - ArkUI组件

ArkUI组件 基础组件 Image 声明Image组件并设置图片源 网络权限&#xff1a;ohos.permission.INTERNET Image(scr: string | PixelMap | Resource)// 1. string&#xff1a;用于加载网络图片&#xff0c;需要申请网络权限 Image("https://xxx.png")// 2. PixelMap…

快递物流订阅推送API接口如何对接

快递物流订阅推送API接口指的是订阅国内物流快递信息&#xff0c;当运单状态发生变化时&#xff0c;会推送到您的回调地址&#xff0c;直到这些运单号生命周期结束。简单点说就是先订阅快递单号再推送物流信息。那么快递物流订阅推送API接口该如何对接呢&#xff1f; 首先我们…

JVM学习笔记(四)类加载与字节码技术

目录 一、类文件结构 二、字节码指令 2.3 图解方法执行流程 1&#xff09;原始 java 代码 2&#xff09;编译后的字节码文件 3&#xff09;常量池载入运行时常量池 4&#xff09;方法字节码载入方法区 5&#xff09;main 线程开始运行&#xff0c;分配栈帧内存 6&…

道路检测车理想伴侣,国产高智能道路病害识别系统,可灵活兼容行车记录仪、无人机等数据源!

什么是视觉AI&#xff1f;通俗地说&#xff0c;视觉AI是机器代替人眼来做测量和判断&#xff0c;例如博雅仔为大家介绍的易模真人手办定制项目是基于公司独有的AI将拍摄到的实际影像“翻译”“制作”成数字3D模型&#xff0c;再经过3D打印固化成纪念手办送到用户朋友们的手上。…

将Python机器学习模型集成到C++ Qt客户端应用程序中|Qt调用python详解

0、前言 有几个不同的选项可以将你的Python机器学习模型集成到你的C Qt客户端应用程序中。以下是一些可能的解决方案&#xff1a; 创建API&#xff1a; 将你的机器学习模型部署为一个API服务。你可以使用像Flask这样的轻量级Web框架来创建一个简单的HTTP服务。这样&#xff0…

如何在一台服务器上同时运行搭载JDK 8, JDK 17, 和 JDK 21的项目:终极指南

&#x1f42f; 如何在一台服务器上同时运行搭载JDK 8, JDK 17, 和 JDK 21的项目&#xff1a;终极指南 &#x1f680; 摘要 在企业开发环境中&#xff0c;常常需要在同一台服务器上运行使用不同Java开发工具包&#xff08;JDK&#xff09;版本的多个项目。本文详细介绍如何在L…

华为鸿蒙应用--封装通用标题栏:CommonTitleBar(鸿蒙工具)-ArkTs

0、效果图 自定义通用标题栏 支持左、中、右常规标题栏设置&#xff1b; 支持自定义视图&#xff1b; 支持搜索功能 一、CommTitleBar代码 import router from ohos.router; import { Constants } from ../../constants/Constants; import { StyleConstants } from ../../…

JavaEE 初阶篇-深入了解 UDP 通信与 TCP 通信(综合案例:实现 TCP 通信群聊)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 UDP 通信 1.1 DatagramSocket 类 1.2 DatagramPacket 类 1.3 实现 UDP 通信&#xff08;一发一收&#xff09; 1.3.1 客户端的开发 1.3.2 服务端的开发 1.4 实现 …

FTP与SMB深度对比:文件传输协议谁更胜一筹?

在数字化时代&#xff0c;文件传输已成为日常工作中不可或缺的一部分。 FTP&#xff08;文件传输协议&#xff09;和SMB&#xff08;服务器消息块&#xff09;是两种最为常见的文件传输协议。它们各自在文件传输领域拥有独特的优势和特点&#xff0c;但同时也存在一些差异。 今…

六个月滴滴实习:轻松、舒心又高薪!

不久前&#xff0c;一位在滴滴后端研发部门实习了六个月的小伙伴在牛客网上分享了他的实习体验&#xff0c; 作者详细描述了他在滴滴的实习生活。 从他的叙述中&#xff0c;我们可以感受到与其他互联网公司相比&#xff0c;滴滴的工作环境显得相对轻松和舒适。 他提到&#x…

【汇编语言】流程转移和子程序

【汇编语言】流程转移和子程序 文章目录 【汇编语言】流程转移和子程序前言一、“转移”综述二、操作符offset三、jmp指令jmp指令——无条件转移jmp指令&#xff1a;依据位移进行转移两种段内转移远转移&#xff1a;jmp far ptr 标号转移地址在寄存器中的jmp指令转移地址在内存…

神经网络进阶

⚠申明&#xff1a; 未经许可&#xff0c;禁止以任何形式转载&#xff0c;若要引用&#xff0c;请标注链接地址。 全文共计3077字&#xff0c;阅读大概需要3分钟 &#x1f308;更多学习内容&#xff0c; 欢迎&#x1f44f;关注&#x1f440;【文末】我的个人微信公众号&#xf…

socket套接字在tcp客户端与tcp服务器之间的通信,以及socket中常用的高效工具epoll

1.socket&#xff08;套接字&#xff09;的概念 Socket是对TCP/IP协议的封装&#xff0c;Socket本身并不是协议&#xff0c;而是一个调用接口&#xff08;API&#xff09;&#xff0c;通过Socket&#xff0c;我们才能使用TCP/IP协议,主要利用三元组【ip地址&#xff0c;协议&am…

10G网络布线:DAC线缆与AOC光缆的选择指南

在10G网络部署中&#xff0c;选择合适的传输介质是确保网络性能和可靠性的关键。本文将全面比较10G DAC高速线缆和10G AOC有源光缆&#xff0c;帮助您做出明智的选择。 10G DAC高速线缆 VS 10G AOC有源光缆 定义与构造 10G DAC高速线缆&#xff08;Direct Attach Cable&…

配置有效的防爬虫技术保护网站

本文主要介绍了防爬虫的概念、目的以及一些有效的防爬虫手段。防爬虫是指网站采取各种技术手段阻止爬虫程序对其数据进行抓取的过程。为了保护网站的数据和内容的安全性&#xff0c;防止经济损失和恶意竞争&#xff0c;以及减轻服务器负载&#xff0c;网站需要采取防爬虫机制。…

文心一言4.0、智谱清言、MoonshotAI实测对比(上)

前言 前两天看到这张图&#xff0c;又刚好拿到了文心一言的4.0内测号&#xff0c;就想着把新版国内御三家横向对比测评一下。 文末领取免费领取AI学习基地 AI交流群 前一段时间也一直在研究复杂提示词&#xff08;结构化提示词&#xff09;向国内大模型迁移适配的问题&#…

matlab新手快速上手5(蚁群算法)

本文根据一个较为简单的蚁群算法框架详细分析蚁群算法的实现过程&#xff0c;对matlab新手友好&#xff0c;源码在文末给出。 蚁群算法简介&#xff1a; 蚁群算法是一种启发式优化算法&#xff0c;灵感来源于观察蚂蚁寻找食物的行为。在这个算法中&#xff0c;解决方案被看作是…