LVGL 入门(八):标签控件 lv_label

目录


一、前言

我是 Hello_Embed

在上一篇笔记中,我们学习了 LVGL 定时器的使用,掌握了定时任务、动态刷新的核心方法。而在嵌入式 GUI 开发中,文本显示 是最基础、最常用的功能,LVGL 的标签控件lv_label就是专门用于展示文字、图标的核心控件。本篇将全面讲解标签控件的组成结构、文本设置、超长处理、图标显示、实时刷新等全功能用法,帮你熟练掌握这个 LVGL 最基础的显示控件。


二、标签控件基础组成

标签是用来显示文本的控件。

在盒子模型中,标签由以下部分组成:

  • LV_PART_MAIN:矩形部分(盒子区域),填充值可用于在文本和背景之间添加空间。
  • LV_PART_SCROLLBAR:当展示文本大于部件大小时,显示的滚动条部分。
  • LV_PART_SELECTED:选中文本时突出显示的部分,仅支持text_colorbg_color样式属性。

创建标签

c 复制代码
lv_obj_t * label = lv_label_create(parent);

三、标签的核心操作 <a id="label-func")

创建标签部件后可设置显示文本,未设置时默认显示text

文本设置方式

  • 直接设置文本:lv_label_set_text(label, "New text");
  • 格式化文本:lv_label_set_text_fmt(label, "%s: %d", "Value", 15);
  • 静态文本(不动态分配内存):lv_label_set_text_static(label, "New text");

文本换行

使用\n即可实现换行:

c 复制代码
lv_label_set_text(label, " line1\nline2\n\nline4 ");

改变字体大小

改变字号即切换字体类型,不同字号对应独立字体,需消耗对应资源,设置方式:

c 复制代码
lv_obj_set_style_text_font();
lv_style_set_text_font();

四、文本超长处理模式

默认文本宽高与标签一致,若文本尺寸小于标签,可通过以下模式调整:

  • LV_LABEL_LONG_WRAP:自动换行,高度自适应(默认)
  • LV_LABEL_LONG_DOT:文本过长时末尾显示省略号
  • LV_LABEL_LONG_SCROLL:文本超长时来回滚动
  • LV_LABEL_LONG_SCROLL_CIRCULAR:文本超长时循环滚动
  • LV_LABEL_LONG_CLIP:直接裁剪超出部分的文本

设置模式:

c 复制代码
lv_label_set_long_mode(label, LV_LABEL_LONG_...);

补充:LV_LABEL_LONG_DOT会直接操作文本缓冲区,lv_label_set_text_static传入的缓冲区必须可写;lv_label_set_text会内部复制文本,无闪退风险。


五、文本选择与超长文本处理

文本选择

lv_conf.h中开启LV_LABEL_TEXT_SELECTION,即可使用文本选择功能,手动指定选中范围:

c 复制代码
lv_label_get_text_selection_start(label, start_char_index);
lv_label_get_text_selection_start(label, end_char_index);

超长文本处理

文本长度超过 40k 字符时,在lv_conf.h中开启LV_LABEL_LONG_TXT_HINT,可高效处理超长文本。


六、自定义滚动与图标显示

自定义滚动动画

滚动模式(LV_LABEL_LONG_SCROLL/CIRCULAR)下,通过样式设置动画属性:

c 复制代码
lv_style_set_anim();

显示 LVGL 内置图标字体

LVGL 内置图标字体可通过标签直接显示,支持单独显示、组合显示:

!\[Pasted image 20260315163349.png]

c 复制代码
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); // 多图标

七、标签事件与文本色彩

点击事件

标签默认不接收输入事件,开启可点击标记:

c 复制代码
lv_obj_add_flag(label, LV_OBJ_FLAG_CLICKABLE);

文本色彩设置

c 复制代码
/* RGB颜色设置 */
lv_color_t c = lv_color_make(red, green, blue);
lv_color_t c = LV_COLOR_MAKE(red, green, blue);
/* 十六进制颜色 */
lv_color_t c = lv_color_hex(0x123456);
lv_color_t c = lv_color_hex3(0x123);

八、实战代码示例

