提示：本博客作为学习笔记，有错误的地方希望指正

文章目录

一、Label简介
- 1.1概述 Overview
- 1.2部分和风格 Parts and Styles
- 1.3使用 Usage
- - 1.3.1设置文本 Set text
  - 1.3.2新行 New line
  - 1.3.3长模式 Long modes
  - 1.3.4文本重新上色 Text recolor
  - 1.3.5文本的选择 Text selection
  - 1.3.6很长的文字 Very long texts
  - 1.3.7符号 Symbols
- 1.4事件 Events
- 1.5按键 Keys
三、Label API
四、示例
- 4.1显示个别字体颜色
- 4.2字体模糊效果
- 4.3显示自定义字体

一、Label简介

1.1概述 Overview

标签是用于显示文本的基本对象类型。

1.2部分和风格 Parts and Styles

• LV_PART_MAIN 使用所有典型的背景属性和文本属性。填充值可用于在文本和背景之间添加空格。
• LV_PART_SCROLLBAR 当文本大于小部件的大小时显示的滚动条。.
• LV_PART_SELECTED 告诉选定文本的样式。只能使用text_color和bg_color样式属性。

1.3使用 Usage

1.3.1设置文本 Set text

您可以在运行时使用lv_label_set_text(label，“New text”)设置标签上的文本。它将动态分配一个缓冲区，所提供的字符串将被复制到该缓冲区中。因此，在该函数返回后，您不需要将传递给lv_label_set_text的文本保留在作用域内。
使用lv_label_set_text_fmt(label， “Value: %d”， 15)可以使用printf格式设置文本。.
标签能够显示来自静态字符缓冲区的文本。为此，使用lv_label_set_text_static(label，“Text”)。在这种情况下，文本不存储在动态内存中，而是直接使用给定的缓冲区。这意味着数组不能是函数退出时超出作用域的局部变量。常量字符串与lv_label_set_text_static一起使用是安全的(除非与LV_LABEL_LONG_DOT一起使用，因为它在适当的地方修改缓冲区)，因为它们存储在ROM内存中，它总是可访问的。

1.3.2新行 New line

新行字符由label对象自动处理。你可以用\n来换行。例如:“line1 \ nline2 \ n \ nline4”

1.3.3长模式 Long modes

默认情况下，标签的宽度和高度被设置为lv_size_content，因此标签的大小自动扩展为文本大小。否则，如果显式地设置了宽度或高度(例如使用lv_obj_set_width或布局)，可以根据几个长模式策略来操纵比标签宽度宽的行。类似地，如果文本的高度大于标签的高度，也可以应用这些策略。
实现函数void lv_label_set_long_mode(lv_obj_t * obj, lv_label_long_mode_t long_mode);

/**长模式行为。用于lv_label_ext_t * /
LV_LABEL_LONG_WRAP，          /**<保持对象宽度，换行过长的行，展开对象高度*/
LV_LABEL_LONG_DOT，           /**<保持大小，如果文本太长，在末尾写圆点*/
LV_LABEL_LONG_SCROLL，            /**<保持文本大小并来回滚动*/
LV_LABEL_LONG_SCROLL_CIRCULAR， /**<保持大小并循环滚动文本*/
LV_LABEL_LONG_CLIP，          /**<保持大小并剪辑文本*/

请注意，LV_LABEL_LONG_DOT在适当位置操作文本缓冲区，以便添加/删除点。
当使用lv_label_set_text或lv_label_set_array_text时，会分配一个单独的缓冲区，并且不会注意到这个实现细节。lv_label_set_text_static则不是这样。如果计划使用LV_LABEL_LONG_DOT，传递给
lv_label_set_text_static的缓冲区必须是可写的。

1.3.4文本重新上色 Text recolor

