LVGL——（4）标签控件

news2024/11/27 4:18:00

文章目录

  • 一、介绍
  • 二、用法
    • 1、创建
    • 2、显示文本
      • 2.1 直接设置要显示的文本
      • 2.2 格式化给定要显示的文本
      • 2.3 在 label 中进行换行
    • 3、改变字体大小
    • 4、长模式
    • 5、文本选择
    • 6、文本对齐方式
    • 7、非常长的文本
    • 8、显示内置图标字体
    • 9、事件处理
  • 三、拓展
    • 1、修改文本颜色
      • 1.1 Palette（调色板）
      • 1.2 代码示例
    • 2、刷新 label 中的内容
    • 3、中文显示
      • 3.1 介绍
      • 3.2 如何使用字体转换器
      • 3.3 如何在 LVGL 中使用生成的字体
      • 3.4 详细操作
      • 3.5 其他

一、介绍

标签是⽤来显⽰⽂本的控件。

在盒⼦模型⾥⾯，标签的组成包括：

  • LV_PART_MAIN 矩形部分 ( 盒⼦区域 ) 。 填充值可⽤于在⽂本和背景之间添加空间。
  • LV_PART_SCROLLBAR 当要展⽰的⽂本⼤于部件的⼤⼩时，显⽰的滚动条部分。
  • LV_PART_SELECTED 选中⽂本时，突出显⽰的部分。 label 只能使⽤ text_color 和 bg_color 样式属性。

二、用法

1、创建

创建标签：

lv_obj_t * label = lv_label_create(parent);

代码示例

//在主函数中调用此函数
void label_demo(void)
{
	lv_obj_t * label = lv_label_create(lv_screen_active()); 		//创建label控件 会默认显示text
}

在这里插入图片描述

在调用标签控件函数时，会默认显示盒子模型中的文本，并默认为 text，若要更加清晰的了解标签控件与盒子模型的关系，可以调用之前盒子模型相关函数来调整文本显示。

代码示例

//在主函数中调用此函数
void label_demo(void)
{
	lv_obj_t * label = lv_label_create(lv_screen_active()); 		//创建label控件 会默认显示text
	lv_obj_set_style_bg_opa(label, LV_OPA_COVER, 0);				//设置控件的透明度为不透明
	lv_obj_set_style_bg_color(label,  lv_color_hex(0x9fce43), 0);	//设置空间的本地样式演示为绿色
}

在这里插入图片描述

一开始初始化的标签控件是默认透明的，当我们给他设置透明度和本地样式颜色后，文本显示也会做出相应改变。（注意：若只设置了颜色不设置透明度，还是与第一个现象相同）

2、显示文本

创建了标签部件之后我们就可以设置⽂本来显⽰了，如果不设置要显⽰的⽂本，默认显⽰的⽂本内容是： text 。

2.1 直接设置要显示的文本

lv_label_set_text(label, "New text");

代码示例

//在主函数中调用此函数
void label_demo(void)
{
	//char * label_str = "LjunG 666";
	static char label_str[] = "LjunG 666";

	lv_obj_t * label = lv_label_create(lv_screen_active()); 		//创建label控件 会默认显示text
	lv_obj_set_style_bg_opa(label, LV_OPA_COVER, 0);				//设置控件的透明度为不透明
	lv_obj_set_style_bg_color(label,  lv_color_hex(0x9fce43), 0);	//设置空间的本地样式演示为绿色

	/* 显示文本的几种方式 */
	//lv_label_set_text(label, label_str);							//需要先创建label_str指定文本内容（对应第4、5行）
	//lv_label_set_text(label, "LjunG 666");						//可直接修改控件文本内容
	lv_label_set_text_static(label, label_str);						//这里的label_str需要按照4、5行的格式创建才生效
}

在这里插入图片描述

可见一开始初始化的 text 被修改成我们指定的文本，文本内容成功修改。

2.2 格式化给定要显示的文本

lv_label_set_text_fmt(label, “%s: %d”, “Value”, 15);

代码示例

//在主函数中调用此函数
void label_demo(void)
{
	//char * label_str = "LjunG 666";
	//static char label_str[] = "LjunG 666";

	lv_obj_t * label = lv_label_create(lv_screen_active()); 		//创建label控件 会默认显示text
	lv_obj_set_style_bg_opa(label, LV_OPA_COVER, 0);				//设置控件的透明度为不透明
	lv_obj_set_style_bg_color(label,  lv_color_hex(0x9fce43), 0);	//设置空间的本地样式演示为绿色

	/* 显示文本的几种方式 */
	//lv_label_set_text(label, label_str);							//需要先创建label_str指定文本内容（对应第4、5行）
	//lv_label_set_text(label, "LjunG 666");						//可直接修改控件文本内容
	//lv_label_set_text_static(label, label_str);					//这里的label_str需要按照4、5行的格式创建才生效
    lv_label_set_text_fmt(label, "%s%s%d", "LjunG", " ", 666);		//格式化要显示的文本
}

在这里插入图片描述

按照2.1的现象对文本进行格式化得到相同现象。

2.3 在 label 中进行换行

要在 label 换⾏⾮常简单，像 printf 函数那样使⽤ \n 即可：

lv_label_set_text(label, " line1\nline2\n\nline4 ");

代码示例

