LVGL Dropdown和Calendar详解

一、Dropdown详解

LVGL（Light and Versatile Graphics Library）是一个开源的嵌入式图形库，其中 lv_dropdown 是下拉框部件（Drop-down List）的实现。它允许用户在多个选项中选择一个，非常适用于表单选择类应用场景。下面是关于 lv_dropdown 的详细解析。

---

创建和初始化

要创建一个下拉框，可以通过以下方法：

lv_obj_t * dropdown = lv_dropdown_create(lv_scr_act());  // 创建一个下拉框对象
lv_obj_set_pos(dropdown, 10, 10);                       // 设置下拉框位置
lv_obj_set_size(dropdown, 120, 30);                     // 设置下拉框的尺寸

---

设置下拉框选项

下拉框的选项可以通过 lv_dropdown_set_options() 来设置。选项定义为一个字符串，选项之间用换行符 \n 分隔。

lv_dropdown_set_options(dropdown, "Option 1\nOption 2\nOption 3\nOption 4");

动态追加或修改选项时，可以动态拼接字符串再更新。

---

获取选项

获取选中项文本：

const char * txt = lv_dropdown_get_selected_str(dropdown);
printf("Selected: %s\n", txt);

获取选中项索引：

uint16_t index = lv_dropdown_get_selected(dropdown);
printf("Selected index: %d\n", index);

设置选中项：

lv_dropdown_set_selected(dropdown, 2);  // 选中索引为2的选项（索引从0开始）

---

事件处理

下拉框通常需要响应用户的选择行为，可以通过事件回调来处理。示例代码：

void dropdown_event_cb(lv_event_t * e)
{lv_obj_t * dropdown = lv_event_get_target(e);if(lv_event_get_code(e) == LV_EVENT_VALUE_CHANGED) {const char * selected = lv_dropdown_get_selected_str(dropdown);printf("Dropdown selected: %s\n", selected);}
}lv_obj_add_event_cb(dropdown, dropdown_event_cb, LV_EVENT_VALUE_CHANGED, NULL);

在上述代码中，事件 LV_EVENT_VALUE_CHANGED 触发时可以获取到当前选中的项。

---

其他功能和样式设置

设置下拉按钮样式：

通过 lv_dropdown_set_text() 方法可以设置按钮上的显示文本：

lv_dropdown_set_text(dropdown, "Choose an option");

设置下拉框方向：

通过设置下拉框的方向，可以控制下拉框展开的方式（例如向下或向上）：

lv_dropdown_set_dir(dropdown, LV_DIR_BOTTOM);  // 设置下拉展开方向为向下（默认）

其他方向可设置为 LV_DIR_TOP, LV_DIR_LEFT, LV_DIR_RIGHT，根据需求调整布局。

设置最大高度：

如果选项很多，超过最大高度时，下拉框将自动显示滚动条。

lv_dropdown_set_max_height(dropdown, 150);  // 设置下拉框的最大高度

设置隐藏滚动条：

可以通过样式来让滚动条不可见。

lv_obj_remove_style(dropdown, NULL, LV_PART_SCROLLBAR);

---

样式自定义

通过样式可以自定义下拉框外观（颜色、大小、字体等）。部分样式示例：

// 创建样式
lv_style_t style;
lv_style_init(&style);
lv_style_set_bg_color(&style, lv_color_hex(0x123456));   // 设置背景颜色
lv_style_set_text_font(&style, &lv_font_montserrat_18); // 设置选项文本字体// 应用样式到下拉框
lv_obj_add_style(dropdown, &style, LV_PART_MAIN);       // 给主部分应用样式
lv_obj_add_style(dropdown, &style, LV_PART_SELECTED);   // 给选中部分应用样式

---

高级功能

获取选项总数：

可以通过 lv_dropdown_get_option_cnt() 获取选项数量：

uint16_t count = lv_dropdown_get_option_cnt(dropdown);
printf("Option count: %d\n", count);

设置选项字符串动态更新：

可以替换所有选项：

lv_dropdown_set_options(dropdown, "New Option 1\nNew Option 2");

也可以通过 lv_dropdown_add_option() 向当前选项列表追加新选项：

lv_dropdown_add_option(dropdown, "New Option");  // 追加一个选项

---

多语言支持

下拉框选项支持直接输入 Unicode 字符，可以显示多语言字体。如果使用多语言环境，则需要将所需字体绑定到 LVGL，并正确编码。

