LVGL部件篇：标签部件(lv_label)

爱学电子的刻刻帝

已于 2025-01-01 14:19:32 修改

阅读量1.4k

点赞数 29

分类专栏： LVGL 文章标签： LVGL

于 2024-12-31 10:45:11 首次发布

本文链接：https://blog.csdn.net/m0_74676415/article/details/144823923

版权

LVGL 专栏收录该内容

12 篇文章

订阅专栏

简介

在 LVGL 中，标签部件常用于文本显示，例如标题、提示文本等。这个是最简单的，但是也是最为常用的。

标签部件的组成

标签部件由三个部分组成：主体背景、滚动条和所选文本。

各组成部分的相关枚举如下所示：

① 主体背景 LV_PART_MAIN；

② 滚动条 LV_PART_SCROLLBAR；

③ 所选文本 LV_PART_SELECTED。

关于部件样式设置的内容，可以看LVGL基础知识。

标签部件的相关知识

文本设置

设置标签部件文本的方法有三种：

第一种：调用 lv_label_set_text 函数

该函数是最常用的标签文本设置函数，它存储文本的内存由动态内存分配的。

示例如下：

lv_obj_t *label = lv_label_create(lv_scr_act()); // 创建标签

// 调整标签位置
lv_obj_align(label, LV_ALIGN_CENTER, 0, 0); // 居中对齐

lv_label_set_text(label,"Love Kurumi");

第二种：调用 lv_label_set_text_fmt 函数

该函数与 C 语言的 sprintf输出函数类似，都可以设置“式样化字符串”和“参数表”，示例代码如下：

lv_label_set_text_fmt(label, "i am %d years old", 20);

第三种：调用 label_set_text_static 函数

该函数可以设置静态文本，该文本不存储在动态内存中，而是直接使用指定的缓冲区，此时，如果使用数组设置文本，则该数组不能是局部变量。注意:有些版本不能使用，这里我版本不能用，就不演示了，理解知道就行。

换行符设置

如果用户想把文本分为两段进行显示，则可在内容的末尾添加“\n”，其后续的文本将会换行。接下来，我们以简单示例来理解标签换行的设置，示例代码如下所示：

lv_obj_t* lv_label1 = lv_label_create(lv_scr_act());
lv_label_set_text(lv_label1, "Kurumi \nLVGL \nDemo text");
lv_obj_t* lv_label2 = lv_label_create(lv_scr_act());
lv_obj_align_to(lv_label2, lv_label1,LV_ALIGN_OUT_BOTTOM_MID,0,0);
/* 设置标签文本及偏移 */
lv_label_set_text_fmt(lv_label2, "Label value %d", 20);

文本长模式

默认情况下，标签部件的宽度和高度都会根据文本的大小来动态变化。如果用户固定了标签部件的大小，并且文本的长度超过了部件的长度，则可以使用以下几个长文本模式来选择文

本展现的形式：

① LV_LABEL_LONG_WRAP（默认）：如果标签部件的高度是 LV_SIZE_CONTENT，则该部件高度将被扩展，否则文本将被剪切。

② LV_LABEL_LONG_DOT：将标签文本右下角的最后 3 个字符替换为点。

③ LV_LABEL_LONG_SCROLL：来回滚动。如果文本比标签部件宽，则往水平方向滚动。如果文本比标签部件高，则往垂直方向滚动。注意：文本只会往一个方向滚动，水平方向具有更高的优先级。

④ LV_LABEL_LONG_SCROLL_CIRCULAR：循环滚动。如果文本比标签部件宽，则往水平方向滚动。如果文本比标签部件高，则往垂直方向滚动。注意：文本只会往一个方向滚动，水平方向具有更高的优先级。

⑥ LV_LABEL_LONG_CLIP：直接裁剪标签部件外面的文本。

注意：用户需要设置长文本模式，可调用 lv_label_set_long_mode 函数。

我们演示一下LV_LABEL_LONG_SCROLL：

lv_obj_t* lv_label1 = lv_label_create(lv_scr_act());
lv_obj_set_size(lv_label1,50,50);
lv_label_set_text(lv_label1, "Kurumi \nLVGL \nDemo text");
lv_label_set_long_mode(lv_label1,LV_LABEL_LONG_SCROLL);
lv_obj_center(lv_label1);

运行的时候，可以看到标签左右的循环演示，因为我们标签部件大小无法全部显示完文字部分。

文本着色

用户需要让标签文本着色，可以调用 lv_label_set_recolor 函数。接下来，我们以简单示例来理解标签文本着色，示例代码如下所示：

