LVGL：拓展部件——日历 lv_calendar

最新推荐文章于 2024-05-15 09:30:00 发布

友善啊，朋友

最新推荐文章于 2024-05-15 09:30:00 发布

阅读量1.3k

点赞数 20

分类专栏： LVGL 文章标签： lvgl

本文链接：https://blog.csdn.net/kenfan1647/article/details/137348885

版权

LVGL 专栏收录该内容

18 篇文章 7 订阅

订阅专栏

本文介绍了LVCalendar控件，它以7x7矩阵形式展示日期并支持高亮显示、自定义日期和多种头部样式。主要讲解了其组成部分、相关函数和事件处理机制，展示了如何设置当前日期、高亮日期和星期名称。

摘要由CSDN通过智能技术生成

一、概述

此控件特点：

以7x7矩阵的形式展示任何一个月的日期，即在一个7行7列的网格中呈现。
显示星期的名称，即每一列对应一个特定的星期几（如周一、周二等）。
高亮显示当前日期（即今天）。
支持高亮用户自定义的日期，允许用户突出显示特定的日期以供关注或标记。

二、部件和样式

2.1、使用底层按钮矩阵（lv_btnmatrix）对象

此控件内部采用了 lv_btnmatrix 对象作为基础结构，以此来组织和排列日历中的日期及星期名称，形成一个矩阵布局。

2.2、包含组件元素

LV_PART_MAIN：日历的整体背景。
LV_PART_ITEMS：日历中的具体日期以及星期名称。由于底层采用 lv_btnmatrix，每个日期和星期名称都表现为一个按钮。针对这些按钮，设置了特定的控制标志和添加了自定义绘制事件，以实现特定的样式效果。

三、相关函数

1、void lv_calendar_set_today_date(lv_obj_t *obj, uint32_t year, uint32_t month, uint32_t day)

设置当前日期。

2、void lv_calendar_set_showed_date(lv_obj_t *obj, uint32_t year, uint32_t month)

显示的年份和月份。

    lv_obj_t * obj = lv_calendar_create(lv_scr_act());
    lv_calendar_set_today_date(obj, 2024, 4, 3);
    lv_obj_set_size(obj, 300, 300);
    lv_obj_center(obj);
    lv_calendar_set_showed_date(obj, 2024, 4);

3、void lv_calendar_set_highlighted_dates(lv_obj_t *obj, lv_calendar_date_t highlighted[], uint16_t date_num)

设置日历控件特定日期高亮显示。参数3是要高亮显示的日期数量。

    lv_obj_t * obj = lv_calendar_create(lv_scr_act());
    lv_calendar_set_today_date(obj, 2024, 4, 3);
    lv_obj_set_size(obj, 300, 300);
    lv_obj_center(obj);
    lv_calendar_set_showed_date(obj, 2024, 4);

    static lv_calendar_date_t highlighted_dates[] =
    {
        { .year = 2024, .month = 4, .day = 9 },
        { .year = 2024, .month = 4, .day = 21 },
        { .year = 2024, .month = 4, .day = 26 }
    };

    lv_calendar_set_highlighted_dates(obj, highlighted_dates, 3);

4、void lv_calendar_set_day_names(lv_obj_t *obj, const char **day_names)

设置星期名称。

    lv_obj_t * obj = lv_calendar_create(lv_scr_act());
    lv_calendar_set_today_date(obj, 2024, 4, 3);
    lv_obj_set_size(obj, 600, 300);
    lv_obj_center(obj);
    lv_calendar_set_showed_date(obj, 2024, 4);

    static lv_calendar_date_t highlighted_dates[] =
    {
        { .year = 2024, .month = 4, .day = 9 },
        { .year = 2024, .month = 4, .day = 21 },
        { .year = 2024, .month = 4, .day = 26 }
    };

    lv_calendar_set_highlighted_dates(obj, highlighted_dates, 3);

    lv_obj_set_style_text_font(obj,&lv_font_siyuanheiti16,LV_PART_MAIN);

    static const char *day_names[] =
    {
        "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"
    };

    lv_calendar_set_day_names(obj, day_names);

5、lv_obj_t *lv_calendar_get_btnmatrix(const lv_obj_t *obj)

获取其内部用于显示日期和星期名称的按钮矩阵。

6、const lv_calendar_date_t *lv_calendar_get_today_date(const lv_obj_t *calendar)

获取今天的日期。

7、const lv_calendar_date_t *lv_calendar_get_showed_date(const lv_obj_t *calendar)

获取当前显示的日期，即用户当前看到的年份、月份组合。

8、lv_calendar_date_t *lv_calendar_get_highlighted_dates(const lv_obj_t *calendar)

获取所有高亮日期。

9、uint16_t lv_calendar_get_highlighted_dates_num(const lv_obj_t *calendar)

获取高亮显示日期数量。

10、lv_obj_t * lv_calendar_header_arrow_create(lv_obj_t * parent)