实现函数 void lv_label_set_recolor(lv_obj_t * obj, bool en);其中开启字体的重着色后可以设置字体的颜色显示格式为 #0000ff Re-color#，使用“# # ”中间要有字体颜色参数和显示内容其中“0000ff”表示Hex格式的颜色表，可以根据在线网页提取“ Re-color”表示要被显示重新着色的内容。

1.3.5文本的选择 Text selection

如果通过LV_LABEL_TEXT_SELECTION启用，可以选择文本的一部分。这类似于在PC上使用鼠标选择文本。整个mechanzim(单击并选择文本,你用手指拖/鼠标)在文本区域和标签implemeted部件只允许手工制造零件的文本选择与lv_label_get_text_selection_start(标签,start_char_index)和lv_label_get_text_selection_start(label,end_char_index)

1.3.6很长的文字 Very long texts

LVGL可以有效地处理非常长的(例如> 40k字符)，通过保存一些额外的数据(~12字节)来加速绘图。在lv_conf.h中设置LV_LABEL_LONG_TXT_HINT 1即可启用该特性。

1.3.7符号 Symbols

标签可以在字母旁边显示符号(或显示符号本身)。阅读字体部分来了解更多关于符号的信息

1.4事件 Events

发送任何特别的事件.

1.5按键 Keys

对象类型不处理任何key。

本次主要讲述lvgl的Label,Label(标签)是用于显示文本的基本对象类型。可以通过设置Label从而实现对字体显示的方式不同，可以实现字体居中显示或者向左对齐，向右对齐，还可以实现文字的滚动显示剪辑文本对字体重着色等操作。

三、Label API

其中为字体的对齐方式
lv_obj_set_style_base_dir(rtl_label, LV_BASE_DIR_LTR, 0);

LV_BASE_DIR_LTR     //右对齐
LV_BASE_DIR_RTL     //左对齐
LV_BASE_DIR_AUTO    //自动

lv_obj_t * lv_label_create(lv_obj_t * parent);                                   //创建一个标签对象
void lv_label_set_text(lv_obj_t * obj, const char * text);                      //为标签设置一个新文本。内存将分配给存储文本的标签。
void lv_label_set_text_fmt(lv_obj_t * obj, const char * fmt, ...) LV_FORMAT_ATTRIBUTE(2, 3);//为标签设置一个新的格式化文本。内存将分配给存储文本的标签。
void lv_label_set_text_static(lv_obj_t * obj, const char * text);               //设置静态文本。它不会被标签保存，所以'text'变量必须是“活着”，而标签存在。
void lv_label_set_long_mode(lv_obj_t * obj, lv_label_long_mode_t long_mode);    //设置文本长度大于对象大小的标签的行为
void lv_label_set_recolor(lv_obj_t * obj, bool en);                             //通过内联命令启用重新着色
void lv_label_set_text_sel_start(lv_obj_t * obj, uint32_t index);               //设置文本选择应该从哪里开始
void lv_label_set_text_sel_end(lv_obj_t * obj, uint32_t index);                 //设置文本选择的结束位置
char * lv_label_get_text(const lv_obj_t * obj);                                 //获取标签的文本
lv_label_long_mode_t lv_label_get_long_mode(const lv_obj_t * obj);              //获取标签的长模式
bool lv_label_get_recolor(const lv_obj_t * obj);                                //获取重新着色属性
void lv_label_get_letter_pos(const lv_obj_t * obj, uint32_t char_id, lv_point_t * pos);     //获取一个字母的相对x和y坐标
uint32_t lv_label_get_letter_on(const lv_obj_t * obj, lv_point_t * pos_in);     //获取标签相对位置上的字母索引。
bool lv_label_is_char_under_pos(const lv_obj_t * obj, lv_point_t * pos);        //检查是否在点下绘制字符。
uint32_t lv_label_get_text_selection_start(const lv_obj_t * obj);               //获取选择的起始索引。
uint32_t lv_label_get_text_selection_end(const lv_obj_t * obj);                 //获取选择结束索引。
void lv_label_ins_text(lv_obj_t * obj, uint32_t pos, const char * txt);         //插入一个文本到标签。标签文本不能是静态的。
void lv_label_cut_text(lv_obj_t * obj, uint32_t pos, uint32_t cnt);             //从标签中删除字符。标签文本不能是静态的。