//在主函数中调用此函数
void label_demo(void)
{
	//char * label_str = "LjunG 666";
	//static char label_str[] = "LjunG 666";
    static char label_str[] = "LjunG 666\n\n\n\n666";				//体验label换行

	lv_obj_t * label = lv_label_create(lv_screen_active()); 		//创建label控件 会默认显示text
	lv_obj_set_style_bg_opa(label, LV_OPA_COVER, 0);				//设置控件的透明度为不透明
	lv_obj_set_style_bg_color(label,  lv_color_hex(0x9fce43), 0);	//设置空间的本地样式演示为绿色

	/* 显示文本的几种方式 */
	//lv_label_set_text(label, label_str);							//需要先创建label_str指定文本内容（对应第4、5行）
	//lv_label_set_text(label, "LjunG 666");						//可直接修改控件文本内容
	lv_label_set_text_static(label, label_str);						//这里的label_str需要按照4、5行的格式创建才生效（如果第5行没有加static关键字则无法正常显示）
    //lv_label_set_text_fmt(label, "%s%s%d", "LjunG", " ", 666);	//格式化要显示的文本
}

在这里插入图片描述

在调用 \n 后成功换行并且再次显示数据，如图在换行时本地样式颜色会一直存在，因为标签控件也是遵循盒子模型。

3、改变字体大小

改变字体⼤⼩（字号）就是改变了字体的类型，不同的字体⼤⼩对应了不同的字体。也就是说同样的内容，如果你要显⽰两个不同⼤⼩的⽂字，那就需要有两个对应的字体共 lvgl 显⽰，这样就需要消耗两份不同的资源来保存，即使你要显⽰的内容是⼀样的，设置⽅法：

lv_obj_set_style_text_font();
lv_style_set_text_font();

文本大小参数

#define LV_FONT_MONTSERRAT_8    1
#define LV_FONT_MONTSERRAT_10   1
#define LV_FONT_MONTSERRAT_12   1
#define LV_FONT_MONTSERRAT_14   1
#define LV_FONT_MONTSERRAT_16   1
#define LV_FONT_MONTSERRAT_18   1
#define LV_FONT_MONTSERRAT_20   1
#define LV_FONT_MONTSERRAT_22   1
#define LV_FONT_MONTSERRAT_24   1
#define LV_FONT_MONTSERRAT_26   1
#define LV_FONT_MONTSERRAT_28   1
#define LV_FONT_MONTSERRAT_30   1
#define LV_FONT_MONTSERRAT_32   1
#define LV_FONT_MONTSERRAT_34   1
#define LV_FONT_MONTSERRAT_36   1
#define LV_FONT_MONTSERRAT_38   1
#define LV_FONT_MONTSERRAT_40   1
#define LV_FONT_MONTSERRAT_42   1
#define LV_FONT_MONTSERRAT_44   1
#define LV_FONT_MONTSERRAT_46   1
#define LV_FONT_MONTSERRAT_48   1

代码示例

//在主函数中调用此函数
void label_demo(void)
{
	//char * label_str = "LjunG 666";
	//static char label_str[] = "LjunG 666";
    static char label_str[] = "LjunG 666\n\n\n\n666";				//体验label换行

	lv_obj_t * label = lv_label_create(lv_screen_active()); 		//创建label控件 会默认显示text
	lv_obj_set_style_bg_opa(label, LV_OPA_COVER, 0);				//设置控件的透明度为不透明
	lv_obj_set_style_bg_color(label,  lv_color_hex(0x9fce43), 0);	//设置空间的本地样式演示为绿色

	/* 显示文本的几种方式 */
	//lv_label_set_text(label, label_str);							//需要先创建label_str指定文本内容（对应第4、5行）
	//lv_label_set_text(label, "LjunG 666");						//可直接修改控件文本内容
	lv_label_set_text_static(label, label_str);						//这里的label_str需要按照4、5行的格式创建才生效
    //lv_label_set_text_fmt(label, "%s%s%d", "LjunG", " ", 666);	//格式化要显示的文本
	lv_obj_set_style_text_font(label, &lv_font_montserrat_48, 0);	//设置文本大小																												//如果第5行没有加static关键字则无法正常显示    
}

在这里插入图片描述

可见，成功将文本字体设置为最大数值，在调用该函数时，lv_font_montserrat_14 为默认文本大小（初始化文本大小）。

4、长模式

默认情况标签的⼤⼩会⾃动拓展成和⽂本⼀样的⼤⼩ (LV_SIZE_CONTENT) ，也可以像前⾯课程说到的⽅法显式设置宽⾼：

lv_obj_set_size
 lv_obj_set_width
 lv_obj_set_height

这样就可能出现⽂本的宽度或⾼度⼩于 label ⼤⼩的情况，这个时候就需要做⼀些调整，下⾯是⼏种可调整的模式：

  • LV_LABEL_LONG_WRAP 如果有多个换⾏，并且如果⾼度为 LV_SIZE_CONTENT 或者⾜够⾼，那么⾼度会根据⽂本换⾏被⾃动扩展；否则⽂本将被剪掉。 ( 默认设置 )
  • LV_LABEL_LONG_DOT 如果⽂本太⻓，就保持⼤⼩并在末尾写 3 个点
  • LV_LABEL_LONG_SCROLL 如果⽂本⽐标签宽 ( 太⻓ ) ，则可以⽔平来回滚动显⽰它。如果它很⾼ ( 多个 \n 换⾏ ) ，可以垂直滚动。只滚动⼀个⽅向，⽔平滚动的优先级更⾼。
  • LV_LABEL_LONG_SCROLL_CIRCULAR 如果⽂本⽐标签宽，则⽔平滚动它。如果它更⾼，就垂直滚动。只滚动⼀个⽅向，⽔平滚动的优先级更⾼。
  • LV_LABEL_LONG_CLIP 剪掉超出标签范围外的⽂本部分。