设置箭头形式的日历头。

    lv_obj_t * obj = lv_calendar_create(lv_scr_act());
    lv_calendar_set_today_date(obj, 2024, 4, 3);
    lv_obj_set_size(obj, 600, 300);
    lv_obj_center(obj);
    lv_calendar_set_showed_date(obj, 2024, 4);

    static lv_calendar_date_t highlighted_dates[] =
    {
        { .year = 2024, .month = 4, .day = 9 },
        { .year = 2024, .month = 4, .day = 21 },
        { .year = 2024, .month = 4, .day = 26 }
    };

    lv_calendar_set_highlighted_dates(obj, highlighted_dates, 3);

    lv_obj_set_style_text_font(obj,&lv_font_siyuanheiti16,LV_PART_MAIN);

    static const char *day_names[] =
    {
        "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"
    };

    lv_calendar_set_day_names(obj, day_names);
    lv_calendar_header_arrow_create(obj);

11、lv_obj_t * lv_calendar_header_dropdown_create(lv_obj_t * parent)

设置下拉列表形式的日历头。

    lv_obj_t * obj = lv_calendar_create(lv_scr_act());
    static const char *day_names[] =
        {
            "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"
        };

    lv_calendar_set_day_names(obj, day_names);

    lv_calendar_set_today_date(obj, 2024, 4, 3);
    lv_calendar_set_showed_date(obj, 2024, 02);

    lv_obj_set_size(obj, 600, 300);
    lv_obj_center(obj);

    static lv_calendar_date_t highlighted_dates[] =
    {
        { .year = 2024, .month = 4, .day = 9 },
        { .year = 2024, .month = 4, .day = 21 },
        { .year = 2024, .month = 4, .day = 26 }
    };

    lv_calendar_set_highlighted_dates(obj, highlighted_dates, 3);

    lv_obj_set_style_text_font(obj,&lv_font_siyuanheiti16,LV_PART_MAIN);

    lv_calendar_header_dropdown_create(obj);
    lv_calendar_set_showed_date(obj, 2024, 04);

可能需要在源码添加年份：

这里也要改成最新年份：

12、 lv_res_t lv_calendar_get_pressed_date(const lv_obj_t *calendar, lv_calendar_date_t *date)

获取日历控件当前被按下的日期。

返回值：

LV_RES_OK：有一个有效的按下日期。参数2已填充了当前被按下的日期信息。
LV_RES_INV：当前没有被按下的日期。可能是用户未进行任何按压操作，或者已取消了之前的按压状态。

static void event_handler3(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * obj = lv_event_get_current_target(e);

    if(code == LV_EVENT_VALUE_CHANGED)
    {
        lv_calendar_date_t date;
        if(lv_calendar_get_pressed_date(obj, &date))
        {
            std::cout<<"选中日期："<<(int)date.year<<(int)date.month<<(int)date.day<<std::endl;
        }
    }
}

int main(int argc, char **argv)
{
    lv_init();
    hal_init();

    lv_log_register_print_cb(esp32_log_cb);

    lv_obj_t * obj = lv_calendar_create(lv_scr_act());
    static const char *day_names[] =
    {
        "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"
    };

    lv_calendar_set_day_names(obj, day_names);

    lv_calendar_set_today_date(obj, 2024, 4, 3);
    lv_calendar_set_showed_date(obj, 2024, 02);

    lv_obj_set_size(obj, 600, 300);
    lv_obj_center(obj);

    static lv_calendar_date_t highlighted_dates[] =
    {
        { .year = 2024, .month = 4, .day = 9 },
        { .year = 2024, .month = 4, .day = 21 },
        { .year = 2024, .month = 4, .day = 26 }
    };

    lv_calendar_set_highlighted_dates(obj, highlighted_dates, 3);

    lv_obj_set_style_text_font(obj,&lv_font_siyuanheiti16,LV_PART_MAIN);

    lv_calendar_header_dropdown_create(obj);
    lv_calendar_set_showed_date(obj, 2024, 04);
    lv_obj_add_event_cb(obj, event_handler3, LV_EVENT_ALL, NULL);


    while (1)
    {
        lv_timer_handler();
        usleep(5 * 1000);
    }

    return 0;
}

友善啊，朋友

关注

20
点赞
踩
20

收藏

觉得还不错? 一键收藏
1
评论
LVGL：拓展部件——日历 lv_calendar

对象作为基础结构，以此来组织和排列日历中的日期及星期名称，形成一个矩阵布局。设置日历控件特定日期高亮显示。参数3是要高亮显示的日期数量。获取当前显示的日期，即用户当前看到的年份、月份组合。获取其内部用于显示日期和星期名称的按钮矩阵。获取日历控件当前被按下的日期。设置下拉列表形式的日历头。获取高亮显示日期数量。设置箭头形式的日历头。
复制链接

扫一扫