您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > 鸿蒙

OpenHarmony - 基于ArkUI框架实现日历应用

时间:2024-01-16 13:01:08  来源:51CTO  作者:

前言

对于刚刚接触OpenHarmony应用开发的开发者,最快的入门方式就是开发一个简单的应用,下面记录了一个日历应用的开发过程,通过日历应用的开发,来熟悉基本图形的绘制,ArkUI的组件的使用,UI组件生命周期,加深对OpenHarmony应用开发的理解。

效果展示

开发环境

  • 开发工具:DevEco Studio 3.1 Release
  • 开发环境:OpenHarmony API 9
  • 开发语言:eTS

关于eTS

eTS语言:基于TypeScript(简称TS)拓展的出来的,是OpenHarmony应用开发语言,使用ArkUI框架提供的组件进行界面开发。

什么是TypeScript:
TypeScript 是微软开发的一个开源的编程语言,是面向对象强类型化的,在 JAVAScript 的基础上引入了静态类型、类、接口的概念。

TypeScript 和 JavaScript 的区别:

  • TypeScript 是 JavaScript 的超集,在JavaScript的基础上拓展了语法,包含了 JavaScript 的所有元素
  • 在TypeScript 中的数据要求有明确的类型,而JavaScript中没有
  • TypeScript在编译时可以发现错误,JavaScript只有在运行时报错

布局容器组件

  • Column :沿垂直方向布局的容器,可以包含多个子组件
  • Row:沿水平方向布局容器,可以包含多个子组件
  • Stack:堆叠容器,子组件按照顺序依次入栈,后一个子组件覆盖前一个子组件,可以包含多个子组件
  • Flex:弹性布局,元素在容器内水平居中,垂直等间隔分散,可以包含多个子组件
  • Scroll:可滑动的容器组件,当子组件的布局尺寸超过父组件的视口时,内容可以滑动,内部只支持单个子组件,可支持垂直或者水平滑动
  • Tabs:一种可以通过页签进行内容视图切换的容器组件,每个页签对应一个内容视图,只能包含子组件TabContent
  • List:列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据,例如图片和文本,只能包含ListItem子组件
  • Swiper:滑动容器,提供左右切换子组件显示的能力,可以包含多个子组件
  • Grid:网格容器,由“行”和“列”分割的单元格所组成,通过指定“项目”所在的单元格做出各种各样的布局,只能包含GridItem子组件

绘制组件

  • Circle:圆形绘制组件
  • Ellipse:椭圆绘制组件
  • Line:直线绘制组件
  • Polyline:折线绘制组件
  • Polygon:多边形绘制组件
  • Path:路径绘制组件
  • Rect:矩形绘制组件
  • Shape:绘制组件的父组件,父组件中会描述所有绘制组件均支持的通用属性。

自定义组件

自定义组件生命周期函数

  • aboutToAppear:在组件的 build 函数之前执行,可以做数据的初始化操作。
  • aboutToDisappear:在组件销毁之前执行,不允许改变状态变量,会导致应用程序行为不稳定,可以做资源的释放操作。
  • onPageShow:仅@Entry修饰的自定义组件生效,应用进入前台台,页面显示时触发。
  • onPageHide:仅@Entry修饰的自定义组件生效,应用进入后台,页面消失时触发。

自定义组件常用属性

  • @State :变量需要本地初始化,初始化的值可以被构造参数覆盖;
  • @Prop:必须通过构造函数参数初始化,属于单向数据绑定,使用其父组件提供的@State变量进行初始化
  • @Link:必须通过构造函数参数进行初始化,属于双向数据绑定,子组件对@Link变量的更改将同步修改父组件的@State变量;

实现过程

日历一页显示42天,包括上个月、当前月、下个月的天数,上个月和下个月的日期显示灰色,点击日期显示选中效果。
支持选择年份、月份,指定一个日期,获取当前月的天数,根据该月1号在一周中的第几天,获取上个月显示的天数,以及下个月显示的天数。

获取上一个月的天数,根据指定月份的1号在一周的第几天,上月最大天数,计算出上个月天数,以object的形式添加到数组,以便区分,代码如下:

const prevMonthDays = [];
//获取上个月最大天数
let prevLastDay = new Date(year, month-1, 0).getDate();
//获取某月1号所在一周的第几天
let startWeek = new Date(year, month, 1).getDay();
// 上个月的最大天数减去当前月1号所在一周的第几天
for (let i = prevLastDay - startWeek + 1; i <= prevLastDay; i++) {
      prevMonthDays.push({
        date: new Date(year, month - 1, i),
        status: 'prev'
      });
}

获取下一个月的天数,根据当前月份的1号在一周的第几天,当前月份的最大天数,计算出下个月天数,以object的形式添加到数组,以便区分,代码如下:

const nextMonthDays = [];
//获取下个月最大天数
let curLastDay = new Date(year, month, 0).getDate();
//获取当前月份1号在一周的第几天
let startWeek = new Date(year, month, 1).getDay();
//一页的天数减去当前月份的天数和上个月的天数
for (let i = 1; i <= 42 - startWeek - curLastDay + 1; i++) {
      nextMonthDays.push({
        date: new Date(year, month + 1, i),
        status: 'next'
      });
}

获取当前月的天数,以object的形式添加到数组,以便区分,代码如下:

let curLastDay = new Date(year, month, 0).getDate();
for (let i = 1; i <= curLastDay; i++) {
      curMonthDays.push({
        date: new Date(year, month, i),
		
        status: 'current'
      });
}

屏幕适配

屏幕适配需要用到媒体查询的接口,可以根据设备参数,例如:屏幕分辨率、横竖屏切换来修改应用的样式。

首先导入媒体查询模块:

import mediaquery from '@ohos.mediaquery'

然后通过matchMediaSync接口设置媒体查询条件,并保存返回的条件监听句柄,例如:监听设备类型,横竖屏状态。

//监听横竖屏状态
private listener: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(orientation: landscape)');
//监听当前设备类型
private deviceListener: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('screen and (device-type: default)');

定义触发回调函数,当匹配到媒体查询条件时会触发此回调函数。

onOrientationChange = (mediaQueryResult) => {
  if (mediaQueryResult.matches) {
    this.calendarWidth = "70%"
    this.titleBarLeft = 80
  } else {
    this.calendarWidth = "100%"
    this.titleBarLeft = 20
  }
}
onDeviceTypeChange = (mediaQueryResult) => {
  if(mediaQueryResult.matches){
    this.titleBarLeftTop = 10
    this.weekHeight = 30
    this.pikerDialogHeight = 200
    console.log("onDeviceTypeChange  device-type: default")
  }else{
    this.titleBarLeftTop = 40
    this.weekHeight = 50
    this.pikerDialogHeight = 280
  }
}

通过条件监听句柄去注册回调函数,在 aboutToAppear 组件初始化的时候执行注册,退出时销毁监听。

//组件初始化
aboutToAppear() {
  this.listener.on('change', this.onOrientationChange);
}
 
//组件销毁
aboutToDisappear(){
  this.listener.off('change', this.onOrientationChange);
}

数据懒加载

当列表加载的数据过大时,直接采用循环渲染方式,导致页面启动时间过长,可以使用LazyForEach组件进行数据的懒加载进行优化,按需加载数据并创建相应组件。

定义一个类并实现IDataSource接口:

export class YearData implements IDataSource{

  private list: number[] = []
  private listener: DataChangeListener

  constructor(list: number[]) {
    this.list = list
  }

  totalCount(): number {
    return this.list.length
  }

  getData(index: number): any {
    return this.list[index]
  }

  getDatAIndex(data:any){
    return this.list.indexOf(data)
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    this.listener = listener
  }

  unregisterDataChangeListener() {
  }
}

在页面中导入并使用。

import { YearData } from '../datasource/YearData'

private data: YearData = new YearData([])
 
LazyForEach(this.data, (item: string) => {
        ListItem() {
          Row() {
            Text(item).fontSize(20).margin({ left: 10 })
          }
        }
        .onClick(() => {
          this.data.pushData('item value: ' + this.data.totalCount())
        })
      }, item => item)
}

总结

日历应用实现在一页42个格子上显示上个月、当前月、下个月的日期,通过日历应用的开发了解到了ArkUI组件的一些用法,生命周期和数据的加载过程,对之后的应用开发有很大的帮助。

想了解更多关于开源的内容,请访问:

51CTO 鸿蒙开发者社区

https://ost.51cto.com