代码示例

//在主函数中调用此函数
void label_demo(void)
{
	static char label_str[] = "LjunG 6666666666\n66666666\n66666666\n66666666\n66666666\n66666666";

	lv_obj_t * label = lv_label_create(lv_screen_active()); 		//创建label控件 会默认显示text

	/* 显示文本的几种方式 */
	lv_label_set_text(label, label_str);							//需要先创建label_str指定文本内容（对应第4、5行）
    
	/* 长模式设置 */
	//第二个参数为宽度，第三个参数为高度
	lv_obj_set_size(label, LV_SIZE_CONTENT, LV_SIZE_CONTENT);		//文本设置为弹性状况，会根据盒子模型，内容大文本大，内容小文本小
}

在这里插入图片描述

可见，标签大小自动配置成与文本大小一样。我们也可以调用其他几个参数看看现象：

//在主函数中调用此函数
void label_demo(void)
{
	static char label_str[] = "LjunG 6666666666\n66666666\n66666666\n66666666\n66666666\n66666666";

	lv_obj_t * label = lv_label_create(lv_screen_active()); 		//创建label控件 会默认显示text

	/* 显示文本的几种方式 */
	lv_label_set_text(label, label_str);							//需要先创建label_str指定文本内容（对应第4、5行）
    
	/* 长模式设置 */
	//第二个参数为宽度，第三个参数为高度
	lv_obj_set_size(label, 200, 50);								//文本宽度超过设置宽度时，会自动换行；换行后高度超过设置高度时，会被截断
}

在这里插入图片描述

可以看到数据显示并不完全，因为我们文本的高度超过了标签的高度，为了避免这种情况，我们可以调用其他参数：

//在主函数中调用此函数
void label_demo(void)
{
	static char label_str[] = "LjunG 6666666666\n66666666\n66666666\n66666666\n66666666\n66666666";

	lv_obj_t * label = lv_label_create(lv_screen_active()); 		//创建label控件 会默认显示text

	/* 显示文本的几种方式 */
	lv_label_set_text(label, label_str);							//需要先创建label_str指定文本内容（对应第4、5行）
    
	/* 长模式设置 */
	//第二个参数为宽度，第三个参数为高度
	lv_obj_set_size(label, 200, 50);								//文本宽度超过设置宽度时，会自动换行；换行后高度超过设置高度时，会被截断
	lv_label_set_long_mode(label, LV_LABEL_LONG_DOT);				//文本宽度超过设置宽度时，会自动换行；换行后高度超过设置高度时，会以...结尾
}

在这里插入图片描述

这样子后面超过的内容就会以…结束，看起来比较美观，但是如果我们想要看到后面的内容，则需要换其他参数：

//在主函数中调用此函数
void label_demo(void)
{
	static char label_str[] = "LjunG 6666666666\n66666666\n66666666\n66666666\n66666666\n66666666";

	lv_obj_t * label = lv_label_create(lv_screen_active()); 		//创建label控件 会默认显示text

	/* 显示文本的几种方式 */
	lv_label_set_text(label, label_str);							//需要先创建label_str指定文本内容（对应第4、5行）
    
	/* 长模式设置 */
	//第二个参数为宽度，第三个参数为高度
	lv_obj_set_size(label, 200, 50);								//文本宽度超过设置宽度时，会自动换行；换行后高度超过设置高度时，会被截断
	lv_label_set_long_mode(label, LV_LABEL_LONG_SCROLL);			//文本宽度超过设置宽度时，会水平来回滚动；高度超过设置高度，会垂直来回滚动，水平滚动优先级较大
	//lv_label_set_long_mode(label, LV_LABEL_LONG_SCROLL_CIRCULAR);	//文本宽度超过设置宽度时，会水平滚动；高度超过设置高度，会垂直滚动，水平滚动优先级较大    
}

在这里插入图片描述

成功观察到下面被截掉的数据，若此时设置宽度小于文本宽度，则会垂直滚动，若设置高度也小于文本高度，呈现的还是垂直滚动，因为垂直滚动优先级大。（14行、15行现象类似，只不过滚动时现象有点不同，这里就不做演示）

可以使⽤ lv_label_set_long_mode(label, LV_LABEL_LONG_…) 指定模式。

注意： LV_LABEL_LONG_DOT 是直接操作⽂本缓冲区以添加 / 删除点。如果使⽤ lv_label_set_text 和 lv_label_set_text_fmt 它们会分配⼀个单独的缓冲区，不会出问题。但是如果使⽤ lv_label_set_text_static 时我们传递给它的缓冲区必须是可写的。

在这里插入图片描述

以下面几行代码作比较为例：

char * label_str = "LjunG 666";								//代码段存在于栈中 是只读的（速度较快）
static char label_str[] = "LjunG 666";						//代码段存在于栈中 涉及内存复制操作 可以对其进行复制粘贴到我们规划的栈中

lv_label_set_text(label, label_str);						//需要先创建label_str指定文本内容（效率快）
lv_label_set_text_static(label, label_str);					//这里的label_str需要按照1、2行的格式创建才生效（效率慢）

5、文本选择