四、示例

4.1显示个别字体颜色

示例1实现基本额Label显示，实现字体颜色重着色和实现字体的滚动显示。

/**************************************************  函数名称 :  Label_show_1 实现基本label的显示*  参    数 ： 无*  函数功能 ： 实现基本label的显示*************************************************/
void Label_show_1()
{lv_obj_t * label1 = lv_label_create(lv_scr_act());          //创建label对象    lv_label_set_long_mode(label1,LV_LABEL_LONG_WRAP);          //设置label longmodelv_label_set_recolor(label1,true);                          //设置label 重着色lv_label_set_text(label1,"#0000ff Re-color# #ff00ff words# #ff0000 of a# label,align the lines to center ""and wrap long text automatically"); //设置label字体lv_obj_set_width(label1,150);                               //设置对象宽度lv_obj_set_style_text_align(label1,LV_TEXT_ALIGN_CENTER,0); //设置对象字体样式居中lv_obj_align(label1,LV_ALIGN_CENTER,0,-40);                 //设置对象居中lv_obj_t * label2 = lv_label_create(lv_scr_act());          //创建label对象 lv_label_set_long_mode(label2,LV_LABEL_LONG_SCROLL_CIRCULAR); //设置label longmodelv_obj_set_width(label2,150);                               //设置对象宽度lv_label_set_text(label2,"It is a circularly scrolling text");//设置label字体lv_obj_align(label2,LV_ALIGN_CENTER,0,40);                  //设置对象居中
}

4.2字体模糊效果

示例2主要实现通过，通过显示字体的透明度和实现相对位置实现模糊字体显示的效果。

/**************************************************  函数名称 :  Label_show_2 *  参    数 ： 无*  函数功能 ： 使用显示不同透明和相对居中实现模糊阴影显示效果*************************************************/
void Label_show_2()
{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()); //创建阴影labellv_obj_add_style(shadow_label,&style_shadow,0);          //添加label的样式lv_obj_t * main_label = lv_label_create(lv_scr_act());   //创建主labellv_label_set_text(main_label, "A simple method to create\n""ahadows 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_label_get_text(main_label)获取label对象的字内容lv_obj_align(main_label,LV_ALIGN_CENTER,0,0);            //主样式居中显示lv_obj_align_to(shadow_label,main_label,LV_ALIGN_TOP_LEFT,2,2); //相对位置显示
}

4.3显示自定义字体

示例3主要实现自定义字体的显示，实现特定的中文或者其他文字的显示，可以不用加载字库实现字体的显示，我这里使用的是 LvglFontTool.exe ,然后在CMakeLists.txt文档中添加对应的.c文件，接着在我们文件测试文件中添加包含字体的头文件，需要修改的地方是在生成的.c文件中要添加适合自己的lvgl.h的文件，编译的时候会出现错误，这应该是这个软件还没有适配LVGL8的字体显示规格，我们将里面内容注释掉编译错误的即可。

最后在我们要实现的文档中引入测试字体的路径，直接设置label的显示字体即可。

   LV_FONT_DECLARE(HelloESP32)                                   //加载字体路径lv_label_set_text(cz_label, "你好！乐鑫，我最近在使用ESP32跑LVGL，祝我好运吧！");   //设置显示字体lv_obj_set_style_text_font(cz_label,&HelloESP32,0);           //设置显示样式

