LVGL Dropdown和Calendar详解
- 一、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，并正确编码。
典型应用场景
- 表单选择：用户在多个选项中选择一个（例如国家、性别、语言等）。
- 嵌入式配置调整：如用户在设备中选择模式（例如“自动模式”“手动模式”）。
- 游戏或图形应用：下拉框用于选择道具、设置画笔大小等。
以上是 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 screen
ui->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_1
ui->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_checked
static 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_default
static 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_default
static 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_1
ui->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_default
static 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_default
static 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_default
static 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);
}