如果在 lv_conf.h 中打开了 LV_LABEL_TEXT_SELECTION ，那么就可以使⽤ lv_label 的选择⽂本功能，这就像在 PC 上使⽤⿏标选择⽂本类似（在拖动⼿指 / ⿏标时单击并选择⽂本），不同的是 lv_label 只能⼿动指定要选择的⽂本范围：

  • lv_label_set_text_selection_start();
  • lv_label_set_text_selection_end();

代码示例

//在主函数中调用此函数
void label_demo(void)
{
	static char label_str[] = "LjunG 666";							//代码段存在于栈中 涉及内存复制操作 可以对其进行复制粘贴到我们规划的栈中

	lv_obj_t * label = lv_label_create(lv_screen_active()); 		//创建label控件 会默认显示text

	/* 显示文本的几种方式 */
	lv_label_set_text(label, label_str);							//需要先创建label_str指定文本内容（对应第4、5行）
    
    lv_obj_set_style_text_font(label, &lv_font_montserrat_48, 0);	//设置文本大小 默认是lv_font_montserrat_14																					
	/* 文本选择 */
	lv_label_set_text_selection_start(label, 0);					//从设定文本的0开始
	lv_label_set_text_selection_end(label, 5);					//在设定文本的5结束  	
}

在这里插入图片描述

可以看到被选中的文本会出现白色背景，就实现了文本选择。

6、文本对齐方式

函数接口：

lv_obj_set_style_text_align();
lv_style_set_text_align();

注意，只有在以下情况下，它才具有可见的效果：

  • lv_label 的宽度⼤于⽂本最长行的宽度
  • ⽂本有多⾏并且⾏⻓度不相等

代码示例

//在主函数中调用此函数
void label_demo(void)
{
	static char label_str[] = "LjunG\n66666666666\n666666666\n6666666\n66666\n666\n6";

	lv_obj_t * label = lv_label_create(lv_screen_active()); 		//创建label控件 会默认显示text

	/* 显示文本的几种方式 */
	lv_label_set_text(label, label_str);							//需要先创建label_str指定文本内容（对应第4、5行）
    
    lv_obj_set_style_text_font(label, &lv_font_montserrat_48, 0);	//设置文本大小 默认是lv_font_montserrat_14																					
	/* 文本对齐 */
	lv_obj_set_style_text_align(label, LV_TEXT_ALIGN_CENTER, 0); 	
}

在这里插入图片描述

可以看到，在我们设定的文本中，按居中方式进行对齐。

7、非常长的文本

如果⽂本⾮常⻓（⽐如 > 40k 个字符）时， lv_label 可能会⽆法处理甚⾄报错或者展⽰起来效果⾮常差，那么想要有效地处理这些⽂本，需要在 lv_conf.h 中打开 LV_LABEL_LONG_TXT_HINT 。

8、显示内置图标字体

通过⼀些⽅法我们可以将想要的图标集成到字体⽂件中，之后通过字体的形式进⾏显示，⽐如使⽤ lv_label 显示。

在这里插入图片描述

用法很简单：

lv_label_set_text(my_label, LV_SYMBOL_OK);           // 直接显示图标
lv_label_set_text(my_label, LV_SYMBOL_OK “Apply”);   // 图标与字符串一起使用
lv_label_set_text(my_label, LV_SYMBOL_OK LV_SYMBOL_WIFI LV_SYMBOL_PLAY);  // 多个图标一起使用

代码示例

//在主函数中调用此函数
void label_demo(void)
{
	lv_obj_t * label = lv_label_create(lv_screen_active()); 		//创建label控件 会默认显示text

	/* 显示文本的几种方式 */
	lv_label_set_text(label, LV_SYMBOL_AUDIO LV_SYMBOL_LEFT "LjunG 666" LV_SYMBOL_RIGHT LV_SYMBOL_AUDIO);
    
    lv_obj_set_style_text_font(label, &lv_font_montserrat_48, 0);	//设置文本大小 默认是lv_font_montserrat_14				
}

在这里插入图片描述

可见，按照用法第三行可以实现多个图标一起使用，同时在图标中加入文本。

9、事件处理

lv_label 默认不接收输⼊事件，如果我们想让 lv_label 响应点击操作，需要打开 LV_OBJ_FLAG_CLICKABLE ，⽰例：

lv_obj_add_flag(label, LV_OBJ_FLAG_CLICKABLE);       // 使输入设备可点击对象

代码示例

static void my_event_cb(lv_event_t * e);

//在主函数中调用此函数
void label_demo(void)
{
	lv_obj_t * label = lv_label_create(lv_screen_active()); 		//创建label控件 会默认显示text
    
    lv_obj_add_flag(label, LV_OBJ_FLAG_CLICKABLE); 
    lv_obj_add_event_cb(label, my_event_cb, LV_EVENT_CLICKED, label);    

	/* 显示文本的几种方式 */
	lv_label_set_text(label, LV_SYMBOL_AUDIO LV_SYMBOL_LEFT "LjunG 666" LV_SYMBOL_RIGHT LV_SYMBOL_AUDIO);
    
    lv_obj_set_style_text_font(label, &lv_font_montserrat_48, 0);	//设置文本大小 默认是lv_font_montserrat_14				
}

static void my_event_cb(lv_event_t * e)
{
    LV_LOG_USER(">>>>>>>>>>>>LV_EVENT_CLICKED\n");
}

在这里插入图片描述

可以看到，当我们设置了输入设备可点击，在点击 label 文本时，成功打印出信息，即让 label 响应点击操作。

三、拓展

1、修改文本颜色

