本篇文章目录导航

♠♠ LVGL控件-标签、按钮
♣♣♣♣ 一、LVGL标签部件
♦♦♦♦♦♦♦♦ 1.1 标签部件组成部分
♦♦♦♦♦♦♦♦ 1.2 如何创建标签部件以及设置文本？
♦♦♦♦♦♦♦♦ 1.3 如何改变文本的样式?
♦♦♦♦♦♦♦♦ 1.4 当文本长度超过部件大小时怎么显示？
♦♦♦♦♦♦♦♦ 1.5 文本如何对齐标签？
♦♦♦♦♦♦♦♦ 1.6 如何让标签文本变得艺术化（字体阴影效果，样式Style）？
♣♣♣♣ 二、LVGL按钮部件

LVGL控件-标签、按钮

一、LVGL标签部件

在LVGL中，标签部件主要用于文本显示，例如标题、提示信息等。

效果图：

1.1 标签部件组成部分

主体（LV_PART_MAIN）：使用所有典型的背景属性和文本属性。填充值可用于在文本和背景之间添加空间。
滚动条（LV_PART_SCROLLBAR）：当文本大于组件的大小时显示的滑动条。
选中的文本（LV_PART_SELECTED）：告诉selected text的样式。只能使用text_color和bg_color样式属性。

1.2 如何创建标签部件以及设置文本？

创建标签部件：

lv_obj_t *label = lv_label_create(parent);

设置文本的三种方式（\n表示换行）：
1、直接设置文本，存储文本的内存动态分配：

lv_label_set_text(label, "hallo \n lvgl");

2、文本不存储在动态内存，而是在指定的缓冲区中（慎用）：

lv_label_set_text_static(label, "hallo");

3、格式化显示文本，类似printf：

lv_label_set_text_fmt(label, "Value：%d", 50);

实验小演示1：创建标签部件并设置文本。

void my_gui(void)
{
    lv_obj_t *label = lv_label_create(lv_scr_act());    /* 创建标签部件 */
    lv_obj_center(label);                               /* 居中标签部件 */

    lv_label_set_text(label, "hello \n Couvrir");       /* 设置标签文本 */
}

演示图片：

1.3 如何改变文本的样式?

1、背景颜色（一般背景透明度默认为0，值范围0~255）：

lv_obj_set_style_bg_color(label, lv_color_hex(0xffe1d4), LV_STATE_DEFAULT);
lv_obj_set_style_bg_opa(label, 255, LV_STATE_DEFAULT);

2、字体大小（需要lv_conf.h中打开对应的字体宏）：

lv_obj_set_style_text_font(label, &lv_font_montserrat_30, LV_STATE_DEFAULT);

3、文本颜色：

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

实验小演示2：创建标签部件并设置文本，改变背景颜色、字体大小和文本颜色。

void my_gui(void)
{
    lv_obj_t *label = lv_label_create(lv_scr_act());    /* 创建标签部件 */
    lv_obj_center(label);                               /* 居中标签部件 */
    lv_label_set_text(label, "hello \n Couvrir");       /* 设置标签文本 */

    /* 设置标签背景颜色，黄色 */
    lv_obj_set_style_bg_color(label, lv_color_hex(0xffe604), LV_STATE_DEFAULT); 
    /* 设置标签背景颜色时，透明度需要设置 */
    lv_obj_set_style_bg_opa(label, 255, 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(0xff0000), LV_STATE_DEFAULT);
}

演示图片：

1.4 当文本长度超过部件大小时怎么显示？

默认情况下，标签的宽度和高度设置为LV_SIZE_CONTENT，因此标签的大小会自动扩展为文本大小。
否则，如果显式设置宽度和高度（如lv_obj_set_width），则可以根据几种长模式策略来操作比标签宽度更宽的行。
类似地，如果文本的高度大于标签的高度，则可以应用策略。

长文本模式：

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_obj_set_size(label, 100, 50);
lv_label_set_long_mode(label, LV_LABEL_LONG_...);

实验小演示3：创建标签部件并设置文本，改变字体大小，限制标签大小，实现长模式循环滚动。

void my_gui(void)
{
    lv_obj_t *label = lv_label_create(lv_scr_act());    /* 创建标签部件 */
    lv_obj_center(label);                               /* 居中标签部件 */
    lv_label_set_text(label, "hello Couvrir");          /* 设置标签文本 */

    /* 设置文本大小 */
    lv_obj_set_style_text_font(label, &lv_font_montserrat_30, LV_STATE_DEFAULT);

    lv_obj_set_size(label, 100, 50);                    /* 限制标签大小 */
    /* 设置长模式：来回滚动LV_LABEL_LONG_SCROLL */
    /* 设置长模式：循环滚动LV_LABEL_LONG_SCROLL_CIRCULAR */
    lv_label_set_long_mode(label, LV_LABEL_LONG_SCROLL_CIRCULAR);
}

演示视频：LVGL标签长模式

1.5 文本如何对齐标签？

若要水平对齐标签的行， text_align 样式属性可以使用 lv_obj_set_style_text_align() 或者 lv_style_set_text_align()，请注意，只有在以下情况下，它才具有可见效果。

标签宽度 > 文本最长行宽度
文本有多行且行长度不相等

