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

这一期讲解lvgl中日历控件的基础使用，Calendar 部件是一个经典日历，它具有以下功能：

• 通过一个7x7矩阵显示任何月份
• 显示日期名称
• 突出显示当前日期（今天）
• 突出显示任何用户定义的日期
日历是一个可编辑的小部件，它允许使用编码器或键盘导航以及指针类型的输入设备来选择和点击日期。为了使日历更具灵活性，默认情况下它不显示当前年份或月份。相反，有一些可选的 “标题” 可以附加到日历上。

日历小部件在底层使用了 Button Matrix 部件来将日期排列成矩阵形式。

• LV_PART_MAIN 日历的背景。使用所有与背景相关的样式属性。
• LV_PART_ITEMS 指日期和日期名称。
设置了按钮矩阵控制标志以区分按钮，并添加了一个自定义绘制事件来按如下方式修改按钮的属性：
o 日期名称没有边框，没有背景，用灰色绘制
o 矩阵中上个月和下个月的天数有 LV_BUTTONMATRIX_CTRL_DISABLED 标志
o 今天（你指定的日期）有较厚的边框（使用主题的主色） - 突出显示的日期具有一定透明度的主题主颜色。
默认主题在工程中的样子具体如下图所示：

在GUI_Guider平台提供多种模块去设置日历控件，具体如下图所示：

（1） mian:指的是当前主体的阴影、边框与背景。
（2） header:指的是日历的标题颜色背景以及字体大小颜色设置。
（3） weekday names:是日历中每个周的字体大小和格式
（4） highlight day:是指图中29好的状态就是高亮状态，这里可以修改颜色以及字体大小和格式。
（5） today:指代码设置当天的标识状态，目前是灰色背景，在该界面中可以修改背景颜色以及字体大小和格式。
（6） days in other month:将日历中当前月份的其他日期设置，可以设置背景颜色以及字体的大小颜色和格式。
（7） days in current month:将日历中当前月份的日期设置，可以设置背景颜色以及字体的大小颜色和格式。

以下是具体的代码：
//Write codes screen_1_calendar_1
//在 screen_1 屏幕上创建了一个日历组件 screen_1_calendar_1。
ui->screen_1_calendar_1 = lv_calendar_create(ui->screen_1);
//设置当前日期
screen_1_calendar_1_today.year = 2025;
screen_1_calendar_1_today.month = 5;
screen_1_calendar_1_today.day = 28;
lv_calendar_set_today_date(ui->screen_1_calendar_1, screen_1_calendar_1_today.year, screen_1_calendar_1_today.month, screen_1_calendar_1_today.day);
//显示日期
lv_calendar_set_showed_date(ui->screen_1_calendar_1, screen_1_calendar_1_today.year, screen_1_calendar_1_today.month);
//高亮显示日期
screen_1_calendar_1_highlihted_days[0].year = 2025;
screen_1_calendar_1_highlihted_days[0].month = 5;
screen_1_calendar_1_highlihted_days[0].day = 29;
lv_calendar_set_highlighted_dates(ui->screen_1_calendar_1, screen_1_calendar_1_highlihted_days, 1);
//Write style state: LV_STATE_DEFAULT for &style_screen_1_calendar_1_main_main_default
//设置样式
static lv_style_t style_screen_1_calendar_1_main_main_default;
ui_init_style(&style_screen_1_calendar_1_main_main_default);

lv_style_set_border_width(&style_screen_1_calendar_1_main_main_default, 1);
lv_style_set_border_opa(&style_screen_1_calendar_1_main_main_default, 255);
lv_style_set_border_color(&style_screen_1_calendar_1_main_main_default, lv_color_hex(0xc0c0c0));
lv_style_set_border_side(&style_screen_1_calendar_1_main_main_default, LV_BORDER_SIDE_FULL);
lv_style_set_bg_opa(&style_screen_1_calendar_1_main_main_default, 255);
lv_style_set_bg_color(&style_screen_1_calendar_1_main_main_default, lv_color_hex(0xffffff));
lv_style_set_bg_grad_dir(&style_screen_1_calendar_1_main_main_default, LV_GRAD_DIR_NONE);
lv_style_set_shadow_width(&style_screen_1_calendar_1_main_main_default, 0);
lv_style_set_radius(&style_screen_1_calendar_1_main_main_default, 0);
lv_obj_add_style(ui->screen_1_calendar_1, &style_screen_1_calendar_1_main_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);

//Write style state: LV_STATE_DEFAULT for &style_screen_1_calendar_1_extra_header_main_default
// 头部样式
static lv_style_t style_screen_1_calendar_1_extra_header_main_default;
ui_init_style(&style_screen_1_calendar_1_extra_header_main_default);

lv_style_set_text_color(&style_screen_1_calendar_1_extra_header_main_default, lv_color_hex(0xffffff));
lv_style_set_text_font(&style_screen_1_calendar_1_extra_header_main_default, &lv_font_montserratMedium_12);
lv_style_set_text_opa(&style_screen_1_calendar_1_extra_header_main_default, 255);
lv_style_set_bg_opa(&style_screen_1_calendar_1_extra_header_main_default, 255);
lv_style_set_bg_color(&style_screen_1_calendar_1_extra_header_main_default, lv_color_hex(0x2195f6));
lv_style_set_bg_grad_dir(&style_screen_1_calendar_1_extra_header_main_default, LV_GRAD_DIR_NONE);
lv_obj_add_style(screen_1_calendar_1_header, &style_screen_1_calendar_1_extra_header_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);

//Write style state: LV_STATE_DEFAULT for &style_screen_1_calendar_1_main_items_default
//日历按钮矩阵项样式
static lv_style_t style_screen_1_calendar_1_main_items_default;
ui_init_style(&style_screen_1_calendar_1_main_items_default);

lv_style_set_bg_opa(&style_screen_1_calendar_1_main_items_default, 0);
lv_style_set_border_width(&style_screen_1_calendar_1_main_items_default, 1);
lv_style_set_border_opa(&style_screen_1_calendar_1_main_items_default, 255);
lv_style_set_border_color(&style_screen_1_calendar_1_main_items_default, lv_color_hex(0xc0c0c0));
lv_style_set_border_side(&style_screen_1_calendar_1_main_items_default, LV_BORDER_SIDE_FULL);
lv_style_set_text_color(&style_screen_1_calendar_1_main_items_default, lv_color_hex(0x0D3055));
lv_style_set_text_font(&style_screen_1_calendar_1_main_items_default, &lv_font_montserratMedium_12);
lv_style_set_text_opa(&style_screen_1_calendar_1_main_items_default, 255);
lv_obj_add_style(lv_calendar_get_btnmatrix(ui->screen_1_calendar_1), &style_screen_1_calendar_1_main_items_default, LV_PART_ITEMS|LV_STATE_DEFAULT);

下一期讲解日历控件如何添加回调。
本文章由威三学社出品
对课程感兴趣可以私信联系