---

典型应用场景

1. 表单选择：用户在多个选项中选择一个（例如国家、性别、语言等）。
2. 嵌入式配置调整：如用户在设备中选择模式（例如“自动模式”“手动模式”）。
3. 游戏或图形应用：下拉框用于选择道具、设置画笔大小等。

---

以上是 LVGL 中 lv_dropdown 的详解。根据实际项目需求，可以灵活利用下拉框部件并进行样式定制！

二、Calendar详解

LVGL（Light and Versatile Graphics Library）的 lv_calendar 是一个用于显示日期（或日历）的组件。它非常适用于需要时间数据交互的场景，比如用户选择日期、显示特定活动的时间表等。以下是对 lv_calendar 的详解，涵盖创建、使用、样式和事件处理。

---

基本概念

lv_calendar 是一个日历组件，显示一个月的日期，支持突出显示当天的日期，并标记多个关键日期。用户可以通过点击日期来选择它，也可以通过程序控制日期变化。

---

创建和初始化日历

创建一个日历，可以使用 lv_calendar_create() 函数。示例如下：

lv_obj_t * calendar = lv_calendar_create(lv_scr_act());  // 创建日历对象
lv_obj_set_size(calendar, 220, 220);                     // 设置尺寸
lv_obj_center(calendar);                                 // 放置在屏幕中心

设置当前显示的日期

通过 lv_calendar_set_today_date() 来设置今天的日期。通过 lv_calendar_set_showed_date() 来设置当前显示的月份和年份。

lv_calendar_set_today_date(calendar, 2023, 10, 20);  // 设置今天的日期为 2023年10月20日
lv_calendar_set_showed_date(calendar, 2023, 10);     // 显示 2023年10月

---

标记日期

日历支持标记（highlight）一些日期。标记的日期会以特殊样式显示出来。

定义标记日期数组

首先，需要定义一个数组用于存储标记日期：

static lv_calendar_date_t highlighted_days[3];
highlighted_days[0].year = 2023; highlighted_days[0].month = 10; highlighted_days[0].day = 15;
highlighted_days[1].year = 2023; highlighted_days[1].month = 10; highlighted_days[1].day = 18;
highlighted_days[2].year = 2023; highlighted_days[2].month = 10; highlighted_days[2].day = 25;

设置标记日期

通过 lv_calendar_set_highlighted_dates() 将标记日期数组传递给日历：

lv_calendar_set_highlighted_dates(calendar, highlighted_days, 3);  // 标记3个日期

---

获取选定日期

日历组件允许用户通过点击选择一个日期。可以通过事件回调捕获用户点击的行为并获取选定的日期。

添加事件回调

使用 LV_EVENT_VALUE_CHANGED 事件获取用户已选择的日期：

void calendar_event_handler(lv_event_t * e)
{lv_obj_t * calendar = lv_event_get_target(e);if(lv_event_get_code(e) == LV_EVENT_VALUE_CHANGED) {const lv_calendar_date_t * selected_date = lv_calendar_get_pressed_date(calendar);if(selected_date) {printf("Selected date: %d-%02d-%02d\n", selected_date->year, selected_date->month, selected_date->day);}}
}lv_obj_add_event_cb(calendar, calendar_event_handler, LV_EVENT_VALUE_CHANGED, NULL);

---

样式与外观

通过样式可以定制日历的每一个部分（背景、标题、日期样式等）。

样式分区

日历的样式分为以下几个部分：

• LV_PART_MAIN: 主背景部分。
• LV_PART_HEADER: 月份和年份显示的区域。
• LV_PART_DATE: 日期单元格，包括普通日期、今天和标记日期。
• LV_PART_SELECTED: 用户选择的日期单元格。

修改样式示例

// 创建样式
lv_style_t style;
lv_style_init(&style);// 设置背景颜色
lv_style_set_bg_color(&style, lv_color_hex(0xFFFFFF));      // 白色背景
lv_style_set_text_color(&style, lv_color_hex(0x0000FF));    // 蓝色文本// 应用样式到所有日期单元格
lv_obj_add_style(calendar, &style, LV_PART_DATE);// 设置选中单元格的样式
lv_style_set_border_color(&style, lv_color_hex(0xFF0000));  // 红色边框
lv_obj_add_style(calendar, &style, LV_PART_SELECTED);

---

