鸿蒙开发进阶（HarmonyOS ）应用开发实例——自适应屏幕日历

  鸿蒙NEXT开发实战往期必看文章：

一分钟了解”纯血版！鸿蒙HarmonyOS Next应用开发！

“非常详细的” 鸿蒙HarmonyOS Next应用开发学习路线！（从零基础入门到精通）

HarmonyOS NEXT应用开发案例实践总结合（持续更新......）

HarmonyOS NEXT应用开发性能优化实践总结（持续更新......）

---

前言

本文是记录笔者进行鸿蒙北向学习时，用ArkTs编写一个可以自适应屏幕的简易日历的开发过程。（真的非常简易！）源代码附在文章末尾，如有不足之处欢迎一起讨论~

成品->

右上角输入年月，按下“go”按钮即可跳转至指定年月；按‘<’或‘>’即可切换至上个月或下个月。

下面是相关代码及开发过程 ^~^

---

一.定义变量

• 使用riqi数组储存页面显示的日期，没有日期的几天使用空格占位。
• 用week数组存储星期，用于后续设置星期栏
• 定义动态变量年year月month日day（以2024.12作为初始页面）

@Entry
@Component
struct DataPage {
  @State riqi:Array<string>=["1","2","3","4","5","6","7","8",
    "9","10","11","12","13","14","15",
    "16","17","18","19","20","21","22",
    "23","24","25","26","27","28","29","30","31"," "," "," "," "];
  @State week:Array<string>=["日","一","二","三","四","五","六"]
  @State year:number=2024;
  @State month:number=12;
  @State day:number=0;
  //以2024.12的日历作为初始页面
  //对各个变量进行初始化

二.编辑日历页面 

主页面主要是使用Grid组件进行页面布局，使用GridItem组件对页面进行分块。（注意build下只能有一个Grid，GridItem下也只能有一个子组件，但是Grid下可以有多个GridItem，并且Grid的子组件必须是GridItem组件）

1.框架

build() {
    Grid() {
    .............