颜色模块处理所有与颜色相关的功能，如改变颜色深度、从十六进制代码创建颜色、在颜色深度之间转换、混合颜色等。

类型 lv_color_t 用于以RGB888格式存储颜色。无论 LV_COLOR_DEPTH 如何，几乎所有 API 中都使用此类型和格式。

从红色、绿色和蓝色通道值创建颜色：

/*All channels are 0-255*/
lv_color_t c = lv_color_make(red, green, blue);


/*Same but can be used for const initialization too */
lv_color_t c = LV_COLOR_MAKE(red, green, blue);

/*From hex code 0x000000..0xFFFFFF interpreted as RED + GREEN + BLUE*/
lv_color_t c = lv_color_hex(0x123456);

/*From 3 digits. Same as lv_color_hex(0x112233)*/
lv_color_t c = lv_color_hex3(0x123);

1.1 Palette（调色板）

LVGL中包含 Material Design’s palette 的颜色。在这个系统中，所有命名的颜色都有一个名义上的主要颜色，以及四种较暗和五种较浅的变体。

颜色的名称如下：

  • LV_PALETTE_RED
  • LV_PALETTE_PINK
  • LV_PALETTE_PURPLE
  • LV_PALETTE_DEEP_PURPLE
  • LV_PALETTE_INDIGO
  • LV_PALETTE_BLUE
  • LV_PALETTE_LIGHT_BLUE
  • LV_PALETTE_CYAN
  • LV_PALETTE_TEAL
  • LV_PALETTE_GREEN
  • LV_PALETTE_LIGHT_GREEN
  • LV_PALETTE_LIME
  • LV_PALETTE_YELLOW
  • LV_PALETTE_AMBER
  • LV_PALETTE_ORANGE
  • LV_PALETTE_DEEP_ORANGE
  • LV_PALETTE_BROWN
  • LV_PALETTE_BLUE_GREY
  • LV_PALETTE_GREY

要获取主要颜色，请使用 lv_color_t c = lv_palette_main(LV_PALETTE_...)

1.2 代码示例

改变文本全部字体

//在主函数中调用此函数
void label_demo(void)
{
	lv_obj_t * label = lv_label_create(lv_screen_active()); 		//创建label控件 会默认显示text

	/* 显示文本的几种方式 */
	lv_label_set_text(label, LV_SYMBOL_AUDIO LV_SYMBOL_LEFT "LjunG 666" LV_SYMBOL_RIGHT LV_SYMBOL_AUDIO);
    
    lv_obj_set_style_text_font(label, &lv_font_montserrat_48, 0);	//设置文本大小 默认是lv_font_montserrat_14
    
    /* 改变文本颜色（所有） */
	lv_obj_set_style_text_color(label, lv_color_make(128, 0, 128), 0);			//使用RGB三原色显示颜色
	//lv_obj_set_style_text_color(label, lv_color_hex(0x800080), 0);			//以16进制显示颜色
	//lv_obj_set_style_text_color(label, lv_palette_main(LV_PALETTE_PURPLE), 0);//以主要颜色显示    
}

在这里插入图片描述

可见，我们写入的文本所有字体颜色都发生变化。

//在主函数中调用此函数
void label_demo(void)
{
	lv_obj_t * label = lv_label_create(lv_screen_active()); 		//创建label控件 会默认显示text

	/* 显示文本的几种方式 */
	lv_label_set_text(label, LV_SYMBOL_AUDIO LV_SYMBOL_LEFT "LjunG 666" LV_SYMBOL_RIGHT LV_SYMBOL_AUDIO);
    
    lv_obj_set_style_text_font(label, &lv_font_montserrat_48, 0);	//设置文本大小 默认是lv_font_montserrat_14
    
	/* 文本选择 */
	lv_label_set_text_selection_start(label, 0);					//从设定文本的0开始
	lv_label_set_text_selection_end(label, 5);						//在设定文本的5结束
  
    /* 改变指定文本颜色 */
    lv_obj_set_style_text_color(label, lv_palette_main(LV_PALETTE_PURPLE), LV_PART_SELECTED);	//在设定的文本设置颜色
	lv_obj_set_style_bg_color(label, lv_color_hex(0xf5f5f5), LV_PART_SELECTED);					//在设定的文本设置背景色（如果执行此条指令，则在上一条指令执行文本改变颜色后其背景色为白色，与软件背景色有差异）
}

在这里插入图片描述

可以看到我们写入的文本在设定的文本范围内颜色发生了改变。

2、刷新 label 中的内容

可以创建一个定时器，定时器回调函数中随机显示 label 文本，在主函数调用即可。

代码示例

//在主函数中调用此函数
void label_demo(void)
{
	lv_obj_t * label = lv_label_create(lv_screen_active()); 		//创建label控件 会默认显示text

	/* 显示文本的几种方式 */
	lv_label_set_text(label, LV_SYMBOL_AUDIO LV_SYMBOL_LEFT "LjunG 666" LV_SYMBOL_RIGHT LV_SYMBOL_AUDIO);
    
    lv_obj_set_style_text_font(label, &lv_font_montserrat_48, 0);	//设置文本大小 默认是lv_font_montserrat_14
    
	/* 文本选择 */
	lv_label_set_text_selection_start(label, 0);					//从设定文本的0开始
	lv_label_set_text_selection_end(label, 5);						//在设定文本的5结束
  
    /* 改变指定文本颜色 */
    lv_obj_set_style_text_color(label, lv_palette_main(LV_PALETTE_PURPLE), LV_PART_SELECTED);	//在设定的文本设置颜色
	lv_obj_set_style_bg_color(label, lv_color_hex(0xf5f5f5), LV_PART_SELECTED);					//在设定的文本设置背景色（如果执行此条指令，则在上一条指令执行文本改变颜色后其背景色为白色，与软件背景色有差异）
    
	lv_timer_t * timer1;
	timer1 = lv_timer_create(my_timer1, 100, label);				//创建timer1，100ms调用一次，同时获取label的内容    
}

