LVGL快速入门笔记

本文主要是介绍LVGL快速入门笔记，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、基础知识

1. 基础对象（lv_obj）

2. 基础对象的大小(size)

3. 基础对象的位置(position)

3.1 直接设置方式

3.2 参照父对象对齐

3.3 获取位置

4. 基础对象的盒子模型(border-box)

5. 基础对象的样式(styles)

5.1 样式的状态和部分

5.1.1 对象可以处于以下状态States的组合：

5.1.2 对象可以有部分(parts) ，它们也可以有自己的样式。LVGL 中存在以下预定义部分：

6. 基础对象的事件(events)

二、基础组件

1. 标签 lv_label

2. 按钮 lv_btn

3. 开关 lv_switch

4. 复选框 lv_checkbox

5. 下拉列表 lv_dropdown

6. 滚轮 lv_roller

7. 进度条 lv_bar

8. 滑动条 lv_slider

9. 圆弧 lv_arc

10. 定时器 lv_timer

11. 线条 lv_line

12. 文本框 lv_textarea

13. 按钮矩阵 lv_btnmatrix

14. 窗体部件 lv_win

15. 图片部件 lv_img

一、基础知识

1. 基础对象（lv_obj）

lv_scr_act(void); // 活动屏幕

lv_layer_top(void); // 顶层

lv_layer_sys(void); // 系统层

lv_layer_sys<-lv_layer_top<-lv_scr_act 最上层到底层的显示排序

void lv_100ask_demo_test(void)
{lv_obj_t * cb = lv_checkbox_create(lv_layer_sys());lv_obj_t * obj = lv_obj_create(lv_layer_top());lv_obj_t * label = lv_label_create(lv_scr_act());
lv_obj_center(cb);lv_obj_center(label);lv_obj_center(obj);
}

2. 基础对象的大小(size)

设置宽度：lv_obj_set_width(obj, new_width);

设置高度：lv_obj_set_height(obj, new_height);

同时设置宽度、高度：lv_obj_set_size(obj, new_ width, new_ height)

获取宽度：lv_obj_get_width(obj);

获取高度：lv_obj_get_height(obj);

3. 基础对象的位置(position)

3.1 直接设置方式

设置x轴方向的坐标位置：lv_obj_set_x(obj, new_x);

设置y轴方向的坐标位置：lv_obj_set_y(obj, new_y);

同时设置x、y坐标位置：lv_obj_set_pos(obj, new_x, new_y);

3.2 参照父对象对齐

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)

对齐类型(LV_ALIGN_...)

void lv_100ask_demo_test(void)
{lv_obj_t * cb = lv_checkbox_create(lv_scr_act());lv_obj_t * obj = lv_obj_create(lv_scr_act());lv_obj_t * label = lv_label_create(lv_scr_act());//lv_obj_center(cb);lv_obj_set_align(obj, LV_ALIGN_CENTER);lv_obj_align(label, LV_ALIGN_CENTER, 100, 0);lv_obj_align_to(cb, obj, LV_ALIGN_OUT_BOTTOM_MID, 0, 0);
}

3.3 获取位置

获取x轴坐标位置：lv_obj_get_x(obj);

获取y轴坐标位置：lv_obj_get_y(obj);

4. 基础对象的盒子模型(border-box)

void lv_100ask_demo_test(void)
{lv_obj_t * obj1 = lv_obj_create(lv_scr_act());lv_obj_align(obj1, LV_ALIGN_CENTER, 0, 0);lv_obj_set_style_border_width(obj1, 10, 0);lv_obj_set_style_outline_width(obj1, 10, 0);//在border基础上加宽
#if 0lv_obj_t * obj2 = lv_obj_create(lv_scr_act());lv_obj_t * obj_out_top = lv_obj_create(lv_scr_act());lv_obj_t * obj_out_bottom = lv_obj_create(lv_scr_act());lv_obj_t * obj_out_left = lv_obj_create(lv_scr_act());lv_obj_t * obj_out_right = lv_obj_create(lv_scr_act());//lv_obj_set_style_outline_width(obj_out_left, 10, 0);
lv_obj_align(obj1, LV_ALIGN_CENTER, 0, 0);lv_obj_align_to(obj_out_top, obj1, LV_ALIGN_OUT_TOP_MID, 0, 0);lv_obj_align_to(obj_out_bottom, obj1, LV_ALIGN_OUT_BOTTOM_MID, 0, 0);lv_obj_align_to(obj_out_left, obj1, LV_ALIGN_OUT_LEFT_MID, 0, 0);lv_obj_align_to(obj_out_right, obj1, LV_ALIGN_OUT_RIGHT_MID, 0, 0);lv_obj_align_to(obj2, obj_out_right, LV_ALIGN_OUT_TOP_MID, 0, 0);

#endif
}

5. 基础对象的样式(styles)