/**************************************************  函数名称 :  Label_show_3 *  参    数 ： 无*  函数功能 ： 显示其他字体*************************************************/
void Label_show_3()
{lv_obj_t * ltr_label = lv_label_create(lv_scr_act());             //创建主labellv_label_set_text(ltr_label, "In modern terminology, a microcontroller is similar to a system on a chip (SoC).");    //设置字内容lv_obj_set_style_text_font(ltr_label, &lv_font_montserrat_16, 0); //设置样式内容lv_obj_set_width(ltr_label, 310);                                 //设置对象的宽度lv_obj_align(ltr_label, LV_ALIGN_TOP_LEFT, 5, 5);                 //左上居中lv_obj_t * rtl_label = lv_label_create(lv_scr_act());             //创建主labellv_label_set_text(rtl_label, "מעבד, או בשמו המלא יחידת עיבוד מרכזית (באנגלית: CPU - Central Processing Unit)."); //设置字内容lv_obj_set_style_base_dir(rtl_label,LV_BASE_DIR_RTL,0);           //设置样式内容lv_obj_set_style_text_font(rtl_label,&lv_font_dejavu_16_persian_hebrew,0); //设置对象的宽度lv_obj_set_width(rtl_label,310);                                  //设置对象的宽度lv_obj_align(rtl_label,LV_ALIGN_LEFT_MID,5,0);                    //左上居中lv_obj_t * cz_label = lv_label_create(lv_scr_act());             //创建主labelLV_FONT_DECLARE(HelloESP32)                                        //加载字体路径lv_label_set_text(cz_label, "你好！乐鑫，我最近在使用ESP32跑LVGL，祝我好运吧！");   //设置显示字体lv_obj_set_style_text_font(cz_label,&HelloESP32,0);               //设置显示样式lv_obj_set_width(cz_label,240);                                   //设置对象宽度lv_obj_align(cz_label,LV_ALIGN_BOTTOM_LEFT,5,-5);                 //居中显示
}

备注这里图片显示已在开发板验证

ESP32 LVGL8.1 ——Label 标签 (Style 14)相关推荐

用Tkinter打造GUI开发工具（14）Tkinter小部件的Label标签部件
用Tkinter打造GUI开发工具(14)Tkinter小部件的Label标签部件标签Label部件是Tkinter最常用的部件之一,其语法格式如下. label=tk.Label ( master ...
【转】WPF自定义控件与样式(3)-TextBox RichTextBox PasswordBox样式、水印、Label标签、功能扩展...
一．前言.预览申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要是对文本输入控件进行样式开发,及相关扩展功能开发,主要内容包括: 基本文 ...
隐藏label标签中指定文字
项目场景: 使用js动态向div中传值,并隐藏指定的值不显示解决方案: label标签隐藏显示 2022-05-06 14:23:08 针对label,input文本框,按钮的显示与隐藏 1- 为其 ...
使用fieldset、label标签制作form表单
http://www.52css.com/article.asp?id=238 对于表单,是网页中非常常用的元素.但是在web standard建站的时候,他的排版容易人遗忘,到了真正用到的时候就发现 ...
微信小程序 MinUI 组件库系列之 label 标签组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
label标签的属性
//label标签的属性 1 - (void)viewDidLoad { 2 //初始化一个label1标签对象,初始化有很多方法,最原始的就是init,此处用带有frame的方法 3 UILabel ...
label标签的使用
定义和用法 <label> 标签为 input 元素定义标签(label). label 元素不会向用户呈现任何特殊的样式.不过,它为鼠标用户改善了可用性,因为如果用户点击 label 元 ...
label标签使用详解
label: The <label> tag defines a label for an input element. label用来为 input 元素定义标注(标记). The la ...
Echarts —自定义label标签的样式(formatter，rich，添加图标等操作)
最近公司项目中在使用 Echarts 绘制图表时,由于默认的 label 标签不能满足设计稿需求,所以研究了对 label标签进行格式化的方案,了解到可以使用 formatter 内容格式器对标签内容 ...
微信小程序 MinUI 组件库系列之 label 标签组件 1
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...

ESP32 LVGL8.1 ——Label 标签 (Style 14)