Tags:OpenHarmony   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除。
▌相关推荐
OpenHarmony - 基于ArkUI框架实现日历应用
前言对于刚刚接触OpenHarmony应用开发的开发者,最快的入门方式就是开发一个简单的应用,下面记录了一个日历应用的开发过程,通过日历应用的开发,来熟悉基本图形的绘制,ArkUI的组件...【详细内容】
2024-01-16  Tags: OpenHarmony  点击:(0)  评论:(0)  加入收藏
OpenHarmony4.0发布:新增4000多个API接口,交互及隐私能力增强
钛媒体App 11月6日消息,以“技术筑生态,智联赢未来”为主题的第二届OpenHarmony技术大会在北京举办,活动中,OpenHarmony 4.0版本正式发布。据介绍,OpenHarmony4.0版本开发套件同...【详细内容】
2023-11-07  Tags: OpenHarmony  点击:(69)  评论:(0)  加入收藏
OpenHarmony,奏响中国基础软件的“光辉岁月”
梦想需要多久的时间,多少血和泪,才能慢慢实现?天地间任我展翅高飞,谁说那是天真的预言?《光辉岁月》歌词中的这两个问题,恰好可以送给今天的中国基础软件事业。曾几何时,我们认为中...【详细内容】
2023-11-07  Tags: OpenHarmony  点击:(61)  评论:(0)  加入收藏
OpenHarmony:如何使用HDF驱动控制LED灯
一、程序简介该程序是基于OpenHarmony标准系统编写的基础外设类:RGB LED。目前已在凌蒙派-RK3568开发板跑通。详细资料请参考官网:https://gitee.com/Lockzhiner-Electronics/...【详细内容】
2023-09-08  Tags: OpenHarmony  点击:(197)  评论:(0)  加入收藏
深入了解华为OpenHarmony开源系统的架构与功能
当下最火的科技圈新闻,莫过于华为即将发布的Mate 60系列手机,但是今天摸鱼君不讲这些,毕竟我也没抢到,我也不是专业测评。但是以我所长说说它搭载鸿蒙系统的一些内容。 鸿蒙系...【详细内容】
2023-09-07  Tags: OpenHarmony  点击:(163)  评论:(0)  加入收藏
OpenHarmony中使用MQTT
MQTT**(**消息队列遥测传输)是ISO 标准(ISO/IEC PRF 20922)下基于发布/订阅范式的消息协议。它工作在TCP/IP协议族上,是为硬件性能低下的远程设备以及网络状况糟糕的情况下而...【详细内容】
2023-08-29  Tags: OpenHarmony  点击:(309)  评论:(0)  加入收藏
OpenHarmony组件复用示例
OpenHarmony组件复用示例 摘要:在开发应用时,有些场景下的自定义组件具有相同的组件布局结构,仅有状态变量等承载数据的差异。这样的组件缓存起来,需要使用到该组件时直接复用,...【详细内容】
2023-08-28  Tags: OpenHarmony  点击:(279)  评论:(0)  加入收藏
OpenHarmony运行docker详细步骤
本文将介绍如何在OpenHarmony内核上运行docker容器。 目录 1.环境和设备 2.准备支持Docker容器的OpenHarmony内核 3.编译烧录镜像 4.安装docker容器引擎组件 5.格式...【详细内容】
2023-07-28  Tags: OpenHarmony  点击:(290)  评论:(0)  加入收藏
OpenHarmony 3.2 Release新特性解读之驱动HCS
HCS(HDF Configuration Source)是HDF驱动框架的配置描述源码,内容以Key-Value为主要形式。它实现了配置代码与驱动代码解耦,便于开发者进行配置管理。OpenAtom OpenHarmony(以下...【详细内容】
2023-06-01  Tags: OpenHarmony  点击:(257)  评论:(0)  加入收藏
OpenHarmony系统之Service代码一键生成工具介绍
作者:苟晶晶前言当开发者为OpenHarmony系统框架开发某些功能时,有时需要将这个功能包装成一个独立的服务进程运行在系统中,为了其它应用进程能够调用此服务,开发人员需要基于系...【详细内容】
2023-05-31  Tags: OpenHarmony  点击:(243)  评论:(0)  加入收藏
▌简易百科推荐
OpenHarmony - 基于ArkUI框架实现日历应用
前言对于刚刚接触OpenHarmony应用开发的开发者,最快的入门方式就是开发一个简单的应用,下面记录了一个日历应用的开发过程,通过日历应用的开发,来熟悉基本图形的绘制,ArkUI的组件...【详细内容】
2024-01-16    51CTO  Tags:OpenHarmony   点击:(0)  评论:(0)  加入收藏
鸿蒙工程师,熬来了「造富时代」
  作者|张俊  来源|新浪科技  ID|techsina  “套壳安卓”的质疑言犹在耳,如今华为正在计划将鸿蒙OS与安卓完全脱离。  此前,鸿蒙OS为了迅速扩大用户规模,采取了兼容安卓...【详细内容】
2023-11-20    锌财经  Tags:鸿蒙   点击:(111)  评论:(0)  加入收藏
OpenHarmony:如何使用HDF驱动控制LED灯
一、程序简介该程序是基于OpenHarmony标准系统编写的基础外设类:RGB LED。目前已在凌蒙派-RK3568开发板跑通。详细资料请参考官网:https://gitee.com/Lockzhiner-Electronics/...【详细内容】
2023-09-08    51CTO  Tags:OpenHarmony   点击:(197)  评论:(0)  加入收藏
深入了解华为OpenHarmony开源系统的架构与功能
当下最火的科技圈新闻,莫过于华为即将发布的Mate 60系列手机,但是今天摸鱼君不讲这些,毕竟我也没抢到,我也不是专业测评。但是以我所长说说它搭载鸿蒙系统的一些内容。 鸿蒙系...【详细内容】
2023-09-07  摸鱼IT  微信公众号  Tags:OpenHarmony   点击:(163)  评论:(0)  加入收藏
鸿蒙操作系统开发 搭建环境
2019年8月9日,华为在东莞举行华为开发者大会,正式发布鸿蒙操作系统;2020年9月推出了鸿蒙2.0,全面使能全场景生态,具备跨设备、服务流转、极速直达、可视可说、隐私安全五大能力。...【详细内容】
2023-09-07  清华计算机学堂  微信公众号  Tags:鸿蒙   点击:(150)  评论:(0)  加入收藏
OpenHarmony中使用MQTT
MQTT**(**消息队列遥测传输)是ISO 标准(ISO/IEC PRF 20922)下基于发布/订阅范式的消息协议。它工作在TCP/IP协议族上,是为硬件性能低下的远程设备以及网络状况糟糕的情况下而...【详细内容】
2023-08-29    51CTO  Tags:OpenHarmony   点击:(309)  评论:(0)  加入收藏
OpenHarmony组件复用示例
OpenHarmony组件复用示例 摘要:在开发应用时,有些场景下的自定义组件具有相同的组件布局结构,仅有状态变量等承载数据的差异。这样的组件缓存起来,需要使用到该组件时直接复用,...【详细内容】
2023-08-28  zhushangyuan  51CTO  Tags:OpenHarmony   点击:(279)  评论:(0)  加入收藏
HarmonyOS开发第一步,熟知开发工具DevEco Studio
俗话说的好,工欲善其事,必先利其器,走进HarmonyOS第一步,开发工具必须先行,当然了,关于开发工具的使用,官网和其他的博客也有很多的讲解,但是并没有按照常用的功能进行概述,如果需要...【详细内容】
2023-08-22  程序员一鸣  今日头条  Tags:HarmonyOS   点击:(164)  评论:(0)  加入收藏
鸿蒙元服务开发实例:桌面卡片上的电动自行车助手E-Bike
E-Bike是一款基于HarmonyOS开发的元服务,以万能卡片的形式给骑行提供便捷服务。首先需要完成HarmonyOS开发环境搭建。一、元服务E-Bike简介E-Bike是一款基于HarmonyOS开发的...【详细内容】
2023-08-16    51CTO  Tags:鸿蒙   点击:(227)  评论:(0)  加入收藏
OpenHarmony运行docker详细步骤
本文将介绍如何在OpenHarmony内核上运行docker容器。 目录 1.环境和设备 2.准备支持Docker容器的OpenHarmony内核 3.编译烧录镜像 4.安装docker容器引擎组件 5.格式...【详细内容】
2023-07-28  离北况归  51CTO  Tags:OpenHarmony   点击:(290)  评论:(0)  加入收藏
站内最新
站内热门
站内头条