【LVGL】部件

引言

仅作笔记，无参考价值！

一、标签部件（lv_lable）

1、创建标签部件

第二种设置文本的方式带来的问题：

1. 指定的缓冲区内存被修改或释放，则这个文本中的数据是不可靠的。
2. 假如缓冲区是只读的话，通过代码段将文本写到缓冲区中则程序容易崩溃。

示例程序

void my_gui(void)
{
    // 创建标签部件
    lv_obj_t *label = lv_label_create(lv_scr_act());   /* 创建一个标签部件 */
    // 设置文本的三种方式
    // 1、lv_label_set_text(label, "hallo");           /* 直接设置文本，存储文本的内存动态分配 */
    // 2、lv_label_set_text_static(label, "hallo");    /* 文本不存储在动态内存区，而是在指定的缓存区中（慎用） */
    // 3、lv_label_set_text_fmt(label, "hallo%d", 50); /* 格式化显示文本，类似printf方式使用 */
}

现象：（仅展示第三个）

2、改变文本样式

示例程序

void my_gui(void)
{
    lv_obj_t *label = lv_label_create(lv_scr_act());     /* 创建一个标签部件 */
    lv_label_set_text(label, "hallo");   /* 直接设置文本，存储文本的内存动态分配 */

    lv_obj_set_style_bg_color( label, lv_color_hex(0xff0000), LV_STATE_DEFAULT );   /* 设置背景颜色 */
    lv_obj_set_style_bg_opa( label, 100, LV_STATE_DEFAULT );   /* 设置背景透明度 */
    // lv_conf.h文件中官方提供字体，需要哪一个字体要在宏中勾上
    lv_obj_set_style_text_font( label, &lv_font_montserrat_48, 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# " ); /* 单独设置颜色 */
}

现象：

3、显示长文本

示例程序

void my_gui(void)
{
    lv_obj_t *label = lv_label_create(lv_scr_act());     /* 创建一个标签部件 */
    lv_label_set_text(label, "hallo hallo hallo hallo hallo hallo hallo hallo hallo hallo hallo hallo hallo hallo hallo hallo hallo");   /* 直接设置文本，存储文本的内存动态分配 */
    lv_obj_set_size(label, 100, 50);    /* 设置标签大小：长宽 */

    lv_label_set_long_mode(label, LV_LABEL_LONG_DOT);   /* 设置长文本后为省略模式 */
}

现象：

附：缓冲区标签崩溃现象

void my_gui(void)
{
    lv_obj_t *label = lv_label_create(lv_scr_act());     /* 创建一个标签部件 */
    lv_label_set_text_static(label, "hallo hallo hallo hallo hallo hallo hallo hallo hallo hallo hallo hallo hallo hallo hallo hallo hallo");   /* 文本存储在缓存区中 */
    lv_obj_set_size(label, 100, 50);    /* 设置标签大小：长宽 */

    lv_label_set_long_mode(label, LV_LABEL_LONG_DOT);   /* 设置长文本后为省略模式 */
}

以上程序将标签文本存储在了缓存区中，文本是从代码段传入的是只读的，而lv_label_set_long_mode函数是改变文本的内容，从而就发生了崩溃，故说lv_label_set_text_static此函数不熟悉内存时需要慎用。

二、按钮部件（lv_btn）

按钮相关 api 函数

示例程序

在添加按钮的变化触发事件前，需要开启状态切换lv_obj_add_flag(btn, LV_OBJ_FLAG_CHECKABLE);

#include "lvgl.h"
#include "stdio.h"
#include "my_gui.h"

void event_cb(lv_event_t *e)
{
    lv_event_code_t code = lv_event_get_code(e);
    if (code == LV_EVENT_VALUE_CHANGED) {
        printf("LV_EVENT_VALUE_CHANGED\r\n");
    }
}

void my_gui(void)
{
    lv_obj_t *btn = lv_btn_create(lv_scr_act());     /* 创建一个按钮部件 */
    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(0xfff000), 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);         /* 开启状态切换后再添加事件，按钮变化(changed)触发事件 */
}

三、开关部件（lv_switch）

与按钮部件不同的是，开关部件可以直接显示被控对象的状态，而按钮部件必须要开启状态切换功能才可显示被控对象的状态。