lv_obj_t* lv_label1 = lv_label_create(lv_scr_act());
lv_label_set_text(lv_label1, "LOVE #ff0000 Kurumi#");
/* 使能重新着色 */
lv_label_set_recolor(lv_label1,true);
lv_obj_center(lv_label1);

在上述源码中，我们创建了一个标签部件，然后设置文本中的“Kurumi”字符串颜色为红色，RGB对应（0xff00000），最后使能文本重新着色功能。注意：用户需要设置标签文本着色，必须按以下格式设置文本：#颜色文本#。

标签部件的 API 函数

创建和设置标签的文本

函数	描述	说明
`lv_label_create()`	创建标签对象	创建一个新的标签对象，返回该标签对象的句柄。可以使用此句柄进一步设置标签的文本、样式等属性。
`lv_label_set_text()`	设置标签的新文本	设置标签显示的文本。文本会根据设置的样式和大小自动调整布局。
`lv_label_set_text_fmt()`	设置标签的新格式文本	设置标签文本，并且支持格式化字符串。例如：`lv_label_set_text_fmt(label, "Value: %d", 100)`。
`lv_label_set_text_static()`	设置一个静态文本	设置静态文本，该文本是不可变的，通常用于常量标签内容。

标签文本相关设置

函数	描述	说明
`lv_label_set_long_mode()`	设置标签的长文本显示模式	设置标签的显示方式（长文本模式），当文本超出标签大小时，可以设置为截断、滚动或其他方式显示。
`lv_label_set_recolor()`	启用重新着色	启用标签中某些文字的颜色改变功能，通常与格式化文本结合使用。例如：`lv_label_set_text(label, "Text #FF0000red#")`，会将文本 `red` 显示为红色。
`lv_label_set_text_sel_start()`	设置选择开始索引	设置文本选择的开始位置，通常用于实现文本选择功能。
`lv_label_set_text_sel_end()`	设置选择结束索引	设置文本选择的结束位置，配合选择开始索引使用，通常用于实现文本选择功能。

获取标签文本信息

函数	描述	说明
`lv_label_get_text()`	获取标签文本	获取当前标签显示的文本内容。
`lv_label_get_long_mode()`	获取标签的长文本模式	获取当前标签的长文本显示模式。
`lv_label_get_recolor()`	获取重新着色属性	获取当前标签是否启用了重新着色功能。
`lv_label_get_letter_pos()`	获取字母的相对 x 和 y 坐标	获取标签中某个字母的坐标信息，通常用于对文本中的字符进行定位。
`lv_label_get_letter_on()`	获取标签相对点上的字母索引	获取标签中某个特定位置上是否有字符，返回该字符的索引。
`lv_label_is_char_under_pos()`	检查是否在一个点下绘制了一个字符	检查指定坐标下是否绘制了字符，常用于文本交互。
`lv_label_get_text_selection_start()`	获取选择开始索引	获取当前文本选择的起始位置索引。
`lv_label_get_text_selection_end()`	获取选择结束索引	获取当前文本选择的结束位置索引。

修改标签的文本内容

函数	描述	说明
`lv_label_ins_text()`	在标签上插入文本（文本不能是静态的）	在标签的现有文本中插入新文本。文本不能是静态文本，否则会失败。可以通过索引指定插入位置。
`lv_label_cut_text()`	从标签中删除字符（文本不能是静态的）	删除标签文本中的指定字符，文本不能是静态的，通常配合文本操作使用。

长文本显示模式相关设置

函数	描述	说明
`lv_label_set_long_mode()`	设置标签的长文本显示模式	有几种模式，例如：`LV_LABEL_LONG_WRAP`（自动换行）、`LV_LABEL_LONG_SCROLL`（滚动文本）、`LV_LABEL_LONG_BREAK`（截断文本）。选择适合的显示方式。
`lv_label_get_long_mode()`	获取标签的长文本显示模式	获取标签当前使用的长文本模式设置。

文本选择相关设置

函数	描述	说明
`lv_label_set_text_sel_start()`	设置选择开始索引	设置选择开始的字符索引位置，用于选择文本的起始位置。
`lv_label_set_text_sel_end()`	设置选择结束索引	设置选择结束的字符索引位置，用于选择文本的结束位置。
`lv_label_get_text_selection_start()`	获取选择开始索引	获取当前文本选择的开始位置索引。
`lv_label_get_text_selection_end()`	获取选择结束索引	获取当前文本选择的结束位置索引。

