LVGL 控件之日历(lv_calendar)

目录


一、日历

1、组成

日历部件由两个部分组成:

  1. 主体背景 LV_PART_MAIN
  2. 各个按钮 LV_PART_ITEMS(指向日期和名称)。
  • LV_PART_MAIN 日历的背景。使用所有与背景相关的样式属性。
  • LV_PART_ITEMS 指日期和日期名称。设置按钮矩阵控制标志来区分不同的按钮(日期),并添加自定义绘制(drawer)事件,可参考如下方式修改按钮的属性:
    • 日期名称没有边框,没有背景,用灰色绘制
    • 矩阵中上个月和下个月的天数有 LV_BUTTONMATRIX_CTRL_DISABLED 标志
    • 今天(你指定的日期)有较厚的边框(使用主题的主色)
    • 突出显示的日期有一些不透明度(使用主题的主色)。

2、创建日历

在LVGL 中,用户需要创建日历部件,可调用以下函数:

c 复制代码
lv_obj_t *lv_calendar_create(lv_obj_t *parent);

例:

c 复制代码
lv_obj_t *calendar = lv_calendar_create(lv_scr_act());
lv_obj_set_size(calendar, 300, 300);
lv_obj_align(calendar, LV_ALIGN_CENTER, 0, 0);

3、日期的设置/显示

3.1 设置当前日期

在默认的情况下,当用户创建出一个日历部件,该部件的当前日期为 2020 年1 月1 号,如果用户需要设置日期,则可以调用lv_calendar_set_today_date 函数。

注意:当前日期并不等同于实时显示的日期

3.2 显示日期

如果我们仅仅是设置了当前日期,日期部件并不会自动显示该日期,所以我们必须手动跳转当前日期对应的月份,相关的函数为lv_calendar_set_shown_date

c 复制代码
lv_calendar_set_today_date(calendar, 2024, 9, 1);
lv_calendar_set_showed_date(calendar, 2024, 9);

3.3 日历头

可以看到,刚才创建的日历除了能看当前月的信息外什么都干不了,所以要加上日历头方便我们操作。

日历部件设置日历头的方式有两个,如下所示:

  1. 调用 lv_calendar_header_dropdown_create 函数设置;(下拉列表)
  2. 调用 lv_calendar_header_arrow_create 函数设置。(按键)
c 复制代码
lv_calendar_header_dropdown_create(lv_scr_act(), calendar);

源代码里没有 2024 年,所以直接显示的是 1901 年。因此要在源代码中加入 2024 年

在文件 lvgl\src\extra\widgets\calendar\lv_calendar_header_dropdown.c 下:

c 复制代码
static const char * year_list = {
    "2023\n2022\n2021\n"
    "2020\n2019\n2018\n2017\n2016\n2015\n2014\n2013\n2012\n2011\n2010\n2009\n2008\n2007\n2006\n2005\n2004\n2003\n2002\n2001\n"
    "2000\n1999\n1998\n1997\n1996\n1995\n1994\n1993\n1992\n1991\n1990\n1989\n1988\n1987\n1986\n1985\n1984\n1983\n1982\n1981\n"
    "1980\n1979\n1978\n1977\n1976\n1975\n1974\n1973\n1972\n1971\n1970\n1969\n1968\n1967\n1966\n1965\n1964\n1963\n1962\n1961\n"
    "1960\n1959\n1958\n1957\n1956\n1955\n1954\n1953\n1952\n1951\n1950\n1949\n1948\n1947\n1946\n1945\n1944\n1943\n1942\n1941\n"
    "1940\n1939\n1938\n1937\n1936\n1935\n1934\n1933\n1932\n1931\n1930\n1929\n1928\n1927\n1926\n1925\n1924\n1923\n1922\n1921\n"
    "1920\n1919\n1918\n1917\n1916\n1915\n1914\n1913\n1912\n1911\n1910\n1909\n1908\n1907\n1906\n1905\n1904\n1903\n1902\n1901"
};

还有两处:

现在就正常了:

c 复制代码
lv_calendar_header_arrow_create(lv_scr_act(), calendar, 20);

4、设置日期高亮

如果用户需要某个日期高亮显示,可调用 lv_calendar_set_highlighted_dates 函数来进行设置。

c 复制代码
lv_calendar_date_t day[1];

day[0].year = 2024;
day[0].month = 9;
day[0].day = 2;
lv_calendar_set_highlighted_dates(calendar, day, 1);

5、设置日名

在默认的情况下,日历都是以英文的形式展示(Su、Mo、Tu、We、Th、Fr 和 Sa),如果用户想设置成中文的日名,可调用lv_calendar_set_day_names 函数。

c 复制代码
const char* day_names[7] = { "1", "2","3","4","5","6","7", };

lv_calendar_set_day_names(calendar, day_names);

6、事件

LV_EVENT_VALUE_CHANGED:如果单击日期,则发送该事件,通过调用函数 lv_calendar_get_pressed_date(calendar, &date) 将 date 设置为当前按下的日期。如果存在,则返回 LV_RES_OK 有效的按下日期,否则 LV_RES_INVALID

7、API 函数

函数 含义
lv_calendar_create() 创建日历部件
lv_calendar_set_today_date() 设置当前的日期
lv_calendar_set_showed_date() 设置显示的日期
lv_calendar_set_highlighted_dates() 设置高亮显示的日期
lv_calendar_set_day_names() 设置日历(星期)的名称
lv_calendar_get_btnmatrix() 获取日历的按钮矩阵对象
lv_calendar_get_today_date() 获取当前的日期
lv_calendar_get_showed_date() 获取当前显示的日期
lv_calendar_get_highlighted_dates() 获取高亮显示的日期
lv_calendar_get_highlighted_dates_num() 获取高亮显示的日期数量
lv_calendar_get_pressed_date() 获取当前按下的日期
相关推荐
憧憬一下1 天前
PCIe_Host驱动分析_地址映射
arm开发·嵌入式硬件·嵌入式·linux驱动开发·pci/pcie
aspirestro三水哥6 天前
Linux: 通过/proc/pid/stack查看程序卡在内核的什么地方
linux·运维·服务器·嵌入式
@启智森7 天前
【C语言】浮点数的原理、整型如何转换成浮点数
c语言·开发语言·嵌入式·float·int·浮点数
@启智森7 天前
【Uboot】Uboot启动流程分析
linux·c++·嵌入式·uboot·启动·底层
不想写代码的我8 天前
基于ZYNQ-7000系列的FPGA学习笔记11——IP核之单端RAM读写
笔记·学习·fpga开发·嵌入式·zynq
7yewh8 天前
嵌入式 linux Git常用命令 抽补丁 打补丁
linux·arm开发·git·嵌入式硬件·ubuntu·嵌入式·嵌入式软件
Jason_zhao_MR9 天前
基于米尔全志T527开发板的OpenCV进行手势识别方案
人工智能·mcu·opencv·计算机视觉·嵌入式
昊虹AI笔记9 天前
Source Insight的使用经验汇总
嵌入式
7yewh9 天前
LeetCode 力扣 热题 100道(十九)最长连续序列(C++)
c语言·数据结构·c++·算法·leetcode·嵌入式
憧憬一下9 天前
PCIe的三种路由方式
arm开发·嵌入式硬件·嵌入式·linux驱动开发·pci/pcie