设置指示器颜色

由于开关默认状态下，主体完全覆盖了指示器LV_PART_INDICATOR；切换开关状态的时候，开关就不是默认状态了，所以指示器的背景颜色就不会再生效。此时只需设置一个状态LV_STATE_CHECKED即可。程序如下：

void my_gui(void)
{
    lv_obj_t *switch1 = lv_switch_create(lv_scr_act());     /* 创建一个开关部件 */
    lv_obj_set_style_bg_color(switch1, lv_color_hex(0xdf5345), LV_STATE_CHECKED | LV_PART_INDICATOR);   /* 设置指示器背景颜色 */
}

开关相关 api 函数

示例程序

lv_obj_t *switch1;

void event_cb(lv_event_t *e)
{
    lv_event_code_t code = lv_event_get_code(e);    /* 获取触发事件 */
    if (code == LV_EVENT_VALUE_CHANGED) {
        if (lv_obj_has_state(switch1, LV_STATE_CHECKED)) {  /* 获取开关状态，bool，开：1，关：0 */
            printf ("on\r\n");
        } else {
            printf("off\r\n");
        }
    }
}

void my_gui(void)
{
    switch1 = lv_switch_create(lv_scr_act());     /* 创建一个开关部件 */
    lv_obj_set_style_bg_color(switch1, lv_color_hex(0xdf5345), LV_STATE_CHECKED | LV_PART_INDICATOR);   /* 设置指示器背景颜色 */
    lv_obj_add_state(switch1, LV_STATE_CHECKED);    /* 添加开关状态 */
    lv_obj_clear_state(switch1, LV_STATE_CHECKED);  /* 清除开关状态 */
//    lv_obj_add_state(switch1, LV_STATE_CHECKED | LV_STATE_DISABLED);    /* 添加开关状态，并且状态不可修改 */
//    lv_obj_clear_state(switch1, LV_STATE_CHECKED | LV_STATE_DISABLED);  /* 清除开关状态，并且清除状态不可修改 */

    lv_obj_add_event_cb(switch1, event_cb, LV_EVENT_VALUE_CHANGED, NULL);   /* 添加一个值变化触发事件 */
}

四、复选框部件（lv_checkbox）

复选框相关 api 函数

示例程序

lv_obj_t *checkbox;

static void event_cb(lv_event_t *e)
{
    lv_event_code_t code = lv_event_get_code(e);
    if (code == LV_EVENT_VALUE_CHANGED) {
        if(lv_obj_has_state(checkbox, LV_STATE_CHECKED)) {
            printf("on\r\n");
        } else {
            printf("off\r\n");
        }
    }
}

void my_gui(void)
{
    checkbox = lv_checkbox_create(lv_scr_act());  /* 创建一个复选框 */
    lv_obj_set_align(checkbox, LV_ALIGN_CENTER);    /* 设置对齐 */
    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);   /* 给复选框添加状态，disable表示不可修改状态 */
    lv_obj_clear_state(checkbox, LV_STATE_CHECKED | LV_STATE_DISABLED);   /* 清除复选框状态，并清除disable不可修改状态 */
    lv_obj_add_event_cb(checkbox, event_cb, LV_EVENT_VALUE_CHANGED, NULL);  /* 给复选框添加事件 */
}

五、进度条部件（lv_bar）

进度条部件相关 api 函数

示例程序

这里建议设置模式为LV_BAR_MODE_RANGE，否则在新版本中，默认模式不可用于设置起始值，容易出问题。

void my_gui(void)
{
    lv_obj_t *bar = lv_bar_create(lv_scr_act());    /* 创建进度条 */
    lv_obj_set_align(bar, LV_ALIGN_CENTER); /* 设置对齐 */
    lv_obj_set_size(bar, 400, 20);  /* 设置尺寸 */

    lv_bar_set_range(bar, -100, 100);  /* 设置范围值 */
    lv_obj_set_style_anim_time(bar, 10000, LV_STATE_DEFAULT); /* 设置动画时间 */
    // 以上两个设置都必须放在当前值设置之前
    lv_bar_set_value(bar, 100, LV_ANIM_ON);  /* 设置当前值，并开启动画 */

    lv_bar_set_mode(bar, LV_BAR_MODE_NORMAL);    /* 设置模式，默认从最左侧开始绘制 */
//    lv_bar_set_mode(bar, LV_BAR_MODE_SYMMETRICAL);    /* 设置模式，从零开始绘制到当前值 */
//    lv_bar_set_mode(bar, LV_BAR_MODE_RANGE);    /* 设置模式，允许设置起始值 */
    lv_bar_set_start_value(bar, -50, LV_ANIM_OFF);  /* 设置起始值，起始值必须小于当前值 */
}