static void my_timer1(lv_timer_t * timer)
{
    lv_obj_t *label = (lv_obj_t *)lv_timer_get_user_data(timer);\
        
    lv_label_set_text_fmt(label, "%d,%d%%", lv_rand(20, 30), lv_rand(70, 80));	//第一个参数在20-30间随机跳动 第二个参数在70-80间随机跳动
}

在这里插入图片描述

可以看见一开始设置的文本被定时器中设置的文本替代，并随机调动数值，内容得到刷新。

3、中文显示

3.1 介绍

LVGL 内置有⼀个可以显⽰某些中⽂字符的字库 CJK 字库 我们可以直接使⽤，这个字库在 lv_conf.h 中定义为： LV_FONT_SIMSUN_16_CJK （ \lvgl\src\font\lv_font_simsun_16_cjk.c ）。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

不难发现，打开宏定义后只能使用 LVGL 字库内的部分字体。

如果要在 lvgl 中使⽤显⽰⾃⼰的中⽂字库，我们需要⽤到两个东西：字体⽂件和字体转换器。

字体⽂件我们可以使⽤开源的字体或者⾃⼰制作出来，准备好了字体⽂件之后使⽤字体转换器即可转换成可以在 lvgl 上使⽤的字体格式。开源字体获取⻚⾯： https://lvgl.100ask.net/master/extra/fonts-zh-source.html

准备好字体⽂件之后就可以通过 lvgl 官⽅提供的字体转换器，提取转换你想要的字体， LVGL 官⽅在线字体转换器页面： https://lvgl.io/tools/fontconverter

3.2 如何使用字体转换器

  1. 为要输出字体命名。例如 “lv_font_source_han_sans_bold_20”
  2. 以 px 为单位指定⾼度（字体⼤⼩）
  3. 设置 bpp (bit-per-piel) 。值越⾼，字体越平滑（抗锯⻮）
  4. 选择 TTF 或 WOFF 格式字体⽂件
  5. 设置要包含在字体中的 Unicode 字符范围或在符号字段中列出字符
  6. 可以同时选择多个字体⽂件转换，并为其指定范围和 / 或符号。这些字符将被合并转换到同⼀个⽂件中
  7. 单击转换按钮以下载转换出来的 font_source_han_sans_bold_20.c ⽂件

Fallback 选项是备⽤字体，如果当前的字体⽆法找到字符时， lvgl 会尝试使⽤备选⽅案，如果备选⽅案中有⾃ ⼰的的备选⽅案，那么如果条件符合会继续使⽤备选⽅案，直到没有设置 fallback 为⽌。

⽂档阅读： https://lvgl.100ask.net/9.1/overview/font.html#use-font-fallback

3.3 如何在 LVGL 中使用生成的字体

  1. 将结果 C ⽂件复制到你的 LVGL 项⽬中，并包含到项⽬；

  2. 在你的项⽬应⽤程序的 C ⽂件中，将字体声明为：

    // 这样声明
extern lv_font_t my_font_name;
 // 或者这样声明
LV_FONT_DECLARE(my_font_name);

  3. 通过样式中设置字体：

    lv_style_set_text_font(&style_obj, &my_font_name);  // 普通(共享)样式
lv_obj_set_style_text_font(label, &my_font_name, 0);    // 私有(本地)样式

unicode 是统⼀所有语⾔的⼀套编码。

utf-8 是基于 unicode 编码的⼀种节约字节的编码。

3.4 详细操作

打开上面的官网 https://lvgl.100ask.net/master/extra/fonts-zh-source.html ，操作如下：

在这里插入图片描述

下载时可能会出现无法安全下载字体，可以选择保留即可正常下载：

在这里插入图片描述

下载完毕后会得到一个压缩包，将其放在我们的工程文件目录下即可：

在这里插入图片描述

此时我们已经将字体文件准备完毕，接着打开字体转换器网站 https://lvgl.io/tools/fontconverter 设置相关需求字体并提取：

在这里插入图片描述

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~

在这里插入图片描述

提交后可得到一个.c文件，将其放在工程文件目录下：

在这里插入图片描述

后面的操作就只需要在代码文件中做出相应修改即可正常显示我们所需要的字体：

static void my_event_cb(lv_event_t * e);
static void my_timer1(lv_timer_t * timer);

void lesson_3_1_1(void)
{
	lv_obj_t * label = lv_label_create(lv_screen_active()); 		//创建label控件 会默认显示text

	//lv_obj_set_style_text_font(label,  &lv_font_simsun_16_cjk, 0); 	
	lv_obj_set_style_text_font(label,  &lv_font_source_han_sans_bold_28, 0);

	lv_timer_t * timer1;
	timer1 = lv_timer_create(my_timer1, 100, label);				//创建timer1，100ms调用一次，同时获取label的内容
}

