0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

harmonyos开发新建页面

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-04-24 17:24 次阅读

介绍

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

  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中提供。

`HarmonyOSOpenHarmony鸿蒙文档籽料:mau123789v直接拿`

├──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));
}

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 鸿蒙
    +关注

    关注

    57

    文章

    2307

    浏览量

    42737
  • HarmonyOS
    +关注

    关注

    79

    文章

    1967

    浏览量

    30009
  • OpenHarmony
    +关注

    关注

    25

    文章

    3658

    浏览量

    16136
收藏 人收藏

    评论

    相关推荐

    鸿蒙OS开发实例:【页面传值跳转】

    本篇主要介绍如何在HarmonyOS中,在页面跳转之间如何传值 HarmonyOS页面指的是带有@Entry装饰器的文件,其不能独自存在,必须依赖UIAbility这样的组件容器
    的头像 发表于 03-29 20:16 2149次阅读
    鸿蒙OS<b class='flag-5'>开发</b>实例:【<b class='flag-5'>页面</b>传值跳转】

    HarmonyOS开发案例:【排行榜页面

    本课程使用声明式语法和组件化基础知识,搭建一个可刷新的排行榜页面。在排行榜页面中,使用循环渲染控制语法来实现列表数据渲染,使用@Builder创建排行列表布局内容,使用装饰器@State、@Prop、@Link来管理组件状态。
    的头像 发表于 04-30 16:16 1893次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>案例:【排行榜<b class='flag-5'>页面</b>】

    HarmonyOS开发案例:【UIAbility内和UIAbility间页面的跳转】

    基于Stage模型下的UIAbility开发,实现UIAbility内和UIAbility间页面的跳转。
    的头像 发表于 05-09 15:06 1421次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>案例:【UIAbility内和UIAbility间<b class='flag-5'>页面</b>的跳转】

    HarmonyOS应用开发页面开发

    该文档带领大家手把手开发页面,包含的知识有:1、XML编写页面;2、加载XML布局;3、创建Feature Ability;4、代码编写界面;5、实现页面跳转;6、跨设备启动FA;注:
    发表于 09-10 17:44

    HarmonyOS应用开发】Hello HarmonyOS到Hi HarmonyOS(3)

    页面跳转。创建第二个页面新建一个Empty Feature Ability(Java),看意思是一个空的元程序,其实不是,它里面还有模板的一些代码,后续我们可以删除重写。页面名称
    发表于 11-11 09:25

    【资料】HarmonyOS应用开发页面开发

    HarmonyOS应用开发页面开发回复帖子查看资料下载链接:[hide][/hide]
    发表于 08-12 11:53

    #HarmonyOS征文# HarmonyOS实战—实现注册登录和修改密码页面

    1. 注册登录页面设置的要求如下: 新建项目:TextApplication上面的数值单位都是 px ,所以要转换成 vp 和 fp在 1920*1080 分辨率下,1px = 1/3vpP40
    发表于 08-13 17:23

    HarmonyOS应用开发-ClickableImageJsDome体验

    的设计。本DEMO主要涉及到的页面元素有有image,image-animator,展现图片资源在界面交互中几种常见运用效果。旨在帮助开发人员快速了解HarmonyOS JSUI应用的开发
    发表于 06-18 11:42

    HarmonyOS/OpenHarmony应用开发-DevEco Studio新建项目的整体说明

    ,是开发者需要优先了解熟悉*附件:HarmonyOSOpenHarmony应用开发-DevEco Studio新建项目的整体说明.docx
    发表于 09-15 16:51

    华为开发HarmonyOS零基础入门:系统能力调用示例

    华为开发HarmonyOS零基础入门:系统能力调用示例,修改组件属性页面加载参数接收数据连接,优化切换交互体验。
    的头像 发表于 10-23 10:44 1377次阅读
    华为<b class='flag-5'>开发</b>者<b class='flag-5'>HarmonyOS</b>零基础入门:系统能力调用示例

    华为开发者分论坛HarmonyOS学生公开课-如何学习HarmonyOS应用开发

    2021华为开发者分论坛HarmonyOS学生公开课-如何学习HarmonyOS应用开发
    的头像 发表于 10-24 11:09 2103次阅读
    华为<b class='flag-5'>开发</b>者分论坛<b class='flag-5'>HarmonyOS</b>学生公开课-如何学习<b class='flag-5'>HarmonyOS</b>应用<b class='flag-5'>开发</b>?

    HarmonyOS 应用开发-ClickableImageJsDome体验

    的设计。本DEMO主要涉及到的页面元素有有image,image-animator,展现图片资源在界面交互中几种常见运用效果。旨在帮助开发人员快速了解 HarmonyOS JSUI应用的开发
    的头像 发表于 06-20 00:24 1093次阅读
    <b class='flag-5'>HarmonyOS</b> 应用<b class='flag-5'>开发</b>-ClickableImageJsDome体验

    面向HarmonyOS开发者的HarmonyOS 3.0 Beta介绍

    2021年10月,我们面向开发者发布了HarmonyOS 3.0 Developer Preview版,但开发的脚步永不停歇,现在我们又更新了API版本,配套发布了HarmonyOS
    的头像 发表于 07-06 20:34 3271次阅读

    小白指南:手把手教你用低代码开发一个应用页面

    一 什么是低代码开发 在了解低代码开发之前,我们先看看使用低代码开发的效果。 低代码开发效果示例 低代码开发是DevEco Studio为
    的头像 发表于 02-17 09:10 1114次阅读

    HarmonyOS开发案例:【Ability内页面间的跳转】

    基于Stage模型下的Ability开发,实现Ability内页面间的跳转和数据传递。
    的头像 发表于 05-09 10:39 533次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>案例:【Ability内<b class='flag-5'>页面</b>间的跳转】