注意事项

六、加载器部件（lv_spinner）

一般不会修改手柄的样式。

加载器部件相关 api 函数

示例程序

void my_gui(void)
{
    lv_obj_t *spinner = lv_spinner_create(lv_scr_act(), 1000, 60);  /* 入口参数：父对象，指示器旋转一周时间(ms)，指示器长度 */
    lv_obj_set_style_arc_color(spinner, lv_color_hex(0xA3A3DC), LV_PART_MAIN);  /* 设置主体圆弧颜色 */
    lv_obj_set_style_arc_color(spinner, lv_color_hex(0xFFFFFF), LV_PART_INDICATOR); /* 设置指示器圆弧颜色 */

    lv_obj_set_style_arc_width(spinner, 10, LV_PART_MAIN);  /* 设置主体圆弧宽度 */
    lv_obj_set_style_arc_width(spinner, 10, LV_PART_INDICATOR); /* 设置指示器圆弧宽度 */
}

七、LED 部件（lv_led）

LED 部件相关 api 函数

示例程序

void my_gui(void)
{
    lv_obj_t *led = lv_led_create(lv_scr_act());    /* 创建 LED */
    lv_obj_set_size(led, 100, 100); /* 设置大小 */
    lv_obj_center(led); /* 设置部件居中 */

    lv_led_set_color(led, lv_color_hex(0x9BAC00));  /* 设置LED颜色 */
    lv_led_set_brightness(led, 0);   /* 设置LED亮度*/

//    lv_led_on(led); /* 打开LED */
//    lv_led_off(led); /* 关闭LED */
//    lv_led_toggle(led); /* 翻转LED */
}

八、列表部件（lv_list）

列表部件相关 api 函数

示例程序

static lv_obj_t *list, *btn1;

static void lv_event_cb(lv_event_t *e)
{
    lv_obj_t *target = lv_event_get_target(e);
    if (target == btn1) {
        printf("%s\r\n", lv_list_get_btn_text(list, target));   /* 获取列表按钮对应文本，并打印 */
    }
}

void my_gui(void)
{
    list = lv_list_create(lv_scr_act());  /* 创建列表 */
    lv_obj_set_size(list, 200, 400);    /* 设置大小 */
    lv_obj_center(list);    /* 居中对齐  */

    lv_list_add_text(list, "Settings"); /* 设置文本 */

    btn1 = lv_list_add_btn(list, LV_SYMBOL_AUDIO, "MUSIC1");    /* 添加列表按钮 */
    lv_obj_t *btn2 = lv_list_add_btn(list, LV_SYMBOL_AUDIO, "MUSIC2");    /* 添加列表按钮 */
    lv_obj_t *btn3 = lv_list_add_btn(list, LV_SYMBOL_AUDIO, "MUSIC3");    /* 添加列表按钮 */
    lv_obj_t *btn4 = lv_list_add_btn(list, LV_SYMBOL_AUDIO, "MUSIC4");    /* 添加列表按钮 */
    lv_obj_t *btn5 = lv_list_add_btn(list, LV_SYMBOL_AUDIO, "MUSIC5");    /* 添加列表按钮 */

    lv_obj_add_event_cb(btn1, lv_event_cb, LV_EVENT_CLICKED, NULL);
}

九、下拉列表部件（lv_dropdown)

下拉列表部件相关 api 函数

注意：

1. 使用索引添加选项的时候，不能采用静态设置的函数的。
2. 设置方向时，展开后超出边界则 lvgl 会自动修正方向，故可能会达不到想要的效果。

示例程序

lv_obj_t *dd;