void lv_100ask_demo_test(void)
{// 正常样式static lv_style_t style_obj;lv_style_init(&style_obj);
lv_style_set_bg_color(&style_obj, lv_color_hex(0x000000));      // 设置背景色lv_style_set_text_color(&style_obj, lv_color_hex(0xc43e1c));    // 设置文字颜色lv_style_set_bg_opa(&style_obj, 30);                          // 设置透明度lv_obj_t * obj = lv_obj_create(lv_scr_act());lv_obj_add_style(obj, &style_obj, 0);  // 默认状态: LV_STATE_DEFAULTlv_obj_t * obj2 = lv_obj_create(lv_scr_act());lv_obj_align(obj2, LV_ALIGN_CENTER, 0 ,0);lv_obj_add_style(obj2, &style_obj, LV_STATE_PRESSED);  // 按下状态，当对象被按下的时候应用该样式lv_obj_t * obj3 = lv_obj_create(lv_scr_act());lv_obj_align_to(obj3, obj2, LV_ALIGN_OUT_BOTTOM_MID, 0, 0);lv_obj_set_style_bg_color(obj3,  lv_color_hex(0xc43e1c), LV_STATE_PRESSED);   // 设置背景色lv_obj_set_style_bg_opa(obj3, LV_OPA_50, 0);lv_obj_t * label = lv_label_create(lv_scr_act());lv_label_set_text(label, "Hello, LVGL!");lv_obj_align_to(label, obj2, LV_ALIGN_OUT_TOP_MID, 0, 0);lv_obj_add_style(label, &style_obj, 0);  // 默认状态: LV_STATE_DEFAULT
}

5.1 样式的状态和部分

5.1.1 对象可以处于以下状态States的组合：

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) 禁用状态

LV_STATE_USER_1 (0x1000) 自定义状态

LV_STATE_USER_2 (0x2000) 自定义状态

LV_STATE_USER_3 (0x4000) 自定义状态

LV_STATE_USER_4 (0x8000) 自定义状态

5.1.2 对象可以有部分(parts) ，它们也可以有自己的样式。LVGL 中存在以下预定义部分：

LV_PART_MAIN 类似矩形的背景

LV_PART_SCROLLBAR 滚动条

LV_PART_INDICATOR 指标，例如用于滑块、条、开关或复选框的勾选框

LV_PART_KNOB 像手柄一样可以抓取调整值

LV_PART_SELECTED 表示当前选择的选项或部分

LV_PART_ITEMS 如果小部件具有多个相似元素（例如表格单元格）

LV_PART_TICKS 刻度上的刻度，例如对于图表或仪表

LV_PART_CURSOR 标记一个特定的地方，例如文本区域或图表的光标

LV_PART_CUSTOM_FIRST 可以从这里添加自定义部件。

这些可能会随着lvgl的更新而不断增加，同学们可以阅读最新版本的文档获取最新资料。

6. 基础对象的事件(events)

