当前位置：首页 > backend >正文

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

backend 2025/6/21 17:07:56

首先在上期讲解代码的文件中添加全局变量以及俩个回调函数，具体代码如下：
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);

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