void lv_obj_set_style_text_align(lv_obj_t * obj, lv_text_align_t value, lv_style_selector_t selector);

/** Label align policy*/
enum {
    LV_TEXT_ALIGN_AUTO, /**< Align text auto*/
    LV_TEXT_ALIGN_LEFT, /**< Align text to left*/
    LV_TEXT_ALIGN_CENTER, /**< Align text to center*/
    LV_TEXT_ALIGN_RIGHT, /**< Align text to right*/
};
typedef uint8_t lv_text_align_t;

实验小演示4：创建标签部件并设置文本，实现字体对齐。

void my_gui(void)
{
    /* 第一现象 */
    lv_obj_t *label = lv_label_create(lv_scr_act());                                /* 创建标签部件 */
    lv_obj_center(label);                                                           /* 居中标签部件 */
    lv_label_set_text(label, "hello Couvrir\n111 222 333\n444 555 666");            /* 设置标签文本 */

    lv_obj_set_style_bg_color(label, lv_color_hex(0xffe604), LV_STATE_DEFAULT);     /* 设置标签背景颜色，黄色 */
    lv_obj_set_style_bg_opa(label, 255, LV_STATE_DEFAULT);                          /* 设置标签背景颜色时，透明度需要设置 */

    /* 第二现象 */
    lv_obj_set_size(label, 200, 100);                                               /* 改变标签大小 */
    lv_obj_set_style_text_color(label, lv_color_hex(0xff0000), LV_STATE_DEFAULT);   /* 设置文本颜色，红色 */

    /* 第三现象 */
    lv_obj_set_style_text_align(label, LV_TEXT_ALIGN_CENTER, 0);                    /* 文本居中 */
}

演示图片：演示视频：LVGL标签实现字体对齐

1.6 如何让标签文本变得艺术化（字体阴影效果，样式Style）？

实验小演示5：实现字体阴影效果。
实现过程很简单，其实就是创建一个阴影样式（不创建的话字体无法实现重叠，会覆盖另一个标签），把阴影标签放入阴影样式，然后创建个主标签，把主标签和阴影标签设置相同文字，然后阴影标签相对主标签偏一点点位置就行。

void my_gui(void)
{
    /* 为阴影创建一个样式 */
    static lv_style_t style_shadow;

    lv_style_init(&style_shadow);                               /* 初始化样式 */
    lv_style_set_text_opa(&style_shadow, LV_OPA_30);            /* 设置样式透明度，即阴影环节 */
    lv_style_set_text_color(&style_shadow, lv_color_black());   /* 设置样式文本颜色 */

    /* 先为阴影创建一个标签（它在背景中） */
    lv_obj_t * shadow_label = lv_label_create(lv_scr_act());
    lv_obj_set_style_text_font(shadow_label, &lv_font_montserrat_30, LV_STATE_DEFAULT);
    lv_obj_add_style(shadow_label, &style_shadow, 0);

    /* 创建主标签 */
    lv_obj_t * main_label = lv_label_create(lv_scr_act());
    lv_obj_set_style_text_font(main_label, &lv_font_montserrat_30, LV_STATE_DEFAULT);
    lv_label_set_text(main_label, "A simple method to create\n"
                      "shadows on a text.\n"
                      "It even works with\n\n"
                      "newlines     and spaces.");

    /* 为阴影标签创建相同文字 */
    lv_label_set_text(shadow_label, lv_label_get_text(main_label));

    /* 决定主标签位置 */
    lv_obj_align(main_label, LV_ALIGN_CENTER, 0, 0);

    /* 阴影标签相对主标签移位一点点 */
    lv_obj_align_to(shadow_label, main_label, LV_ALIGN_TOP_LEFT, 1, 1);
}

演示图片：

二、LVGL按钮部件

在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);         /* 背景颜色 */

添加事件：

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

lv_obj_add_flag(btn, LV_OBJ_FLAG_CHECKABLE);                                        /* 开启状态切换 */
lv_obj_add_event_cb(btn, event_cb, LV_EVENT_VALUE_CHANGED, NULL);                   /* 添加事件 */

实验小演示1：创建标签部件并设置文本，创建按钮，添加按钮事件。

uint8_t btn_state = 0;
lv_obj_t * label;

static void event_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);

    if(code == LV_EVENT_VALUE_CHANGED)
    {
        btn_state = btn_state ? 0 : 1;
        lv_label_set_text(label, btn_state ? "Close" : "Open");
    }
}

void my_gui(void)
{
    lv_obj_t * btn = lv_button_create(lv_scr_act());                    /* 创建按钮部件 */
    lv_obj_align(btn, LV_ALIGN_CENTER, 0, 0);
    lv_obj_add_flag(btn, LV_OBJ_FLAG_CHECKABLE);                        /* 添加事件：改变状态时触发 */
    lv_obj_add_event_cb(btn, event_cb, LV_EVENT_VALUE_CHANGED, NULL);   /* 添加事件 */

    label = lv_label_create(btn);                                       /* 创建标签部件 */
    lv_label_set_text(label, "Open");
    lv_obj_center(label);
}

演示视频：LVGL事件按钮

总结

在本篇中，我们学会了标签部件的按钮部件的基本应用，并且也实现了基本例程和显示效果，锻炼了上手能力的同时，也为后续各种部件提供了基础。