static void event_cb(lv_event_t *e)
{
    lv_obj_t *target = lv_event_get_target(e);  /* 获取触发源 */
    printf("%d ", lv_dropdown_get_selected(target)); /* 打印选项索引 */

    char buf[10];
    lv_dropdown_get_selected_str(dd, buf, sizeof(buf)); /* 获取选项文本 */
    printf("%s\r\n", buf);
}

void my_gui(void)
{
    dd = lv_dropdown_create(lv_scr_act());

    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); /* 添加选项 */

    lv_dropdown_set_selected(dd, 3);    /* 手动选择当前选项 */

    lv_dropdown_set_dir(dd, LV_DIR_RIGHT);  /* 设置列表展开方向 */
    lv_dropdown_set_symbol(dd, LV_SYMBOL_RIGHT);    /* 设置向右展开图标 */

    lv_obj_add_event_cb(dd, event_cb, LV_EVENT_VALUE_CHANGED, NULL);    /* 添加值变化事件 */
}

现象：

十、滚轮部件（lv_roller）

滚轮部件相关 api 函数

示例程序

static lv_obj_t *roller;

static void event_cb(lv_event_t *e)
{
    char buf[10] = {0};
    lv_obj_t *target = lv_event_get_target(e);
    lv_roller_get_selected_str(roller, buf, sizeof(buf));
    printf("%d %s\r\n", lv_roller_get_selected(roller), buf);
}

void my_gui(void)
{
    roller = lv_roller_create(lv_scr_act());  /* 创建滚轮 */
    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_options(roller, "a\nb\nc\nd", LV_ROLLER_MODE_INFINITE); /* 设置滚轮文本内容和无限循环模式 */

    lv_roller_set_selected(roller, 1, LV_ANIM_ON);  /* 设置当前所选项 */
    lv_roller_set_visible_row_count(roller, 4); /* 设置所见行数 */

    lv_obj_add_event_cb(roller, event_cb, LV_EVENT_VALUE_CHANGED, NULL);    /* 添加值变化事件 */
}

现象：

十一、滑块部件（lv_slider）

滑块部件相关 api 函数

示例程序

static void event_cb(lv_event_t *e)
{
    lv_obj_t *target = lv_event_get_target(e);
    printf("%d %d\r\n", lv_slider_get_value(target), lv_slider_get_left_value(target)); /* 获取右值（默认）和左值并打印出来 */
}

void my_gui(void)
{
    lv_obj_t *slider = lv_slider_create(lv_scr_act());
    lv_obj_center(slider);
    lv_obj_set_size(slider, 200, 10);
    lv_slider_set_value(slider, 50, LV_ANIM_OFF);   /* 设置当前值 */
    lv_slider_set_range(slider, -100, 100); /* 设置范围值 */
    lv_obj_add_event_cb(slider, event_cb, LV_EVENT_VALUE_CHANGED, NULL);    /* 添加事件 */

//    lv_slider_set_mode(slider, LV_SLIDER_MODE_NORMAL);    /* 从最左边开始绘制 */
//    lv_slider_set_mode(slider, LV_SLIDER_MODE_SYMMETRICAL); /* 从零值开始绘制 */
    lv_slider_set_mode(slider, LV_SLIDER_MODE_RANGE); /* 两边都有拉杆 */

    lv_slider_set_left_value(slider, 20, LV_ANIM_OFF);  /* 设置左拉杆当前值 */
}

现象：

十二、圆弧部件（lv_arc）

圆弧部件相关 api 函数

注意：

1. 范围值设置最好放在当前值之前。
2. 背景弧角度限定了前景弧角度的范围。
3. 尽量不要用前景弧设置函数，假如与当前值对应不上则会出问题。
4. 设置旋转角度实际上指的是圆弧整体的旋转角度。

示例程序

static void event_cb(lv_event_t *e)
{
    lv_obj_t *target = lv_event_get_target(e);
    printf("%d\r\n", lv_arc_get_value(target)); /* 获取当前值并打印 */
}

