LVGL基础对象
基础对象
基础对象（lv_obj）可以作为父对象，来创建其他对象，同时它也可作为部件使用。
父和子对象的关系
子对象会随着父对象移动
子对象的位置超出父对象的范围，则超出的部分不显示
部件的基本属性
大小（size）
部件大小（size）相关参数
部件大小（size）设置相关API函数：
| 函数 | 作用 |
|---|---|
| lv_obj_set_width(obj, new_width) | 设置宽度 |
| lv_obj_set_height(obj, new_height) | 设置高度 |
| lv_obj_set_size(obj, new_width, new_height) | 同时设置宽度、高度 |
位置（position）
LVGL屏幕坐标
部件位置（position）相关参数
部件位置（position）设置相关API函数
| 函数 | 作用 |
|---|---|
| llv_obj_set_x(obj, new_x) | 设置X轴坐标 |
| lv_obj_set_y(obj, new_y) | 设置Y轴坐标 |
| lv_obj_set_pos(obj, new_x, new_y) | 同时设置X、Y轴坐标 |
对齐（alignment）
参照父对象对齐
参照父对象对齐
lv_obj_set_align(obj, LV_ALIGN_...);
参照父对象对齐，再进行偏移
lv_obj_align(obj, LV_ALIGN_..., x, y);
参照其他对象对齐（无父子关系）
参照其他对象对齐（无父子关系），再进行偏移
lv_obj_align_to(obj_to_align, obj_referece, LV_ALIGN_..., x, y);
obj_to_align：基准对象
obj_referece：需要对齐的对象
对齐的模式
样式（styles）
样式用于设置部件的外观，以优化显示界面和实现用户交互
添加普通样式：
static lv_style_t style; /* 定义样式变量 */
lv_style_init(&style); /* 初始化样式 */
lv_style_set_bg_color(&style, lv_color_hex(0xf4b183)); /* 设置背景颜色 */
lv_obj_t * obj = lv_obj_create(lv_scr_act()); /* 创建一个部件 */
lv_obj_add_style(obj, & style, LV_STATE_DEFAULT); /* 设置部件的样式 */
添加本地样式：
lv_obj_t * obj = lv_obj_create(lv_scr_act()); /* 创建一个部件 */
lv_obj_set_style_bg_color(obj, lv_color_hex(0xf4b183),LV_STATE_DEFAULT); /* 设置部件的样式 */
什么时候样式会生效
enum {
LV_STATE_DEFAULT = 0x0000, /* 默认状态 */
LV_STATE_CHECKED = 0x0001, /* 切换或选中状态 */
LV_STATE_FOCUSED = 0x0002, /* 通过键盘、编码器聚焦或通过触摸板、鼠标单击 */
LV_STATE_FOCUS_KEY = 0x0004, /* 通过键盘、编码器聚焦 */
LV_STATE_EDITED = 0x0008, /* 由编码器编辑 */
LV_STATE_HOVERED = 0x0010, /* 鼠标悬停（现在不支持）*/
LV_STATE_PRESSED = 0x0020, /* 已按下 */
LV_STATE_SCROLLED = 0x0040, /* 滚动状态 */
LV_STATE_DISABLED = 0x0080, /* 禁用状态 */
…
};
有哪些样式属性可以设置
如何单独设置部件中某个部分的样式
enum {
LV_PART_MAIN = 0x000000, /* 主体，像矩形一样的背景 */
LV_PART_SCROLLBAR = 0x010000, /* 滚动条 */
LV_PART_INDICATOR = 0x020000, /* 指示器，指示当前值 */
LV_PART_KNOB = 0x030000, /* 手柄或旋钮，用于调整参数值 */
LV_PART_SELECTED = 0x040000, /* 选项框，指示当前选择的选项 */
LV_PART_ITEMS = 0x050000, /* 相似的元素，例如单元格 */
LV_PART_TICKS = 0x060000, /* 刻度 */
LV_PART_CURSOR = 0x070000, /* 光标 */
};
事件（events）
LVGL中，当发生用户感兴趣的事情时，可以触发回调事件，以执行相关的操作
事件（events）相关API函数
| 函数 | 作用 |
|---|---|
| lv_obj_add_event_cb(obj, event_cb, event_code, user_data); | 添加事件 |
| lv_obj_remove_event_cb(obj, event_cb) | 删除事件 |
event_cb：事件回调函数
event_code：事件类型
user_data：用户数据
不同的事件类型共用一个事件回调函数怎么处理
static void event_cb( lv_event_t *e )
{
lv_event_code_t code = lv_event_get_code(e); /* 第一步：获取事件类型 */
if ( code == LV_EVENT_CLICKED ) /* 第二步：判断事件类型 */
{
printf(“事件类型: 按下后释放\r\n”); /* 第三步：执行相应操作 */
}
else if ( code == LV_EVENT_LONG_PRESSED)
{
printf(“事件类型:按下（长按）\r\n”);
}
}
不同的部件共用一个事件回调函数怎么处理
static void event_cb( lv_event_t *e )
{
lv_obj_t *target = lv_event_get_target(e); /* 第一步：获取触发事件的部件 */
if ( target == parent_obj ) /* 第二步：判断触发事件的部件 */
{
printf(“父对象触发事件 \r\n”); /* 第三步：执行相应操作 */
}
else if ( target == child_obj )
{
printf(“子对象触发事件 \r\n”);
}
}
LVGL部件
标签部件（lv_label ）
在 LVGL 中，标签部件主要用于文本显示，例如标题、提示信息等
标签部件组成部分
主体（LV_PART_MAIN）
滚动条（LV_PART_SCROLLBAR）
选中的文本（LV_PART_SELECTED）
创建标签部件
lv_obj_t *label = lv_label_create(parent);
设置文本的3种方式
① 直接设置文本，存储文本的内存动态分配 ：
lv_label_set_text( label, "hallo \n lvgl");
② 文本不存储在动态内存，而是在指定的缓冲区中（慎用）：
lv_label_set_text_static( label,"hallo" );
③ 格式化显示文本，类似printf ：
lv_label_set_text_fmt( label, “Value: %d”, 50 ) ;
设置文本样式
① 背景颜色：
lv_obj_set_style_bg_color( label, lv_color_hex(0xffe1d4), LV_STATE_DEFAULT );
② 字体大小：
lv_obj_set_style_text_font( label, &lv_font_montserrat_30, LV_STATE_DEFAULT );
③ 文本颜色：
lv_obj_set_style_text_color( label, lv_color_hex(0xf7b37b), LV_STATE_DEFAULT );
设置个别文本的字体颜色
lv_label_set_recolor( label, true ); /* 开启重新着色功能 */
lv_label_set_text( label, "hallo #ff0000 lvgl# " ); /* 单独设置颜色 */
当文本长度超过部件大小的时候怎么显示
默认情况下，如果没有限定标签部件大小，那它的大小自动扩展为文本大小。
长文本模式
lv_label_set_long_mode(label, LV_LABEL_LONG_...);
enum {
LV_LABEL_LONG_WRAP, /* 默认模式, 如果部件大小已固定，超出的文本将被剪切 */
LV_LABEL_LONG_DOT, /* 将 label 右下角的最后 3 个字符替换为点… */
LV_LABEL_LONG_SCROLL, /* 来回滚动 */
LV_LABEL_LONG_SCROLL_CIRCULAR, /* 循环滚动 */
LV_LABEL_LONG_CLIP, /* 直接剪切掉部件外面的文本部分 */
};
按钮部件（lv_btn）
按钮部件组成部分
主体（LV_PART_MAIN）
创建按钮部件
lv_obj_t *btn = lv_btn_create( parent );
设置样式
lv_obj_set_size( btn, 100, 50 ); /* 大小 */
lv_obj_set_align( btn, LV_ALIGN_CENTER ); /* 对齐 */
lv_obj_set_style_bg_color( btn, lv_color_hex(0xffe1d4), LV_STATE_PRESSED ); /* 背景颜色 */
添加事件
lv_obj_add_flag( btn, LV_OBJ_FLAG_CHECKABLE ); /* 开启状态切换 */
lv_obj_add_event_cb( btn, event_cb, LV_EVENT_VALUE_CHANGED,NULL ); /* 添加事件 */
开关部件（lv_switch）
开关部件常用于控制某个功能的开启和关闭，它可以直接显示被控对象的状态。
开关部件组成部分
主体（LV_PART_MAIN）
手柄（LV_PART_KNOB）
指示器（LV_PART_INDICATOR）
创建开关部件
lv_obj_t *switch1 = lv_switch_create( parent );
添加、清除开关状态
lv_obj_add_state(switch1, LV_STATE_CHECKED | LV_STATE_DISABLED); /* 添加状态：默认打开且不可修改 */
lv_obj_clear_state(switch1, LV_STATE_CHECKED | LV_STATE_DISABLED); /* 清除开关的状态 */
获取（判断）开关状态
lv_obj_has_state(switch1, LV_STATE_CHECKED) /* 返回值：bool类型，开 :1；关: 0 */
LV_STATE_CHECKED：开启状态
复选框部件（lv_checkbox）
复选框部件常用于选择某个内容的开启和关闭，可以理解为自带标签的开关。
复选框部件组成部分
主体（LV_PART_MAIN）
勾选框（LV_PART_INDICATOR）
创建复选框部件
lv_obj_t *checkbox = lv_checkbox_create (parent );
文本设置
lv_checkbox_set_text( checkbox, "remember the password" ); /* 设置文本内容 */
lv_obj_set_style_pad_column( checkbox, 20, LV_STATE_DEFAULT ); /* 设置文本和勾选框的间距 */
添加、清除复选框状态
lv_obj_add_state(checkbox, LV_STATE_CHECKED | LV_STATE_DISABLED); /* 添加状态：默认选中且不可修改 */
lv_obj_clear_state(checkbox, LV_STATE_CHECKED | LV_STATE_DISABLED); /* 清除复选框的状态 */
获取（判断）复选框状态
lv_obj_has_state(checkbox, LV_STATE_CHECKED); /* 返回值：1，选中； 0，非选中 */
进度条部件（lv_bar）
进度条部件常用于显示当前任务的完成进度
进度条部件组成部分
主体(LV_PART_MAIN）
指示器(LV_PART_INDICATOR)
创建进度条部件
lv_obj_t *bar = lv_bar_create ( parent );
设置大小、当前值、范围值
lv_obj_set_size( bar, 400, 20 ); /* 设置大小 */
lv_bar_set_value( bar, 50, LV_ANIM_ON ); /* 设置当前值 */
lv_bar_set_range( bar, -100, 100 ); /* 设置范围值 */
设置动画时间
lv_obj_set_style_anim_time( bar, 500, LV_STATE_DEFAULT ); /* 动画设置必须放在当前值设置之前 */
设置模式、起始值
lv_bar_set_mode( bar, LV_BAR_MODE_RANGE ); /* 设置模式 */
lv_bar_set_start_value( bar, -50, LV_ANIM_OFF ); /* 设置起始值 */
enum {
LV_BAR_MODE_NORMAL, /* 默认模式 */
LV_BAR_MODE_SYMMETRICAL, /* 从零值绘制到当前值（当前值可以小于0） */
LV_BAR_MODE_RANGE /* 允许设置起始值，但起始值必须小于当前值 */
};
注意：在V8.2版本的LVGL中，默认模式也允许设置起始值，但是后续的版本可能会修改。
进度条使用注意事项（V8.2版本）
当进度条高度大于宽度时，其方向变为垂直
动画时间设置需要放在当前值设置之前 ，否则看不到动画效果
动画时间指的是旧值刷新到新值的绘图时间，并不是现实中当前值变化所需的时间
加载器部件（lv_spinner）
加载器部件常用于提示当前任务正在加载
加载器部件组成部分
主体(LV_PART_MAIN）
指示器(LV_PART_INDICATOR)
手柄(LV_PART_KNOB)
创建加载器部件
lv_obj_t *spinner = lv_spinner_create( parent, spin_time, arc_length );
设置圆弧颜色
lv_obj_set_style_arc_color( spinner, lv_color_hex(0x4a9f00), LV_PART_MAIN ); /* 设置主体圆弧颜色 */
lv_obj_set_style_arc_color( spinner, lv_color_hex(0x83bd55), LV_PART_INDICATOR ); /* 设置指示器圆弧颜色 */
设置圆弧宽度
lv_obj_set_style_arc_width( spinner, 30, LV_PART_MAIN ); /* 设置主体圆弧宽度 */
lv_obj_set_style_arc_width( spinner, 30, LV_PART_INDICATOR ); /* 设置指示器圆弧宽度 */
LED部件（lv_led）
LED部件常用于指示控制对象的状态
主体（LV_PART_MAIN）
创建LED部件
lv_obj_t *led = lv_led_create( parent );
设置LED颜色、亮度
lv_led_set_color( led, lv_color_hex(0xff0000) ); /* 设置LED颜色 */
lv_led_set_brightness( led, 0 ); /* 设置LED亮度，范围0~255*/
设置LED状态
lv_led_on( led ); /* 打开LED（设置亮度为255）*/
lv_led_off( led ); /* 关闭LED */
lv_led_toggle( led ); /* 翻转LED状态 */
列表部件（lv_list）
列表部件常用于多选一的场景，默认会展现多个选项
列表部件组成部分
主体(LV_PART_MAIN）
滚动条(LV_PART_SCROLLBAR)
创建列表部件
lv_obj_t *list = lv_list_create( parent );
添加列表文本
lv_list_add_text( list, “Settings" );
添加列表按钮
lv_obj_t *btn= lv_list_add_btn( list, LV_SYMBOL_WIFI, “WLAN");
获取列表按钮文本
lv_list_get_btn_text( list, list_btn );
下拉列表部件（lv_dropdown）
下拉列表部件常用于多选一的场景，点击后可展现多个选项
下拉列表部件组成部分
按钮（BUTTON）
列表（LIST)
创建下拉列表部件
lv_obj_t *dd = lv_dropdown_create( parent );
设置选项内容
lv_dropdown_set_options( dd, "a\nb\nc\nd"); /* 设置选项 */
lv_dropdown_set_options_static( dd, "a\nb\nc\nd "); /* 设置选项 （静态）*/
lv_dropdown_add_option( dd, "e", 4); /* 添加选项，索引从0开始 */
设置当前所选项
lv_dropdown_set_selected( dd, 1); /* 注意：索引从0开始 */
获取选项内容
lv_dropdown_get_selected( dd); /* 获取索引 */
char buf[10];
lv_dropdown_get_selected_str( dd, buf, sizeof(buf)); /* 获取选项文本 */
设置方向和图标
lv_dropdown_set_dir(dd, LV_DIR_RIGHT); /* 设置列表展开方向 */
lv_dropdown_set_symbol(dd, LV_SYMBOL_RIGHT); /* 设置图标 */
滚轮部件（lv_roller）
滚轮部件常用于多选一的场景，它以滚轮的形式来展现多个选项
滚轮部件组成部分
主体（LV_PART_MAIN）
选项框（LV_PART_SELECTED)
创建滚轮部件
lv_obj_t *roller= lv_roller_create( parent );
设置选项间隔
lv_obj_set_style_text_line_space(roller, 30, LV_STATE_DEFAULT);
设置选项内容、滚动模式
lv_roller_set_options(roller, “a\nb\nc\nd”, LV_ROLLER_MODE_NORMAL); /* 正常模式 */
设置当前所选项
lv_roller_set_selected(roller, 3, LV_ANIM_ON);
设置可见行数
lv_roller_set_visible_row_count(roller, 2);
获取选项内容
lv_roller_get_selected(roller); /* 获取索引 */
char buf[10];
lv_roller_get_selected_str(roller, buf, sizeof(buf)); /* 获取选项文本 */
滑块部件（lv_slider）
滑块部件常用于调节某个参数的值，它以直线滑动的形式来修改数值。
滑块部件组成部分
主体(LV_PART_MAIN）
指示器(LV_PART_INDICATOR)
旋钮(LV_PART_KNOB)
创建滑块部件
lv_obj_t *slider = lv_slider_create( parent );
设置大小、当前值、范围值
lv_obj_set_size(slider, 20, 200); /* 高度>宽度时，滑块为纵向 */
lv_slider_set_value(slider, 50, LV_ANIM_OFF); /* 设置当前值 */
lv_slider_set_range(slider, -100, 100); /* 设置范围值 */
获取当前值
lv_slider_get_value(slider);
模式设置
lv_slider_set_mode(slider, LV_SLIDER_MODE_...);
设置、获取左值
lv_slider_set_left_value(slider, 20, LV_ANIM_OFF); /* 设置左值 */
lv_slider_get_left_value(slider); /* 获取左值 */
圆弧部件（lv_arc）
圆弧部件以弧形滑动的形式来调节、显示某个参数的值
圆弧部件组成部分
背景弧(LV_PART_MAIN）
前景弧(LV_PART_INDICATOR)
旋钮(LV_PART_KNOB)
创建圆弧部件
lv_obj_t *arc = lv_arc_create( parent );
设置当前值、范围值
lv_arc_set_value(arc, 80); /* 设置当前值（需要在范围值之内）*/
lv_arc_set_range(arc, 0, 200); /* 设置范围值 */
设置圆弧角度
lv_arc_set_angles(arc, 135, 270); /* 设置前景弧角度 */
lv_arc_set_bg_angles(arc, 135, 45); /* 设置背景弧角度 */
设置旋转角度
lv_arc_set_rotation(arc, 180);
获取当前值
lv_arc_get_value(arc);
设置模式、圆弧绘制速率
lv_arc_set_mode(arc, LV_ARC_MODE_REVERSE); /* 设置模式 */
lv_arc_set_change_rate(arc, 90); /* 绘制速率：90°/秒 */
线条部件（lv_line）
线条部件能够在一组坐标点之间依次绘制直线。
线条部件组成部分
主体(LV_PART_MAIN）
创建线条部件
lv_obj_t *line = lv_line_create( parent );
设置线条坐标点
static lv_point_t line_points[] = { {15, 5}, {25, 20}, {5, 20}, {15, 5} };
lv_line_set_points(line, line_points, 4);
设置线条样式
lv_obj_set_style_line_width(line, 8, LV_PART_MAIN); /* 设置宽度 */
lv_obj_set_style_line_rounded(line, true, LV_PART_MAIN); /* 设置圆角 */
设置y轴反转
lv_line_set_y_invert(line, true);
图片部件（lv_img）
图片部件可用于图片显示、功能界面优化、背景优化等。
图片部件组成部分
主体(LV_PART_MAIN）
创建图片部件
lv_obj_t *img = lv_img_create( parent );
设置图片源
LV_IMG_DECLARE(img_bird); /* 声明图片 */
lv_img_set_src(img, &img_bird); /* 设置图片源 */
设置图片偏移
lv_img_set_offset_x(img, 100); /* x轴偏移100 */
lv_img_set_offset_y(img, 20); /* y轴偏移20 */
图片重新着色
lv_obj_set_style_img_recolor(img, lv_color_hex(0xffe1d2), LV_PART_MAIN);
lv_obj_set_style_img_recolor_opa(img, 150, LV_PART_MAIN);
设置图片缩放、旋转
lv_img_set_zoom(img, 512); /* 放大2倍 */
lv_img_set_angle(img, 900); /* 顺时针方向旋转90° */
设置中心点
lv_obj_update_layout(img); /* 更新图片布局信息 */
lv_img_set_pivot(img, 0, 0); /* 设置中心点 */
色环部件（lv_colorwheel）
在UI设计中，色环部件一般用作颜色选择器。
色环部件组成部分
主体(LV_PART_MAIN）
旋钮(LV_PART_KNOB)
创建色环部件
lv_obj_t *cw = lv_colorwheel_create( parent, knob_recolor );
设置当前选中颜色
lv_colorwheel_set_rgb(cw, lv_color_hex(0xff0000));
获取当前选中颜色
lv_colorwheel_get_rgb(cw);
设置色环模式
lv_colorwheel_set_mode(cw, LV_COLORWHEEL_MODE_HUE/SATURATION/VALUE); /* 色相、饱和度、明度 */
lv_colorwheel_set_mode_fixed(cw, true); /* 固定色环模式 */
按钮矩阵部件（lv_btnmatrix）
按钮矩阵部件可以在不同的行和列中显示多个轻量级按钮
按钮矩阵部件组成部分
主体(LV_PART_MAIN）
按钮(LV_PART_ITEMS)
创建按钮矩阵部件
lv_obj_t *btnm = lv_btnmatrix_create(parent);
设置按钮数量、文本
static const char *map[] = { "btn1", "\n", "btn2", "btn3", "" }; /* 定义按钮数组，最后一个元素必须为空 */
lv_btnmatrix_set_map(btnm, map); /* 设置按钮 */
设置按钮相对宽度
lv_btnmatrix_set_btn_width(btnm, id, width); /* 索引 (id) 从0开始，宽度1~7 ( 默认为1 ) */
获取按钮索引、文本
lv_btnmatrix_get_selected_btn(btnm); /* 获取索引 */
lv_btnmatrix_get_btn_text(btnm, id); /* 获取文本 */
设置、清除按钮属性
lv_btnmatrix_set_btn_ctrl(btnm, id, LV_BTNMATRIX_CTRL_...); /* 设置单个按钮属性 */
lv_btnmatrix_clear_btn_ctrl(btnm, id, LV_BTNMATRIX_CTRL_...); /* 清除单个按钮属性 */
lv_btnmatrix_set_btn_ctrl_all(btnm, LV_BTNMATRIX_CTRL_...); /* 设置所有按钮属性 */
enum {
LV_BTNMATRIX_CTRL_HIDDEN, /* 隐藏 */
LV_BTNMATRIX_CTRL_DISABLED, /* 失能 */
LV_BTNMATRIX_CTRL_CHECKABLE, /* 允许状态切换 */
LV_BTNMATRIX_CTRL_RECOLOR, /* 允许文本重新着色 */
};
设置单次选中属性
lv_btnmatrix_set_one_checked(btnm, true); /* 注意：需要先设置允许状态切换属性 */
文本区域部件(lv_textarea)
文本区域部件即文本输入框，用户可以在其中输入文本内容。
文本区域部件组成部分
主体(LV_PART_MAIN）
滚动条(LV_PART_SCROLLBAR)
所选文本(LV_PART_SELECTED）
光标(LV_PART_CURSOR)
占位符(TEXTAREA_PLACEHOLDER)
创建文本区域部件
lv_obj_t *ta = lv_textarea_create(parent);
添加文本
lv_textarea_add_char(ta, 'A'); /* 添加一个字符到当前光标处 */
lv_textarea_add_text(ta, "BCDEF"); /* 添加字符串到当前光标处 */
lv_obj_t *keyboard = lv_keyboard_create(lv_scr_act()); /* 创建键盘部件 */
lv_keyboard_set_textarea(keyboard, ta); /* 关联键盘和文本区域部件 */
设置光标位置
lv_textarea_set_cursor_pos(ta, 0); /* 0：最左侧， LV_TEXTAREA_CURSOR_LAST：最右侧 */
删除文本
lv_textarea_del_char(ta); /* 删除光标左侧的一个字符 */
lv_textarea_del_char_forward(ta); /* 删除光标右侧的一个字符 */
设置模式
lv_textarea_set_one_line(ta, true); /* 单行模式 */
lv_textarea_set_password_mode(ta, true); /* 密码模式（隐藏输入的内容） */
lv_textarea_set_password_show_time(ta, 100); /* 密码显示时间 */
限制字符输入
lv_textarea_set_accepted_chars(ta,"0123456789"); /* 限制接收的字符 */
lv_textarea_set_max_length(ta,6); /* 限制字符长度 */
设置占位符
lv_textarea_set_placeholder_text(ta, "password"); /* 提示输入密码 */
获取文本
const char *txt = lv_textarea_get_text(ta); /* 获取文本框文本 */
比对文本内容
strcmp(const char *s1,const char *s2); /* 当s1=s2时，返回0 */
键盘部件(lv_keyboard)
键盘部件可用于输入文本内容，其本质上就是一个特殊的按钮矩阵。
键盘部件组成部分
主体(LV_PART_MAIN）
按钮(LV_PART_ITEMS)
创建键盘部件
lv_obj_t *kb = lv_keyboard_create(parent);
关联文本框
lv_obj_t *ta = lv_textarea_create(lv_scr_act()); /* 创建文本区域部件 */
lv_keyboard_set_textarea(kb, ta); /* 关联键盘和文本区域部件 */
设置按键弹窗
lv_keyboard_set_popovers(kb, true); /* 允许按键弹窗提示 */
设置键盘模式
lv_keyboard_set_mode(kb, LV_KEYBOARD_MODE_NUMBER); /* 数字键盘模式 */
图片按钮部件(lv_imgbtn)
图片按钮部件类似于按钮部件，不同的是，用户可以在其中设置图片。
图片按钮部件组成部分
主体(LV_PART_MAIN）
创建图片按钮部件
lv_obj_t *imgbtn = lv_imgbtn_create(parent);
设置图片源、按钮大小
lv_imgbtn_set_src(imgbtn, LV_IMGBTN_STATE_..., src_left, src_mid, src_right); /* 设置某个状态的图片源 */
lv_obj_set_size(imgbtn, 64 * 3, 64); /* 设置图片按钮大小 */
设置按钮状态
lv_imgbtn_set_state(imgbtn, LV_IMGBTN_STATE_PRESSED); /* 设置按下状态 */
如何显示带有透明度通道的图片
① 准备一张带有透明度通道的图片
② 官方图片转换工具中，色彩格式选择：CF_TRUE_COLOR_ALPHA
③ 声明图片并调用即可
选项卡部件(lv_tabview)
选项卡部件可以实现多页面切换，用户可以在不同的页面中添加内容。
选项卡部件组成部分
主体（lv_obj）
按钮（lv_btnmatrix)
创建选项卡部件
lv_obj_t *tabview = lv_tabview_create(parent, LV_DIR_..., tab_size);
添加选项卡
lv_obj_t *tab1 = lv_tabview_add_tab(tabview, "Tab 1");
lv_obj_t *tab2 = lv_tabview_add_tab(tabview, "Tab 2");
设置当前选中的选项卡
lv_tabview_set_act(tabview, 1, LV_ANIM_OFF); /* 索引从0开始 */
平铺视图部件(lv_tileview)
平铺视图部件可以实现不同方向的页面切换，用户可以页面中添加内容。
平铺视图部件组成部分
主体(LV_PART_MAIN）
滚动条(LV_PART_SCROLLBAR)
创建平铺视图部件
lv_obj_t *tileview = lv_tileview_create( parent );
添加页面
lv_obj_t *tile1 = lv_tileview_add_tile( tileview, 0, 0, LV_DIR_RIGHT );
lv_obj_t *tile2 = lv_tileview_add_tile( tileview, 1, 0, LV_DIR_LEFT );
设置当前显示页面
lv_obj_update_layout( tileview ); /* 更新参数 */
lv_obj_set_tile( tileview, tile2, LV_ANIM_OFF ); /* 根据页面对象设置 */
lv_obj_set_tile_id( tileview, 1, 0, LV_ANIM_OFF ); /* 根据页面行列设置 */
窗口部件(lv_win)
窗口部件可以作为一个容器，展现不同功能的页面。
窗口部件组成部分
头部（Header）
主体（Content）
创建窗口部件
lv_obj_t *win = lv_win_create(parent, header_height);
添加标题、按钮
lv_obj_t *title = lv_win_add_title(win, "Setting");
lv_obj_t *btn = lv_win_add_btn(win, LV_SYMBOL_CLOSE, 20);
添加主体内容
lv_obj_t *content = lv_win_get_content(win); /* 获取主体 */
lv_obj_t *label = lv_label_create(content); /* 添加内容 */
消息框部件(lv_msgbox)
消息框部件可以实现弹窗提示，常用于消息通知、确定操作等。
消息框部件组成部分
主体（obj）
标题（title）
关闭按钮（close_btn）
内容（content）
按钮矩阵（btnmatrix）
创建消息框部件
static const char *btns[] = { "Continue", "Close", "" };
lv_obj_t *msgbox = lv_msgbox_create( lv_scr_act(), "Notice", "Do you want to continue?", btns, true );
关闭消息框
lv_msgbox_close(msgbox);
获取按钮索引、文本
lv_obj_t *target = lv_event_get_current_target(e); /* 获取当前触发源 */
lv_msgbox_get_active_btn(target); /* 获取按钮索引 */
lv_msgbox_get_active_btn_text(target); /* 获取按钮文本 */
微调器部件(lv_spinbox)
微调器部件本质上就是一个数字文本，常用于精确调节某个参数的值。
微调器部件组成部分
主体(LV_PART_MAIN）
光标(LV_PART_CURSOR)
创建微调器部件
lv_obj_t *spinbox = lv_spinbox_create(parent);
数值递增、递减
lv_spinbox_increment(spinbox); /* 递增 */
lv_spinbox_decrement(spinbox); /* 递减 */
设置步进值、范围值
lv_spinbox_set_step(spinbox, 200); /* 设置步进值，默认为1*/
lv_spinbox_set_range(spinbox, -1000, 1000); /* 设置范围值，默认±99999*/
设置当前值
lv_spinbox_set_value(spinbox, 400);
设置数字格式、光标位置
lv_spinbox_set_digit_format(spinbox, 4, 2); /* 设置数字位数、小数点位置 */
lv_spinbox_set_pos(spinbox, 3); /* 设置光标位置 */
获取当前值
lv_spinbox_get_value(spinbox); /* 返回值为整数，而非小数 */
表格部件(lv_table)
表格部件由一个个单元格组成，它的单元格中只能存放文本形式的内容。
表格部件组成部分
主体(LV_PART_MAIN）
单元格(LV_PART_ITEMS)
创建表格部件
lv_obj_t *table = lv_table_create(parent);
设置行数、列数
lv_table_set_row_cnt(table,2); /* 设置行数 */
lv_table_set_col_cnt(table,2); /* 设置列数 */
lv_table_set_col_width(table, 1, 200); /* 设置列的宽度 */
设置单元格的内容
lv_table_set_cell_value(table, 0, 0, "123");
lv_table_set_cell_value_fmt(table, 1, 0, "%d", 100 ); /* 格式化输入，类似printf */
控件之日历（lv_calendar）
日历部件组成部分
主体背景 (LV_PART_MAIN)
各个按钮 (LV_PART_ITEMS)（指向日期和名称）
LV_PART_MAIN 日历的背景。使用所有与背景相关的样式属性。
LV_PART_ITEMS 指日期和日期名称。设置按钮矩阵控制标志来区分不同的按钮（日期），并添加自定义绘制（drawer）事件，可参考如下方式修改按钮的属性：
- 日期名称没有边框，没有背景，用灰色绘制
- 矩阵中上个月和下个月的天数有 LV_BUTTONMATRIX_CTRL_DISABLED 标志
- 今天（你指定的日期）有较厚的边框（使用主题的主色）
- 突出显示的日期有一些不透明度（使用主题的主色）。
创建日历
lv_obj_t *lv_calendar_create(lv_obj_t *parent);
日期的设置/显示
设置当前日期
lv_calendar_set_today_date(lv_obj_t * obj, uint32_t year, uint32_t month, uint32_t day)
显示日期
lv_calendar_set_showed_date(lv_obj_t * obj, uint32_t year, uint32_t month)
lv_calendar_set_today_date(calendar, 2025, 3, 29);
lv_calendar_set_showed_date(calendar, 2025, 3);
日历头
调用 lv_calendar_header_dropdown_create 函数设置；(下拉列表)
调用 lv_calendar_header_arrow_create 函数设置。(按键)
lv_calendar_header_dropdown_create(calendar);
lv_calendar_header_arrow_create(calendar);
源代码里没有 2025 年，所以直接显示的是 1901 年。因此要在源代码中加入 2025 年
在文件 lvgl\src\extra\widgets\calendar\lv_calendar_header_dropdown.c 下：
static const char * year_list = {
"2025\n2024\n2023\n2022\n2021\n"
"2020\n2019\n2018\n2017\n2016\n2015\n2014\n2013\n2012\n2011\n2010\n2009\n2008\n2007\n2006\n2005\n2004\n2003\n2002\n2001\n"
"2000\n1999\n1998\n1997\n1996\n1995\n1994\n1993\n1992\n1991\n1990\n1989\n1988\n1987\n1986\n1985\n1984\n1983\n1982\n1981\n"
"1980\n1979\n1978\n1977\n1976\n1975\n1974\n1973\n1972\n1971\n1970\n1969\n1968\n1967\n1966\n1965\n1964\n1963\n1962\n1961\n"
"1960\n1959\n1958\n1957\n1956\n1955\n1954\n1953\n1952\n1951\n1950\n1949\n1948\n1947\n1946\n1945\n1944\n1943\n1942\n1941\n"
"1940\n1939\n1938\n1937\n1936\n1935\n1934\n1933\n1932\n1931\n1930\n1929\n1928\n1927\n1926\n1925\n1924\n1923\n1922\n1921\n"
"1920\n1919\n1918\n1917\n1916\n1915\n1914\n1913\n1912\n1911\n1910\n1909\n1908\n1907\n1906\n1905\n1904\n1903\n1902\n1901"
};
设置日期高亮
lv_calendar_get_highlighted_dates(calendar);
设置日名
const char *day_names[7] = {"7", "1", "2", "3", "4", "5", "6"};
lv_calendar_set_day_names(calendar, day_names);
事件
LV_EVENT_VALUE_CHANGED：如果单击日期，则发送该事件，通过调用函数 lv_calendar_get_pressed_date(calendar, &date) 将 date 设置为当前按下的日期。如果存在，则返回 LV_RES_OK 有效的按下日期，否则 LV_RES_INVALID
| 函数 | 作用 |
|---|---|
| lv_calendar_create() | 创建日历部件 |
| lv_calendar_set_today_date() | 设置当前的日期 |
| lv_calendar_set_showed_date() | 设置显示的日期 |
| lv_calendar_set_highlighted_dates() | 设置高亮显示的日期 |
| lv_calendar_set_day_names() | 设置日历（星期）的名称 |
| lv_calendar_get_btnmatrix() | 获取日历的按钮矩阵对象 |
| lv_calendar_get_today_date() | 获取当前的日期 |
| lv_calendar_get_showed_date() | 获取当前显示的日期 |
| lv_calendar_get_highlighted_dates() | 获取高亮显示的日期 |
| lv_calendar_get_highlighted_dates_num() | 获取高亮显示的日期数量 |
| lv_calendar_get_pressed_date() | 获取当前按下的日期 |
扫一扫
1080
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