static void my_timer1(lv_timer_t * timer)
{
    lv_obj_t *label = (lv_obj_t *)lv_timer_get_user_data(timer);

    //lv_label_set_text(label, "80, 90%");
    lv_label_set_text_fmt(label, "温度:%d,湿度:%d%%", lv_rand(20, 30), lv_rand(70, 80));	//第一个参数在20-30间随机跳动 第二个参数在70-80间随机跳动
    //LV_LOG_USER("my_timer1 user_data: %d, idle: %d", *user_data, idle);
}

在这里插入图片描述

修改完相关配置就可以正常显示字体。

3.5 其他

  1. ⽤于提取指定字符的 Unicode 编码⼯具： https://unicode-table.com

  2. Unicode 范围： http://jrgraphix.net/research/unicode.php

  3. 像素完美字体（[等宽字体](等宽字体_百度百科 (baidu.com))）： [Terminus](terminus-font download | SourceForge.net)

  4. LVGL 内置字符列表（ lv_font_simsun_16_cjk.c ），使⽤的字体是 FontAwesome：

    61441,61448,61451,61452,61452,61453,61457,61459,61461,61465,
 61468,61473,61478,61479,61480,61502,61512,61515,61516,61517,
 61521,61522,61523,61524,61543,61544,61550,61552,61553,61556,
 61559,61560,61561,61563,61587,61589,61636,61637,61639,61671,
 61674,61683,61724,61732,61787,61931,62016,62017,62018,62019,
 62020,62087,62099,62212,62189,62810,63426,63650

  5. 要了解有关 LVGL 字体处理的更多信息，请阅读这个指南

  6. 要脱离 LVGL 使⽤字体引擎，可以从这⾥开始： lv_font.c/h 、lv_font_fmt_txt.c/h

转换器的离线版本可在 [GitHub](GitHub - lvgl/lv_font_conv: Converts TTF/WOFF fonts to compact bitmap format) 上[获取](GitHub - lvgl/lv_font_conv: Converts TTF/WOFF fonts to compact bitmap format)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2035235.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

研0 冲刺算法竞赛 day30 P1102 A-B 数对

研0 冲刺算法竞赛 day30 P1102 A-B 数对

P1102 A-B 数对 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路&#xff1a; ①map&#xff0c;键值对计数&#xff0c;将A-B->A-C ②先排序&#xff0c;找对应差值为C的第一个和最后一个计数 代码&#xff1a; #include<iostream> #include <map> #i…
阅读更多...
Typora绿色版

Typora绿色版

1、下载安装 Typora 官网地址&#xff1a;https://typora.io/ 中文站地址&#xff1a;Typora 2、击活 Typora 鼠标右击文件所在位置查询 resources\page-dist\static\js\LicenseIndex.180dd4c7.4da8909c.chunk.chunk.js e.hasActivated"true"e.hasActivated, 替…
阅读更多...
使用nvm切换Node.js版本

使用nvm切换Node.js版本

一、安装nvm nvm&#xff08;Node Version Manager&#xff09;是一个用于管理Node.js版本的工具&#xff0c;它允许你在同一台机器上安装和切换多个Node.js版本。 1.安装nvm https://github.com/coreybutler/nvm-windows 访问以上链接到github去下载 点击releases 下载下图…
阅读更多...
优化if-else的几种方式

优化if-else的几种方式

优化if-else的几种方式 策略模式1、创建支付策略接口2、书写不同的支付方式逻辑代码微信支付QQ支付 3、service层的实现类使用4、controller层的调用说明 枚举与策略模式结合1、创建枚举2、service层书写处理方法3、controller层调用4、说明 Lambda表达式与函数接口说明 策略模…
阅读更多...
用于理解视频的基础视觉编码器VideoPrism

用于理解视频的基础视觉编码器VideoPrism

人工智能咨询培训老师叶梓 转载标明出处 如何让机器有效地理解和处理视频内容&#xff0c;一直是计算机视觉领域的一个挑战。最近&#xff0c;Google Research的研究人员提出了一种名为VideoPrism的新型视频编码器&#xff0c;旨在通过单一的冻结模型处理多样化的视频理解任务。…
阅读更多...
风云崛起之拉氏变换和拉式逆变换

风云崛起之拉氏变换和拉式逆变换

图像的分割写出来了&#xff0c;但是写的不好&#xff0c;暂时先不发了。这两天小y想在把拉式变换的内容写出来&#xff0c;小y最近再看信号和电路&#xff0c;需要复习数学&#xff0c;所以把这点写出来。 首先要推出分布积分的公式&#xff0c;我们知道积分和微分为逆运算&am…
阅读更多...
纯css实现多行文本右下角最后一行展示全部按钮

纯css实现多行文本右下角最后一行展示全部按钮

未展开全部&#xff1a; 展开全部&#xff1a; 综上演示按钮始终保持在最下方 css代码如下&#xff1a; <div class"info-content"><div class"info-text" :class"!showAll ? mle-hidden : "><span class"show-all"…
阅读更多...
STM32-定时器-定时器中断-PWM调光

STM32-定时器-定时器中断-PWM调光

1、TIM 定时器 定时器是一种电子设备或软件组件&#xff0c;用于在预定时间后触发一个事件或操作。它可以基于时钟信号或其他周期性信号来工作&#xff0c;并且可以用来测量时间间隔、生成延时、触发中断等。 时钟信号 时钟信号是一种周期性的电信号&#xff0c;用于同步电路中…
阅读更多...
如何检查端口占用：netstat和lsof指令

如何检查端口占用：netstat和lsof指令