void my_gui(void)
{
    lv_obj_t *arc = lv_arc_create(lv_scr_act());    /* 创建圆弧 */
    lv_obj_center(arc); /* 居中 */
    lv_arc_set_range(arc, 0, 200);  /* 设置圆弧范围 */
    lv_arc_set_value(arc, 80);    /* 设置当前值 */

//    lv_arc_set_angles(arc, 0, 90);  /* 设置前景弧角度 */
    lv_arc_set_bg_angles(arc, 0, 270);  /* 设置背景弧角度 */

    lv_arc_set_rotation(arc, 180);  /* 设置圆弧整体旋转角度 */

    lv_obj_add_event_cb(arc, event_cb, LV_EVENT_VALUE_CHANGED, NULL);   /* 添加事件 */

//    lv_arc_set_mode(arc, LV_ARC_MODE_NORMAL);   /* 设置模式 */
//    lv_arc_set_mode(arc, LV_ARC_MODE_REVERSE);   /* 设置模式 */
    lv_arc_set_mode(arc, LV_ARC_MODE_SYMMETRICAL);   /* 设置模式 */

    lv_arc_set_change_rate(arc, 90);    /* 设置绘制速率，越大绘制越快 */
}

现象：

十三、线条部件（lv_line）

线条部件相关 api 函数

示例程序

#include "math.h"

static lv_point_t line_points[] = { {150, 50}, {250, 200}, {50, 200}, {150, 50} };

void my_gui(void)
{
    lv_obj_t *line = lv_line_create(lv_scr_act());
    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);   /* 设置y轴反转 */
}

现象：

十四、图片部件（lv_img)

图片部件相关 api 函数

图片转换

LVGL 中要显示图片则需要 C 语言，或者 bin 的方式，
恰好 LVGL 官网提供了一个很好的在线工具：图像转换器
不过要注意的是选择自己当前的 LVGL 版本，下面是我的示例选项：

转换完成后放到工程目录某个位置方便管理即可。

示例程序

LV_IMG_DECLARE(img_test)

void my_gui(void)
{
    lv_obj_t *img = lv_img_create(lv_scr_act());
    lv_img_set_src(img, &img_test);

    lv_img_set_offset_x(img, 100);  /* x轴偏移 */
    lv_img_set_offset_y(img, 20);   /* y轴偏移 */

    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, 128);  /* 缩小2倍 */
    lv_img_set_angle(img, 900); /* 顺时针90度 */

    lv_obj_update_layout(img);  /* 改变中心点之前必须更新布局信息 */
    lv_img_set_pivot(img , 0, 0);   /* 改变中心点，将中心点修改为左上角 */

    lv_obj_set_pos(img, 600, 10);   /* 修改位置，以便观看 */
}

现象：

十五、色环部件（lv_colorwheel）

色环部件相关 api 函数

注意：

1. lv_colorwheel_create( parent, knob_recolor );中的knob_recolor为是否选择手柄重着色，true则转到什么颜色，手柄就为什么颜色；反之。
2. 色环模式：HUE - 色相或 SATURATION - 饱和度或 VALUE - 明度。
3. 默认情况下，通过长按可能导致这三种色环模式相互切换，固定色环模式，调用lv_clocrwheel_set_mode_fix()即可。

示例程序

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);
}

void my_gui(void)
{
    lv_obj_t *cw = lv_colorwheel_create(lv_scr_act(), true);    /* 创建色环 */
    lv_obj_center(cw);
    lv_obj_set_style_arc_width(cw, 20, LV_PART_MAIN);   /* 设置色环主体宽度 */
    lv_colorwheel_set_rgb(cw, lv_color_hex(0xff0000));  /* 设置色环当前选中颜色 */
    lv_obj_add_event_cb(cw, event_cb, LV_EVENT_VALUE_CHANGED, NULL);

//    lv_colorwheel_set_mode(cw, LV_COLORWHEEL_MODE_HUE); /* 色相 */
    lv_colorwheel_set_mode(cw, LV_COLORWHEEL_MODE_SATURATION);  /* 饱和度 */
//    lv_colorwheel_set_mode(cw, LV_COLORWHEEL_MODE_VALUE);   /* 明度 */

    lv_colorwheel_set_mode_fixed(cw, true); /* 固定色环模式 */

    obj = lv_obj_create(lv_scr_act());
    lv_obj_center(obj);
}

现象：

十六、按钮矩阵部件（lv_btnmatrix）

按钮矩阵部件相关 api 函数

注意：

1. 需要先获取按钮的索引，才能获取文本。

示例程序

