代码收藏家 LVGL部件使用指南
LVGL的编程思想
LVGL采用的是面向对象的编程思想，以抽象的类来实例化不同的对象（部件）。
C语言中没有“类”的概念，LVGL以结构体的形式来实现“类”的思维。
LVGL 基础对象
基础对象简介
基础对象（lv_obj）可以作为父对象，来创建其他对象，同时它也可作为部件使用。
父和子对象的关系
部件的基本属性
大小
部件大小（size）相关参数
部件大小（size）设置相关API函数：
位置（position）
部件位置（position）设置相关API函数：
对齐（alignment）
样式（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中，当发生用户感兴趣的事情时，可以触发回调事件，以执行相关的操作。
不同的事件类型共用一个事件回调函数怎么处理？
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_obj_t *label = lv_label_create(parent);
① 直接设置文本，存储文本的内存动态分配 ：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）
在LVGL中，按钮部件与基础对象相比，没有新增任何功能。
按钮部件组成部分：
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_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_checkbox)
复选框部件常用于选择某个内容的开启和关闭，可以理解为自带标签的开关。
复选框部件组成部分：
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_bar)
进度条部件常用于显示当前任务的完成进度。
进度条部件组成部分：
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_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_obj_t *led = lv_led_create( parent );
lv_led_set_color( led, lv_color_hex(0xff0000) ); /* 设置LED颜色 */
lv_led_set_brightness( led, 0 ); /* 设置LED亮度，范围0~255*/
lv_led_on( led ); /* 打开LED（设置亮度为255）*/
lv_led_off( led ); /* 关闭LED */
lv_led_toggle( led ); /* 翻转LED状态 */
列表部件(lv_list)
列表部件常用于多选一的场景，默认会展现多个选项。
列表部件组成部分：
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)
下拉列表部件常用于多选一的场景，点击后可展现多个选项。
下拉列表部件组成部分：
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_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_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_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_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); /* 设置圆角 */
lv_line_set_y_invert(line, true);
图片部件(lv_img)
图片部件可用于图片显示、功能界面优化、背景优化等。
图片部件组成部分：
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_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_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_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_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_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_tabview)
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_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)
窗口部件可以作为一个容器，展现不同功能的页面。
窗口部件组成部分：
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)
消息框部件可以实现弹窗提示，常用于消息通知、确定操作等。
消息框部件组成部分：
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_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_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 */