static void my_event_cb(lv_event_t * e)
{lv_obj_t * obj1 = lv_event_get_target(e);        // 获取触发事件的部件(对象)lv_event_code_t code = lv_event_get_code(e);    // 获取当前部件(对象)触发的事件代码lv_obj_t * label1 = lv_event_get_user_data(e);   // 获取添加事件时传递的用户数据
switch(code){case LV_EVENT_PRESSED:lv_label_set_text(label1, "LV_EVENT_PRESSED");lv_obj_set_style_bg_color(obj1, lv_color_hex(0xc43e1c), 0);  // 通过本地样式(私有样式)设置背景色printf("LV_EVENT_PRESSED\n");break;case LV_EVENT_LONG_PRESSED:lv_label_set_text(label1, "LV_EVENT_LONG_PRESSED");lv_obj_set_style_bg_color(obj1, lv_color_hex(0x4cbe37), 0);  // 通过本地样式(私有样式)设置背景色printf("LV_EVENT_LONG_PRESSED\n");break;default://printf("NONE\n");break;}
}

void lv_100ask_demo_course_2_2_6(void)
{/* 创建基础部件(对象) */lv_obj_t * obj = lv_obj_create(lv_scr_act());
/* 创建label部件(对象) */lv_obj_t * label = lv_label_create(lv_scr_act());lv_label_set_text(label, "test");   // 设置label展示的文字lv_obj_center(label);               // 将对象与其父对象的中心对齐，这里的父对象是屏幕：lv_scr_act()
// 为obj1添加事件回调函数，所有的事件类型都能触发该回调函数lv_obj_add_event_cb(obj, my_event_cb, LV_EVENT_ALL, label);
}

二、基础组件

1. 标签 lv_label

创建标签：

lv_obj_t * label = lv_label_create(parent);

设置显示文本：

直接设置要显示的文本：lv_label_set_text(label, "New text");

格式化给定要显示的文本：lv_label_set_text_fmt(label, “%s: %d”, “Value”, 15);

文本不存储在动态内存中，而是直接使用给定的缓冲区：lv_label_set_text_static(label, "New text");

要在label换行非常简单，像printf函数那样使用 \n 即可：lv_label_set_text(label, " line1\nline2\n\nline4 ");

设置显示文本大小：

默认情况标签的大小会自动拓展成和文本一样的大小(LV_SIZE_CONTENT)，如果可以像前面课程说到的方法显式设置宽高： lv_obj_set_size lv_obj_set_width lv_obj_set_height

这样就可能出现文本的宽度或高度大小label的情况，就需要做一些调整，下面是几种模式： LV_LABEL_LONG_WRAP 如果有多个换行，并且如果高度为LV_SIZE_CONTENT，那么高度会根据文本换行被自动扩展；否则文本将被剪掉。(默认设置)

LV_LABEL_LONG_DOT 如果文本太长，就保持大小并在末尾写3个点

LV_LABEL_LONG_SCROLL 如果文本比标签宽(太长)，则可以水平来回滚动显示它。如果它很高(多个\n换行)，可以垂直滚动。只滚动一个方向，水平滚动的优先级更高。

LV_LABEL_LONG_SCROLL_CIRCULAR 如果文本比标签宽，则水平滚动它。如果它更高，就垂直滚动。只滚动一个方向，水平滚动的优先级更高。

LV_LABEL_LONG_CLIP 剪掉超出标签范围外的文本部分。

可以使用 lv_label_set_long_mode(label, LV_LABEL_LONG_...) 指定模式。

注意：LV_LABEL_LONG_DOT 是直接操作文本缓冲区以添加/删除点。如果使用 lv_label_set_text 和 lv_label_set_text_fmt 它们会分配一个单独的缓冲区，不会出问题。但是如果使用 lv_label_set_text_static 时我们传递给它的缓冲区必须是可写的。

文本着色：

我们可以很方便地给我们的要显示的文本重新着色，可以通过样式来上色，例如： lv_style_set_text_color(&style_obj, lv_color_hex(0xf7b37b));

lv_obj_set_style_text_color(label, lv_color_hex(0xf7b37b), 0);

也可以让文本某些部分重新着色，例如：

lv_label_set_recolor(label1, true);

lv_label_set_text(label1, "#0000ff Re-color# #ff00ff words# #ff0000 of a# label);

文本选择：

如果在 lv_conf.h 中打开了 LV_LABEL_TEXT_SELECTION (默认开启)，就可以选择部分文本了。这个和我们在PC用鼠标选中文本类似，但是这个效果只能在文本框(lv_textarea)中实现。Label只能事先手动选择指定范围的文本：

lv_label_set_text_sel_start(label, 1);

lv_label_set_text_sel_end(label, 6);

注意，这里的第一个字符从1开始算，而不是0。

显示图标：

LVGL内置了一些图标，它们是全局变量我们可以直接使用：

用法很简单(LV_SYMBOL_...)：

lv_label_set_text(my_label, LV_SYMBOL_OK); // 直接显示图标

lv_label_set_text(my_label, LV_SYMBOL_OK “Apply”); // 图标与字符串一起使用

lv_label_set_text(my_label, LV_SYMBOL_OK LV_SYMBOL_WIFI LV_SYMBOL_PLAY); // 多个图标一起使用

显示中文字体：

有待补充*

void lv_100ask_demo_test(void)
{char * text = "www.100ask.net";   // 要显示的文字lv_obj_t * label = lv_label_create(lv_scr_act());   // 创建一个label部件(对象),他的父对象是活动屏幕对象
lv_obj_set_size(label, 100, 100);//设置大小都是一样的lv_obj_set_align(label, LV_ALIGN_CENTER);//lv_label_set_text(label, text);//lv_label_set_text(label, "www.100ask.net\nywh"); // 也可以这样使用//lv_label_set_text_fmt(label, "%s: %d", "Value", 15);//lv_label_set_text_static(label, text);/* 设置要显示的文字，直接使用给定的缓冲区(不常用) *///lv_label_set_text_static(label, text);//lv_label_set_text_static(label, "www.100ask.net"); // 也可以这样使用/* 设置文字字号(内置ASCII字库) *//* 使用其他字号的字体，如果不设置默认使用 lv_font_montserrat_14 ，在 lv_conf.h 中 LV_FONT_DEFAULT 定义 */lv_obj_set_style_text_font(label, &lv_font_montserrat_28, 0);  // 为了方便，这里使用本地(私有)样式lv_obj_set_style_text_color(label, lv_color_hex(0xf7b37b), 0);lv_label_set_recolor(label, true);lv_label_set_text(label,LV_SYMBOL_PLAY "#0000ff Re-color# #ff00ff words# #ff0000 of a# label " LV_SYMBOL_OK " " LV_SYMBOL_WIFI);lv_label_set_long_mode(label,LV_LABEL_LONG_SCROLL);
}