static const char *map[] = { "#ff0000 btn1#", "\n", "btn2", "btn3", "" };

static void event_cb(lv_event_t *e)
{
    lv_obj_t *target = lv_event_get_target(e);
    uint8_t  id = 0;
    id = lv_btnmatrix_get_selected_btn(target);
    printf("%d %s\r\n", id, lv_btnmatrix_get_btn_text(target, id));
}

void my_gui(void)
{
    lv_obj_t *btnm = lv_btnmatrix_create(lv_scr_act()); /* 创建按钮矩阵部件 */
    lv_obj_center(btnm);
    lv_btnmatrix_set_map(btnm, map);    /* 设置按钮数量、文本 */
    lv_btnmatrix_set_btn_width(btnm, 2, 2);     /* 设置按钮相对宽度 */
    lv_btnmatrix_set_btn_width(btnm, 1, 2);     /* 设置按钮相对宽度 */

//    lv_btnmatrix_set_btn_ctrl(btnm, 0, LV_BTNMATRIX_CTRL_RECOLOR);  /* 设置文本重新着色属性 */
//    lv_btnmatrix_clear_btn_ctrl(btnm, 0, LV_BTNMATRIX_CTRL_RECOLOR);  /* 清除文本重新着色属性 */

     lv_btnmatrix_set_btn_ctrl_all(btnm, LV_BTNMATRIX_CTRL_RECOLOR | LV_BTNMATRIX_CTRL_CHECKABLE);  /* 设置所有文本重新着色属性和状态切换 */

     lv_btnmatrix_set_one_checked(btnm, true);

    lv_obj_add_event_cb(btnm, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
}

现象：

十七、文本区域部件（lv_textarea）

文本区域部件相关 api 函数

注意：
键盘需要与多个文本框关联的时候，可以在回调函数中判断某个文本框是否被聚焦if(code == LV_EVENT_FOCUSED)来更改键盘所关联的文本框。

示例程序

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);
    printf("%s\r\n", txt);
    if (!strcmp("123", txt)) {  /* 对比字符串，若相等，则返回0，可用于校验密码是否正确 */
        printf("!strcmp(\"123\", txt)\r\n");
    }
}

/**
 * @brief  LVGL演示
 * @param  无
 * @return 无
 */