标签部件的实验

/* 获取当前活动屏幕的宽高 */
#define scr_act_width() lv_obj_get_width(lv_scr_act())
#define scr_act_height() lv_obj_get_height(lv_scr_act())

static const lv_font_t *font;

/**
 * @brief  例1
 * @param  无
 * @return 无
 */
static void lv_example_label_1(void)
{
    if (scr_act_width() <= 320)
        font = &lv_font_montserrat_10;
    else if (scr_act_width() <= 480)
        font = &lv_font_montserrat_14;
    else
        font = &lv_font_montserrat_20;

    lv_obj_t* label = lv_label_create(lv_scr_act());                                /* 定义并创建标签 */
    lv_label_set_text(label, "#0000ff Re-color# #ff00ff words# #ff0000 of a# "      /* 设置标签文本 */
                             "label, align the lines to the center"
                             "and  wrap long text automatically.");
    lv_label_set_recolor(label, true);                                              /* 启用标签文本重新着色 */
    lv_obj_set_style_text_font(label, font, LV_PART_MAIN);                          /* 设置标签文本字体 */
    lv_obj_set_width(label, scr_act_width() / 3);                                   /* 设置标签宽度 */
    lv_obj_align(label, LV_ALIGN_CENTER, -scr_act_width() / 3, 0);                  /* 设置标签位置 */
    lv_obj_set_style_text_align(label, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN);         /* 设置标签文本对齐方式 */
}

/**
 * @brief  例2
 * @param  无
 * @return 无
 */
static void lv_example_label_2(void)
{
    lv_obj_t* label = lv_label_create(lv_scr_act());                                /* 定义并创建标签 */
    lv_label_set_text(label, "It is a circularly scrolling text. ");                /* 设置标签文本 */
    lv_obj_set_style_text_font(label, font, LV_PART_MAIN);                          /* 设置标签文本字体 */
    lv_obj_set_width(label, scr_act_width() / 3);                                   /* 设置标签宽度 */
    lv_label_set_long_mode(label, LV_LABEL_LONG_SCROLL_CIRCULAR);                   /* 设置标签长模式：循环滚动 */
    lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);                                     /* 设置标签位置 */
}

/**
 * @brief  例3
 * @param  无
 * @return 无
 */
static void lv_example_label_3(void)
{
    lv_obj_t* label = lv_label_create(lv_scr_act());                                /* 定义并创建标签 */
    lv_label_set_text_fmt(label, "Label can set text like %s", "Kurumi");           /* 设置标签文本 */
    lv_obj_set_style_text_font(label, font, LV_PART_MAIN);                          /* 设置标签文本字体 */
    lv_obj_set_width(label, scr_act_width() / 3);                                   /* 设置标签宽度 */
    lv_obj_align(label, LV_ALIGN_CENTER, scr_act_width() / 3, 0);                   /* 设置标签位置 */
    lv_obj_set_style_text_align(label, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN);         /* 设置标签文本对齐方式 */

    lv_obj_t* label_shadow = lv_label_create(lv_scr_act());                         /* 定义并创建阴影标签 */
    lv_label_set_text(label_shadow, lv_label_get_text(label));                      /* 设置标签文本 */
    lv_obj_set_style_text_font(label_shadow, font, LV_PART_MAIN);                   /* 设置标签文本字体 */
    lv_obj_set_width(label_shadow, scr_act_width() / 3);                            /* 设置标签宽度 */
    lv_obj_set_style_text_opa(label_shadow, LV_OPA_30, LV_PART_MAIN);               /* 设置标签文本透明度 */
    lv_obj_set_style_text_color(label_shadow, lv_color_black(), LV_PART_MAIN);      /* 设置标签文本颜色 */
    lv_obj_set_style_text_align(label_shadow, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN);  /* 设置标签文本对齐方式 */
    lv_obj_align_to(label_shadow, label, LV_ALIGN_TOP_LEFT, 3, 3);                  /* 设置标签位置 */
}

/**
 * @brief  LVGL演示
 * @param  无
 * @return 无
 */
void lv_mainstart(void)
{
    lv_example_label_1();
    lv_example_label_2();
    lv_example_label_3();
}

上述源码可分为以下两个部分：

① lv_mainstart 接口函数。在该函数中，我们调用了标签部件相关的 3 个示例函数；

② 文本重新着色、长文本模式和文本阴影的实现。我们分别在 lv_example_label_1~3 函数

中设置标签部件的文本重新着色、长文本模式和文本阴影。