扩展功能

事件切换月份

如果需要监听日历的月份切换事件，可以监控 LV_EVENT_VALUE_CHANGED。例如，当用户切换月份时可以触发显示新的数据。

void month_switch_event_cb(lv_event_t * e)
{lv_obj_t * calendar = lv_event_get_target(e);uint16_t year;uint8_t month;lv_calendar_get_showed_date(calendar, &year, &month);printf("Currently showing: %d-%02d\n", year, month);
}lv_obj_add_event_cb(calendar, month_switch_event_cb, LV_EVENT_VALUE_CHANGED, NULL);

---

高级功能

获取显示月份和年份：

使用 lv_calendar_get_showed_date() 函数获取当前正在显示的月份和年份。

uint16_t displayed_year;
uint8_t displayed_month;
lv_calendar_get_showed_date(calendar, &displayed_year, &displayed_month);
printf("Year: %d, Month: %d\n", displayed_year, displayed_month);

设置日历尺寸：

通过 lv_obj_set_size() 可以调整日历的大小。日历会自动调整内容布局以适应新的大小。

lv_obj_set_size(calendar, 250, 250);  // 设置日历尺寸

禁用点击选择：

如果不希望用户选择日期，可以用样式或事件屏蔽点击。

---

典型应用场景

• 日期选择器：用户通过日历选择某一天，类似于会议预约系统。
• 活动标记：显示带标记的日期，例如当前月份的重要活动日期。
• 实时时间显示：结合 RTC 或后台时间数据源，实时显示当前日期或时间。

---

总结起来，lv_calendar 是一个功能丰富且易用的组件。通过灵活的样式设置和事件管理，可以实现各种日历相关的交互界面。根据实际需求，可以进一步扩展实现复杂的时间功能。

三、效果展示

四、源码分享

.h

typedef struct
{lv_obj_t *screen;bool screen_del;lv_obj_t *screen_ddlist_1;lv_obj_t *screen_calendar_1;
}lv_ui;

.c