在网络故障排查和系统管理中&#xff0c;检查端口占用情况是一项常见且重要的任务。本文将详细介绍如何使用 netstat 和 lsof 这两个强大的工具来检查端口占用和相关服务。 1. 使用 netstat 查看端口占用 netstat (network statistics) 是一个用于显示网络连接、路由表、接口…
阅读更多...
Flutter 学习 一部分注意点记录

Flutter 学习 一部分注意点记录

使用AndroidStudio进行开发 假设你已经配置好Flutter和dart的SDK. 创建一个可执行dart文件 如果需要直接新建一个dart文件来运行&#xff0c;可以点击 File->New->New Flutter Project &#xff0c;下面是接下来弹出的新建项目弹窗&#xff0c;选中左边的Dart&#xff…
阅读更多...
SpringBoot 整合 RabbitMQ 实现延迟消息

SpringBoot 整合 RabbitMQ 实现延迟消息

一、业务场景说明 用于解决用户下单以后&#xff0c;订单超时如何取消订单的问题。 用户进行下单操作&#xff08;会有锁定商品库存、使用优惠券、积分一系列的操作&#xff09;&#xff1b;生成订单&#xff0c;获取订单的id&#xff1b;获取到设置的订单超时时间&#xff0…
阅读更多...
python语言day5 MD5 json

python语言day5 MD5 json

md5&#xff1a; python提供了内置的md5加密功能&#xff0c;使用md5模拟一个小项目&#xff1a; 注册&#xff1a; 启动py程序&#xff0c;在控制台界面提示用户输入用户名及密码&#xff1b; 使用md5加密 密码&#xff1b; 创建txt文件记录输入的用户名 和密文。 登录&…
阅读更多...
访问网站显示不安全打不开怎么办如何处理

访问网站显示不安全打不开怎么办如何处理

当访问网站时浏览器提示“不安全”&#xff0c;这通常是由于多种原因造成的。下面是一些常见的原因及其解决办法&#xff1a; 未启用HTTPS协议 如果网站仅使用HTTP协议&#xff0c;数据传输没有加密&#xff0c;会被浏览器标记为“不安全”。解决办法是启用HTTPS协议&#xff…
阅读更多...
vue3-02-vue3中的组件通信

vue3-02-vue3中的组件通信

目录 组件通信一、vue3组件通信和vue2的区别二、父子通信2.1 props通信1&#xff09;父→子传递数据&#xff08;父组件向子组件传递数据&#xff09;2&#xff09;子→父传递数据 2.2 v-model1&#xff09;v-model的本质2&#xff09;给modelValue起别名3&#xff09;$event 2…
阅读更多...
【资源】wordpress 子比主题

【资源】wordpress 子比主题

简介 子比主题是一款功能强大的WordPress主题模板&#xff0c;支持社区论坛、商城、支付、古腾堡编辑器等多种功能。很多资源类网站都是基于此搭建的。搭建后的效果基本上和官网一致&#xff0c;可查看官网的演示效果。 官方网站&#xff1a;https://www.zibll.com/ 如要获取…
阅读更多...
精酿啤酒的酿造过程 你喝的不仅仅是酒

精酿啤酒的酿造过程 你喝的不仅仅是酒

大家下午好呀&#xff01;今天我要带大家一起探索精酿啤酒的神秘世界&#xff01;&#x1f31f;&#x1f31f; 第一步&#xff1a;原料准备 精酿啤酒的四大原料&#xff1a;麦芽、啤酒花、水和酵母。 别小看这些原料&#xff0c;它们的品质直接决定了啤酒的风味。&#x1f33e;…
阅读更多...
网络协议七 应用层 HTTP 协议

网络协议七 应用层 HTTP 协议

应用层常见的协议 HTTP协议 一. 如何查看我们的http 协议全部的内容有哪些呢&#xff1f; 一种合理的方法是 通过 wireshark 软件&#xff0c;找到想要查看的HTTP --->追踪流--->HTTP流 来查看 结果如下&#xff1a;红色部分 为 发送给服务器的&#xff0c;蓝色部分为服…
阅读更多...
【Qt开发】QtCharts图表——在ui上添加QChartView控件并进行绘图配置

【Qt开发】QtCharts图表——在ui上添加QChartView控件并进行绘图配置

【Qt开发】QtCharts图表——在ui上添加QChartView控件并进行绘图配置 文章目录 控件安装和模块导入在ui上添加QChartView控件QChartView图表配置附录&#xff1a;C语言到C的入门知识点&#xff08;主要适用于C语言精通到Qt的C开发入门&#xff09;C语言与C的不同C中写C语言代码…
阅读更多...
Stable Diffusion 必备插件推荐，菜鸟轻松成高手！

Stable Diffusion 必备插件推荐，菜鸟轻松成高手！

前言 一个刚学AI绘画的小菜鸟如何快速成为Stable Diffusion高手&#xff1f;答案就是SD插件。 只要学会使用SD的各种插件&#xff0c;帮你写正向和负向提示词&#xff0c;修复人脸/身体/手指&#xff0c;高清放大图片&#xff0c;指定人物pose&#xff0c;图片微调等等都可以…
阅读更多...
YOLO系列算法解析

YOLO系列算法解析

一、深度学习算法概述 1、不同阶段算法优缺点分析 One-stage: 优点&#xff1a;速度非常快&#xff0c;适合做实时监测任务 缺点&#xff1a;效果通常不好 2、yolo评价指标 yolo评价指标&#xff1a;map和fps Map指标&#xff1a;综合衡量检测效果 精度&#xff1a;识别准确率…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023