LVGL圆弧、线条、图片、色环、按钮矩阵、文本区域、键盘部件
目录
LVGL圆弧部件
LVGL线条部件
LVGL图片部件
LVGL色环部件
LVGL按钮矩阵部件
LVGL文本区域部件
LVGL键盘部件
LVGL圆弧部件
圆弧部件以弧形滑动的形式来调节、显示某个参数的值。
圆弧部件组成部分：
背景弧（LV_PART_MAIN）
前景弧（LV_PART_INDICATOR）
旋钮（LV_PART_KNOB）
创建圆弧部件：
lv_obj_t *arc = lv_arc_create(parent);设置范围值、当前值：
lv_arc_set_range(arc, 0, 200); /* 设置范围值 */ lv_arc_set_value(arc, 80); /* 设置当前值(需要在范围值之内) */设置圆弧角度（不建议使用）：
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);static void event_cb(lv_event_t *e) { lv_obj_t *target = lv_event_get_target(e); printf("%d \n", lv_arc_get_value(target)); } lv_obj_add_event_cb(arc,event_cb, LV_EVENT_VALUE_CHANGED, NULL);设置模式、圆弧绘制速率：
lv_arc_set_mode(arc, LV_PART_MODE_REVERSE); /* 设置模式 */ lv_arc_set_change_rate(arc, 90); /* 绘制速率：90°/s */
LVGL线条部件
线条部件能够在一组坐标点之间依次绘制直线。
线条部件组成部分：
主体（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_point(line, line_point, 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);
Tips：第42讲 部件篇-线条部件_哔哩哔哩_bilibili演示了正弦波的产生函数。
LVGL图片部件
图片部件可用于图片显示、功能界面优化、背景优化等。
图片部件组成部分：
主体（LV_PART_MAIN）
创建图片部件：
lv_obj_t *img = lv_img_create(parent);设置图片源（图片转数组工具：LVGL官网-Tools-Image converter）：
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); /* 设置中心点 */
LVGL色环部件
在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);static lv_obj_t *obj; static void event_cb(lv_event_t *e) { lv_obj_t *target = lv_event_get_target(e); lv_obj_set_style_bg_color(obj, lv_colorwheel_get_rgb(target), LV_PART_MAIN); } obj = lv_obj_create(lv_src_act()); lv_obj_add_event_cb(cw, event_cb, LV_EVENT_VALUE_CHANGED, NULL);设置色环模式：
enum{ LV_COLORWHEEL_MODE_HUE, /* 色相 */ LV_COLORWHEEL_MODE_SATURATION, /* 饱和度 */ LV_COLORWHEEL_MODE_VALUE, /* 明度 */ }; lv_colorwheel_set_mode(cw, LV_COLORWHEEL_MODE_...); lv_colorwheel_set_mode_fixed(cw, true); /* 固定色环模式 */
LVGL按钮矩阵部件
按钮矩阵部件可以在不同的行和列中显示多个轻量级按钮。
按钮矩阵部件组成部分：
主体（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); /* 设置按钮 */设置按钮相对宽度（默认为1）：
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); /* 获取文本 */static void event_cb(lv_event_t *e) { uint8_t id; lv_obj_t *target = lv_event_get_target(e); id = lv_btnmatrix_get_selected_btn(target); printf("%d %s\n", id, lv_btnmatrix_get_btn_text(target, id)); } lv_obj_add_event_cb(btnm, event_cb, LV_EVENT_VALUE_CHANGED, NULL);设置、清除按钮属性：
enum { LV_BTNMATRIX_CTRL_HIDDEN, /* 隐藏 */ LV_BTNMATRIX_CTRL_DISABLED, /* 失能 */ LV_BTNMATRIX_CTRL_CHECKABLE, /* 允许状态切换 */ LV_BTNMATRIX_CTRL_RECOLOR, /* 允许文本重新着色，#ff0000 btn1# */ }; 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....); /* 设置所有按钮属性 */设置单次选中属性：
lv_btnmatrix_set_one_checked(btnm, true); /* 注意：需要先设置允许状态切换属性 */
LVGL文本区域部件
文本区域部件即文本输入框，用户可以在其中输入文本内容。
文本区域部件组成部分：
主体（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); /* 获取文本框文本 */static void event_cb(lv_event_t *e) { lv_obj_t *target = lv_event_get_target(e); const char *txt = lv_textarea_get_text(target); if(strcmp(txt, "123456") == 0) { printf("pass \n"); } printf("%s \n", txt); } lv_obj_add_event_cb(ta, event_cb, LV_EVENT_VALUE_CHANGED, NULL);对比文本内容：
strcmp(const char *s1, const char *s2); /* 当s1=s2时，返回0 */
LVGL键盘部件
键盘部件可用于输入文本内容，其本质上就是一个特殊的按钮矩阵。
键盘部件组成部分：
主体（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); /* 数字键盘模式 */