#include "lvgl.h"
#include <stdio.h>
#include "gui_guider.h"
#include "events_init.h"
#include "widgets_init.h"
#include "custom.h"lv_calendar_date_t screen_calendar_1_today;
lv_calendar_date_t screen_calendar_1_highlihted_days[1];
void setup_scr_screen(lv_ui *ui)
{//Write codes screenui->screen = lv_obj_create(NULL);lv_obj_set_size(ui->screen, 800, 480);lv_obj_set_scrollbar_mode(ui->screen, LV_SCROLLBAR_MODE_OFF);//Write style for screen, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.lv_obj_set_style_bg_opa(ui->screen, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_color(ui->screen, lv_color_hex(0x21d0e3), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_grad_dir(ui->screen, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);//Write codes screen_ddlist_1ui->screen_ddlist_1 = lv_dropdown_create(ui->screen);lv_dropdown_set_options(ui->screen_ddlist_1, "list1\nlist2\nlist3\nlist4");lv_obj_set_pos(ui->screen_ddlist_1, 499, 109);lv_obj_set_size(ui->screen_ddlist_1, 217, 29);//Write style for screen_ddlist_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.lv_obj_set_style_text_color(ui->screen_ddlist_1, lv_color_hex(0x0D3055), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_font(ui->screen_ddlist_1, &lv_font_montserratMedium_12, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_opa(ui->screen_ddlist_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_border_width(ui->screen_ddlist_1, 1, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_border_opa(ui->screen_ddlist_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_border_color(ui->screen_ddlist_1, lv_color_hex(0xe1e6ee), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_border_side(ui->screen_ddlist_1, LV_BORDER_SIDE_FULL, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_top(ui->screen_ddlist_1, 8, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_left(ui->screen_ddlist_1, 6, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_right(ui->screen_ddlist_1, 6, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_radius(ui->screen_ddlist_1, 3, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_opa(ui->screen_ddlist_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_color(ui->screen_ddlist_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_grad_dir(ui->screen_ddlist_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_shadow_width(ui->screen_ddlist_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);//Write style state: LV_STATE_CHECKED for &style_screen_ddlist_1_extra_list_selected_checkedstatic lv_style_t style_screen_ddlist_1_extra_list_selected_checked;ui_init_style(&style_screen_ddlist_1_extra_list_selected_checked);lv_style_set_border_width(&style_screen_ddlist_1_extra_list_selected_checked, 1);lv_style_set_border_opa(&style_screen_ddlist_1_extra_list_selected_checked, 255);lv_style_set_border_color(&style_screen_ddlist_1_extra_list_selected_checked, lv_color_hex(0xe1e6ee));lv_style_set_border_side(&style_screen_ddlist_1_extra_list_selected_checked, LV_BORDER_SIDE_FULL);lv_style_set_radius(&style_screen_ddlist_1_extra_list_selected_checked, 3);lv_style_set_bg_opa(&style_screen_ddlist_1_extra_list_selected_checked, 255);lv_style_set_bg_color(&style_screen_ddlist_1_extra_list_selected_checked, lv_color_hex(0x00a1b5));lv_style_set_bg_grad_dir(&style_screen_ddlist_1_extra_list_selected_checked, LV_GRAD_DIR_NONE);lv_obj_add_style(lv_dropdown_get_list(ui->screen_ddlist_1), &style_screen_ddlist_1_extra_list_selected_checked, LV_PART_SELECTED|LV_STATE_CHECKED);//Write style state: LV_STATE_DEFAULT for &style_screen_ddlist_1_extra_list_main_defaultstatic lv_style_t style_screen_ddlist_1_extra_list_main_default;ui_init_style(&style_screen_ddlist_1_extra_list_main_default);lv_style_set_max_height(&style_screen_ddlist_1_extra_list_main_default, 90);lv_style_set_text_color(&style_screen_ddlist_1_extra_list_main_default, lv_color_hex(0x0D3055));lv_style_set_text_font(&style_screen_ddlist_1_extra_list_main_default, &lv_font_montserratMedium_12);lv_style_set_text_opa(&style_screen_ddlist_1_extra_list_main_default, 255);lv_style_set_border_width(&style_screen_ddlist_1_extra_list_main_default, 1);lv_style_set_border_opa(&style_screen_ddlist_1_extra_list_main_default, 255);lv_style_set_border_color(&style_screen_ddlist_1_extra_list_main_default, lv_color_hex(0xe1e6ee));lv_style_set_border_side(&style_screen_ddlist_1_extra_list_main_default, LV_BORDER_SIDE_FULL);lv_style_set_radius(&style_screen_ddlist_1_extra_list_main_default, 3);lv_style_set_bg_opa(&style_screen_ddlist_1_extra_list_main_default, 255);lv_style_set_bg_color(&style_screen_ddlist_1_extra_list_main_default, lv_color_hex(0xffffff));lv_style_set_bg_grad_dir(&style_screen_ddlist_1_extra_list_main_default, LV_GRAD_DIR_NONE);lv_obj_add_style(lv_dropdown_get_list(ui->screen_ddlist_1), &style_screen_ddlist_1_extra_list_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);//Write style state: LV_STATE_DEFAULT for &style_screen_ddlist_1_extra_list_scrollbar_defaultstatic lv_style_t style_screen_ddlist_1_extra_list_scrollbar_default;ui_init_style(&style_screen_ddlist_1_extra_list_scrollbar_default);lv_style_set_radius(&style_screen_ddlist_1_extra_list_scrollbar_default, 3);lv_style_set_bg_opa(&style_screen_ddlist_1_extra_list_scrollbar_default, 255);lv_style_set_bg_color(&style_screen_ddlist_1_extra_list_scrollbar_default, lv_color_hex(0x00ff00));lv_style_set_bg_grad_dir(&style_screen_ddlist_1_extra_list_scrollbar_default, LV_GRAD_DIR_NONE);lv_obj_add_style(lv_dropdown_get_list(ui->screen_ddlist_1), &style_screen_ddlist_1_extra_list_scrollbar_default, LV_PART_SCROLLBAR|LV_STATE_DEFAULT);//Write codes screen_calendar_1ui->screen_calendar_1 = lv_calendar_create(ui->screen);screen_calendar_1_today.year = 2025;screen_calendar_1_today.month = 4;screen_calendar_1_today.day = 1;lv_calendar_set_today_date(ui->screen_calendar_1, screen_calendar_1_today.year, screen_calendar_1_today.month, screen_calendar_1_today.day);lv_calendar_set_showed_date(ui->screen_calendar_1, screen_calendar_1_today.year, screen_calendar_1_today.month);screen_calendar_1_highlihted_days[0].year = 2025;screen_calendar_1_highlihted_days[0].month = 4;screen_calendar_1_highlihted_days[0].day = 2;lv_calendar_set_highlighted_dates(ui->screen_calendar_1, screen_calendar_1_highlihted_days, 1);lv_obj_t *screen_calendar_1_header = lv_calendar_header_arrow_create(ui->screen_calendar_1);lv_calendar_t *screen_calendar_1 = (lv_calendar_t *)ui->screen_calendar_1;lv_obj_add_event_cb(screen_calendar_1->btnm, screen_calendar_1_draw_part_begin_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);lv_obj_add_event_cb(ui->screen_calendar_1, screen_calendar_1_event_handler, LV_EVENT_ALL, NULL);lv_obj_set_pos(ui->screen_calendar_1, 99, 96);lv_obj_set_size(ui->screen_calendar_1, 280, 210);//Write style state: LV_STATE_DEFAULT for &style_screen_calendar_1_main_main_defaultstatic lv_style_t style_screen_calendar_1_main_main_default;ui_init_style(&style_screen_calendar_1_main_main_default);lv_style_set_border_width(&style_screen_calendar_1_main_main_default, 1);lv_style_set_border_opa(&style_screen_calendar_1_main_main_default, 255);lv_style_set_border_color(&style_screen_calendar_1_main_main_default, lv_color_hex(0xc0c0c0));lv_style_set_border_side(&style_screen_calendar_1_main_main_default, LV_BORDER_SIDE_FULL);lv_style_set_bg_opa(&style_screen_calendar_1_main_main_default, 255);lv_style_set_bg_color(&style_screen_calendar_1_main_main_default, lv_color_hex(0xffffff));lv_style_set_bg_grad_dir(&style_screen_calendar_1_main_main_default, LV_GRAD_DIR_NONE);lv_style_set_shadow_width(&style_screen_calendar_1_main_main_default, 0);lv_style_set_radius(&style_screen_calendar_1_main_main_default, 0);lv_obj_add_style(ui->screen_calendar_1, &style_screen_calendar_1_main_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);//Write style state: LV_STATE_DEFAULT for &style_screen_calendar_1_extra_header_main_defaultstatic lv_style_t style_screen_calendar_1_extra_header_main_default;ui_init_style(&style_screen_calendar_1_extra_header_main_default);lv_style_set_text_color(&style_screen_calendar_1_extra_header_main_default, lv_color_hex(0xffffff));lv_style_set_text_font(&style_screen_calendar_1_extra_header_main_default, &lv_font_montserratMedium_12);lv_style_set_text_opa(&style_screen_calendar_1_extra_header_main_default, 255);lv_style_set_bg_opa(&style_screen_calendar_1_extra_header_main_default, 255);lv_style_set_bg_color(&style_screen_calendar_1_extra_header_main_default, lv_color_hex(0x2195f6));lv_style_set_bg_grad_dir(&style_screen_calendar_1_extra_header_main_default, LV_GRAD_DIR_NONE);lv_obj_add_style(screen_calendar_1_header, &style_screen_calendar_1_extra_header_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);//Write style state: LV_STATE_DEFAULT for &style_screen_calendar_1_main_items_defaultstatic lv_style_t style_screen_calendar_1_main_items_default;ui_init_style(&style_screen_calendar_1_main_items_default);lv_style_set_bg_opa(&style_screen_calendar_1_main_items_default, 0);lv_style_set_border_width(&style_screen_calendar_1_main_items_default, 1);lv_style_set_border_opa(&style_screen_calendar_1_main_items_default, 255);lv_style_set_border_color(&style_screen_calendar_1_main_items_default, lv_color_hex(0xc0c0c0));lv_style_set_border_side(&style_screen_calendar_1_main_items_default, LV_BORDER_SIDE_FULL);lv_style_set_text_color(&style_screen_calendar_1_main_items_default, lv_color_hex(0x0D3055));lv_style_set_text_font(&style_screen_calendar_1_main_items_default, &lv_font_montserratMedium_12);lv_style_set_text_opa(&style_screen_calendar_1_main_items_default, 255);lv_obj_add_style(lv_calendar_get_btnmatrix(ui->screen_calendar_1), &style_screen_calendar_1_main_items_default, LV_PART_ITEMS|LV_STATE_DEFAULT);//The custom code of screen.//Update current screen layout.lv_obj_update_layout(ui->screen);}