c 复制代码
void lesson_3_1_1(void)
{
    //char * label_str = "100askkkkkk""11111111""222222222";
    //static char label_str[] = "www.100ask.net\n100ask\n100ask\n100ask";
    lv_obj_t * label = lv_label_create(lv_screen_active());
    //lv_obj_set_size(label, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    //lv_obj_set_size(label, 20, LV_SIZE_CONTENT);
    //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_long_mode(label, LV_LABEL_LONG_DOT);

    //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, label_str);
    //lv_label_set_text(label, "100askkkkkk""11111111""222222222");
    // lv_label_set_text(label, "100askkkkkk"LV_SYMBOL_WIFI LV_SYMBOL_BACKSPACE LV_SYMBOL_BATTERY_FULL);
    //lv_obj_set_style_text_font(label,  &lv_font_montserrat_40, 0);
    //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_obj_set_style_text_color(label, lv_color_hex(0xf1645a), 0);
    //lv_label_set_text_fmt(label, "%s%d%s%s", "www.", 100, "ask", ".net");
    //lv_label_set_text_static(label, label_str);

    //lv_label_set_text_selection_start(label, 4);
    //lv_label_set_text_selection_end(label, 10);
    //lv_obj_set_style_text_color(label, lv_color_hex(0xe84134), LV_PART_SELECTED);
    //lv_obj_set_style_bg_color(label, lv_color_hex(0xf5f5f5), LV_PART_SELECTED);

    //lv_obj_set_style_text_align(label, LV_TEXT_ALIGN_LEFT, 0);

    //lv_timer_t * timer1;

    /* 创建第一个timer */
    //timer1 = lv_timer_create(my_timer1, 100, label);
}

九、实时刷新标签内容

温湿度等动态数据需实时刷新,结合定时器实现:

c 复制代码
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));
    //LV_LOG_USER("my_timer1 user_data: %d, idle: %d", *user_data, idle);
}

十、工程添加补充

补充:添加自定义工程步骤

  1. 新建文件夹,参考路径:part1\02_codes\lv_sim_codeblocks_win\lv_100ask_lesson_demos\src
  2. 创建对应的.c.h文件
  3. lv_100ask_lesson_demos_conf_template.h创建对应宏并设为 1
  4. lv_100ask_lesson_demos.h内添加头文件
  5. 将文件夹添加进 CodeBlocks 编译即可

十一、总结

  1. lv_label是 LVGL 核心文本控件,支持多部件样式与多种文本设置方式;
  2. 内置 5 种文本超长处理模式,适配不同显示场景;
  3. 支持图标显示、文本选择、点击事件,功能全面;
  4. 结合定时器可实现文本实时刷新,满足动态数据展示需求。

十二、结尾

标签控件是 LVGL 界面开发的基础组件,掌握文本设置、样式修改、动态刷新等用法,就能完成绝大多数文本展示需求。我是 Hello_Embed,持续分享 LVGL 控件实战技巧,期待你的关注!

相关推荐
To_OC7 小时前
别再串行写 await 了,Promise.all 才是并行请求的正确打开方式
前端·javascript·promise
vipbic7 小时前
中后台越做越乱后,我用插件化把它救回来了
前端·vue.js
Hyyy7 小时前
Computer Use 适合做什么,不适合做什么——一次真实使用后的思考
前端
小和尚同志8 小时前
前端 AI 单元测试思考与落地
前端·人工智能·aigc
invicinble9 小时前
c端系统,其实更像一个信息展示平台
前端
李姆斯10 小时前
管理是否可以被完全量化
前端·产品经理·团队管理
疯狂打码的少年10 小时前
【软件工程】软件开发模型:增量模型与迭代模型
笔记·软件工程
Generalzy10 小时前
从本地 Demo 到生产级检索:Milvus 学习笔记(3)
笔记·学习·milvus
名字还没想好☜10 小时前
Next.js 中间件实战:鉴权、重定向与 A/B 分流
开发语言·前端·javascript·中间件·react·next.js
ACP广源盛1392462567310 小时前
IX8024 PCIe4.0 交换芯片@ACP# RK3588:嵌入式 AI PC 标准化扩展方案
大数据·人工智能·分布式·单片机·嵌入式硬件