void my_gui(void)
{
    lv_obj_t *ta = lv_textarea_create(lv_scr_act());    /* 创建文本区域部件 */

//    lv_textarea_add_char(ta, 'A');  /* 添加一个字符到光标处 */
//    lv_textarea_add_text(ta, "BCDEF\nGH");  /* 添加字符串到光标处 */

    lv_obj_t *keyboard = lv_keyboard_create(lv_scr_act());  /* 创建键盘部件 */
    lv_keyboard_set_textarea(keyboard, ta); /* 关联键盘部件和文本区域部件 */

    lv_textarea_set_cursor_pos(ta, 1);  /* 设置光标位置 */

//    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);  /* 设置密码显示时间/ms */

    lv_textarea_set_accepted_chars(ta, "0123456789"); /* 限制接收的字符（只接收函数内的字符） */
    lv_textarea_set_max_length(ta, 20);  /* 限制字符的长度 */

    lv_textarea_set_placeholder_text(ta, "password");   /* 设置占位符 */
    lv_obj_add_event_cb(ta, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
}

现象：

十八、键盘部件（lv_keyboard）

注意：
可以之间使用矩阵按键索引获取函数lv_btnmatrix_get_selected_btn()来获取键盘的按键索引。

键盘部件相关 api 函数

示例程序

void my_gui(void)
{
    lv_obj_t *kb = lv_keyboard_create(lv_scr_act());    /* 创建键盘部件 */

    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_keyboard_set_mode(kb, LV_KEYBOARD_MODE_TEXT_LOWER);  /* 设置小写模式 */
//    lv_keyboard_set_mode(kb, LV_KEYBOARD_MODE_TEXT_UPPER);  /* 设置大写模式 */
    lv_keyboard_set_mode(kb, LV_KEYBOARD_MODE_SPECIAL);  /* 设置特殊符号模式 */
}

现象：

二十、 图片按钮部件（lv_imgbtn）

图片按钮部件相关 api 函数

示例程序

LV_IMG_DECLARE(img_cool);
LV_IMG_DECLARE(img_dry);
LV_IMG_DECLARE(img_warm);

lv_obj_t *imgbtn;

/* 方法二： */
static void event_cb(lv_event_t *e)
{
    lv_obj_set_style_img_recolor(imgbtn, lv_color_hex(0x007ffe), LV_STATE_DEFAULT); /* 设置图片重新着色 */
    lv_obj_set_style_img_recolor_opa(imgbtn, 150, LV_STATE_DEFAULT);    /* 设置图片重新着色透明度 */
}

/**
 * @brief  LVGL演示
 * @param  无
 * @return 无
 */
void my_gui(void)
{
    imgbtn = lv_imgbtn_create(lv_scr_act());  /* 创建图片按钮部件 */
    lv_obj_center(imgbtn);
    lv_imgbtn_set_src(imgbtn, LV_IMGBTN_STATE_RELEASED, NULL, &img_cool, NULL); /* 设置图片源（释放） */
    /* 方法一： */
//    lv_imgbtn_set_src(imgbtn, LV_IMGBTN_STATE_PRESSED, NULL, &img_warm, NULL); /* 设置图片源（按下） */
    lv_obj_set_size(imgbtn, 64, 64);    /* 设置为图片尺寸大小 */
    lv_obj_add_event_cb(imgbtn, event_cb, LV_EVENT_PRESSED, NULL);

    lv_imgbtn_set_state(imgbtn, LV_IMGBTN_STATE_RELEASED);  /* 设置图片按钮状态 */
}

现象（现在是使用方法二的按下的状态，并且这是一张带有透明度通道的图片）：

十九、选项卡部件（lv_tabview）

选项卡部件相关 api 函数

注意：
对于添加选项卡函数lv_tabview_add_tab()，是有一个相当于容器的返回值的，定义一个对象接收此返回值后，就可以将其作为父对象来创建其他部件了。

示例程序

void my_gui(void)
{
    lv_obj_t *tabview = lv_tabview_create(lv_scr_act(), LV_DIR_TOP, 50);    /* 创建选项卡部件 */

    lv_obj_t *tab1 = lv_tabview_add_tab(tabview, "Tab 1");  /* 添加选项卡 */
    lv_obj_t *tab2 = lv_tabview_add_tab(tabview, "Tab 2");

    lv_obj_t *label1 = lv_label_create(tab1);   /* 选项卡一中创建文本 */
    lv_label_set_text(label1, "tab1");
    lv_obj_center(label1);
    lv_obj_t *label2 = lv_label_create(tab2);   /* 选项卡二中创建文本 */
    lv_label_set_text(label2, "tab2");
    lv_obj_center(label2);

    lv_tabview_set_act(tabview, 1, LV_ANIM_OFF);    /* 设置选项卡部件索引，并关闭动画 */
}

现象：

二十、平铺视图部件（lv_tileview）

平铺视图部件相关 api 函数

1. 对于添加页面函数lv_tileview_add_tile()，同选项卡部件一样，是有一个相当于容器的返回值的，定义一个对象接收此返回值后，就可以将其作为父对象来创建其他部件了。
2. 必须要调用更新参数函数lv_obj_update_layout()，否则使用下面两个设置函数设置页面后不会马上生效。

示例程序

void my_gui(void)
{
    lv_obj_t *tileview = lv_tileview_create(lv_scr_act());  /* 创建平铺部件 */

    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_t *label1 = lv_label_create(tile1);   /* 页面一中创建文本 */
    lv_label_set_text(label1, "tile1");
    lv_obj_center(label1);
    lv_obj_t *label2 = lv_label_create(tile2);   /* 页面二中创建文本 */
    lv_label_set_text(label2, "tile2");
    lv_obj_center(label2);

    lv_obj_update_layout(tileview); /* 更新显示界面 */
//    lv_obj_set_tile(tileview, tile1, LV_ANIM_OFF);  /* 根据页面对象设置选中 */
    lv_obj_set_tile_id(tileview, 1, 0, LV_ANIM_OFF);  /* 根据行列设置选中 */
}

现象：

二十一、窗口部件（lv_win）

窗口部件相关 api 函数

示例程序

void my_gui(void)
{
    lv_obj_t *win = lv_win_create(lv_scr_act(), 20);    /* 创建窗口部件 */
    lv_obj_set_size(win, 300, 200); /* 设置窗口大小 */
    lv_obj_center(win); /* 居中 */
    lv_obj_set_style_border_width(win,1 , LV_STATE_DEFAULT);    /* 设置边框宽度 */

    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_label_set_text(label, LV_SYMBOL_AUDIO);
}

现象：

二十二、消息框部件（lv_msgbox）

消息框部件相关 api 函数

示例程序

void event_cb(lv_event_t *e)
{
    lv_obj_t *target = lv_event_get_current_target(e);  /* 获取当前触发源，注意多了个 current */
    printf("%d ", lv_msgbox_get_active_btn(target));   /* 按钮索引 */
    printf("%s\r\n", lv_msgbox_get_active_btn_text(target));   /* 按钮文本 */
}

/**
 * @brief  LVGL演示
 * @param  无
 * @return 无
 */
void my_gui(void)
{
    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_obj_center(msgbox);  /* 居中 */

//    lv_msgbox_close(msgbox);    /* 关闭消息框 */

    lv_obj_add_event_cb(msgbox, event_cb, LV_EVENT_VALUE_CHANGED, NULL);    /* 增添事件  */
}

现象：

二十三、微调器部件（lv_spinbox）

微调器部件相关 api 函数

示例程序

static lv_obj_t *spinbox;
static lv_obj_t *btn1;
static lv_obj_t *btn2;

static void event_cb(lv_event_t* e)
{
    lv_obj_t *target = lv_event_get_target(e);
    if (target == btn1) {
        lv_spinbox_increment(spinbox);
    } else if (target == btn2) {
        lv_spinbox_decrement(spinbox);
    }
    printf("%d\r\n", lv_spinbox_get_value(spinbox));
}

/**
 * @brief  LVGL演示
 * @param  无
 * @return 无
 */
void my_gui(void)
{
    spinbox = lv_spinbox_create(lv_scr_act());    /* 创建微调器部件 */
    lv_obj_center(spinbox);
//    lv_spinbox_set_step(spinbox, 200);  /* 设置步进 */
    lv_spinbox_set_range(spinbox, 0, 1000); /* 设置范围  */
    lv_spinbox_set_value(spinbox, 400); /* 设置当前值 */
    lv_spinbox_set_digit_format(spinbox, 4, 1); /* 设置小数点位数，小数点位置 */
    lv_spinbox_set_pos(spinbox, 3);   /* 设置光标位置，建议不要和步进设置函数一起用，有触摸屏可以直接触摸选择光标位置 */

    btn1 = lv_btn_create(lv_scr_act());   /* 右侧递增按钮 */
    lv_obj_align_to(btn1, spinbox, LV_ALIGN_OUT_RIGHT_MID, 10, 0);
	lv_obj_set_style_bg_img_src(btn1, LV_SYMBOL_PLUS, LV_PART_MAIN);                  /* 设置背景图标 */
    lv_obj_add_event_cb(btn1, event_cb, LV_EVENT_CLICKED, NULL);

    btn2 = lv_btn_create(lv_scr_act());   /* 左侧递减按钮 */
    lv_obj_align_to(btn2, spinbox, LV_ALIGN_OUT_LEFT_MID, -10, 0);
	lv_obj_set_style_bg_img_src(btn2, LV_SYMBOL_MINUS, LV_PART_MAIN);               /* 设置背景图标 */
    lv_obj_add_event_cb(btn2, event_cb, LV_EVENT_CLICKED, NULL);
}

现象：

二十四、表格部件（lv_table）

表格部件相关 api 函数

示例程序

void my_gui(void)
{
    lv_obj_t *table = lv_table_create(lv_scr_act());

    /* 设置三行三列 */
    lv_table_set_row_cnt(table, 3);
    lv_table_set_col_cnt(table, 3);

    lv_table_set_col_width(table, 2, 200);  /* 单独设置某一列宽度 */

    lv_table_set_cell_value(table, 0, 0, "123");    /* 设置单元格内容 */
    lv_table_set_cell_value_fmt(table, 2, 1, "%s", "hallo");
}

现象：

博客导航

博客导航