使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第十六讲)

发布于:2025-06-12 ⋅ 阅读:(32) ⋅ 点赞:(0)

首先在上期讲解代码的文件中添加全局变量以及俩个回调函数,具体代码如下:
lv_calendar_date_t screen_6_calendar_1_today;
lv_calendar_date_t screen_6_calendar_1_highlihted_days[1];

void screen_6_calendar_1_draw_part_begin_event_cb(lv_event_t *e) {
lv_obj_draw_part_dsc_t *dsc = lv_event_get_draw_part_dsc(e);
if (dsc->part == LV_PART_ITEMS) {
// 针对日期格子
lv_calendar_date_t date;
lv_calendar_get_pressed_date(guider_ui.screen_6_calendar_1, &date);
if (date.day == dsc->id && date.month ==date.month) {
// 高亮当天
dsc->rect_dsc->bg_color = lv_color_hex(0xFF0000); }
}
}
void screen_6_calendar_1_event_handler(lv_event_t *e) {
lv_event_code_t code = lv_event_get_code(e);
if (code == LV_EVENT_VALUE_CHANGED) {
// 日期被点击
lv_calendar_date_t date;
lv_calendar_get_pressed_date(guider_ui.screen_6_calendar_1, &date);
//设置高亮的日期
screen_6_calendar_1_highlihted_days[0].year = date.year;
screen_6_calendar_1_highlihted_days[0].month = date.month;
screen_6_calendar_1_highlihted_days[0].day = date.day;
lv_calendar_set_highlighted_dates(guider_ui.screen_6_calendar_1, screen_6_calendar_1_highlihted_days, 1);
}
}

以上两个函数的作用是将用户点击的日期高亮的显示出来。

最后在代码中添加回调函数的声明,以及日历大小的设置,具体代码如下图所示:

//设置回调函数
lv_obj_t *screen_6_calendar_1_header = lv_calendar_header_arrow_create(ui->screen_6_calendar_1);
lv_calendar_t *screen_6_calendar_1 = (lv_calendar_t *)ui->screen_6_calendar_1;
lv_obj_add_event_cb(screen_6_calendar_1->btnm, screen_6_calendar_1_draw_part_begin_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);
lv_obj_add_event_cb(ui->screen_6_calendar_1, screen_6_calendar_1_event_handler, LV_EVENT_ALL, NULL);
//设置日历大小以及位置
lv_obj_set_pos(ui->screen_6_calendar_1, 100, -280);
lv_obj_set_size(ui->screen_6_calendar_1, 280, 210);

以下是官方手册中提供的用法,这里就不进行一一讲解:
在这里插入图片描述
最后是使用的实例图片:
在这里插入图片描述