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() 获取当前按下的日期
相关推荐
dddwjzx15 小时前
嵌入式Linux C应用编程入门——标准IO库
嵌入式
pai同学15 小时前
ESP-IDF+vscode开发ESP32第十二讲——event
嵌入式
凉、介16 小时前
KVM + QEMU 虚拟化
笔记·学习·嵌入式·arm·qemu·虚拟化·kvm
dddwjzx1 天前
嵌入式Linux C应用编程入门——文件IO进阶
嵌入式
2023自学中1 天前
imx6ull 开发板, mame 模拟器,运行游戏 测试
linux·游戏·嵌入式·开发板
dddwjzx2 天前
嵌入式Linux C应用编程入门——文件IO
嵌入式
fzm52982 天前
车载ECU单元测试技术与应用研究
c语言·自动化测试·单元测试·嵌入式·白盒测试
用户120487221613 天前
Linux驱动编译与加载
linux·嵌入式
用户805533698034 天前
Input 子系统架构:Core、Handler、Driver 三层是怎么协作的
linux·嵌入式
用户805533698034 天前
RK-Forge外设系列开篇 - 把板子从「能启动」变成「能用」:Ethernet/SPI/MMC 三个纯接线外设
linux·github·嵌入式