LVGL（lv_span富文本控件）

---

lv_span 是 LVGL（Light and Versatile Graphics Library）中的一种富文本布局控件，用于在一个区域内灵活地显示带有不同样式、颜色、字体的多段文本。它类似于网页中的 <span> 标签，能够实现文本段落的组合排版。

---

一、lv_span 结构体系概览

在 LVGL 中，lv_span 并不是一个独立的 Widget，它是依附在 lv_span_group 控件中的，每一个 lv_span_group 是一个容器，包含多个 lv_span_t 实例（文本片段），每个 lv_span_t 可以具有独立的文本内容和样式。

关键词定义：

• lv_span_group_t：富文本控件容器（widget）
• lv_span_t：富文本中的一个“段落”（类似 HTML 的 <span>）
• lv_style_t：样式对象，可以为每个 span 设置字体、颜色、加粗、倾斜等属性

---

二、使用步骤

1. 创建 lv_span_group 控件

lv_obj_t *span_group = lv_span_group_create(lv_scr_act());
lv_obj_set_width(span_group, 200);
lv_obj_center(span_group);

lv_span_group_create() 创建一个富文本控件，可以设置宽度、对齐方式等。

---

2. 添加一个或多个 lv_span_t

lv_span_t * span1 = lv_span_new(span_group);
lv_span_t * span2 = lv_span_new(span_group);

每个 span 实例都可以定义不同的文本和样式。

---

3. 设置文本和样式

static lv_style_t style_red;
lv_style_init(&style_red);
lv_style_set_text_color(&style_red, lv_color_hex(0xFF0000));
lv_style_set_text_decor(&style_red, LV_TEXT_DECOR_UNDERLINE);span1->txt = "红色下划线文字 ";
span1->style = &style_red;span2->txt = "默认样式文字";
span2->style = NULL;

注意：

• txt 赋值的是 const char *，不能是局部变量字符串
• style 可以为 NULL，代表使用默认样式

---

4. 调用刷新方法使其显示生效

lv_span_group_refr_mode(span_group);

或者在 LVGL v9 中直接调用 lv_obj_invalidate() 也能触发重绘。

---

三、进阶功能与注意事项

✅ 多种样式混合显示

每个 span 都可以拥有独立样式，因此你可以实现多颜色、字体、粗体、斜体等混排效果。

✅ 文本自动换行

lv_span_group 支持根据设置宽度自动换行，适合用来制作富文本提示框、通知面板、帮助信息等。

⚠️ 注意内存管理

所有 txt 字符串应为静态或全局字符串，或者确保生命周期长于 span。不可以使用函数内部临时变量的指针，否则可能导致崩溃。

---

四、示例代码（完整）

void demo_lv_span(void)
{static lv_style_t style_red;lv_style_init(&style_red);lv_style_set_text_color(&style_red, lv_palette_main(LV_PALETTE_RED));lv_style_set_text_decor(&style_red, LV_TEXT_DECOR_UNDERLINE);static lv_style_t style_blue;lv_style_init(&style_blue);lv_style_set_text_color(&style_blue, lv_palette_main(LV_PALETTE_BLUE));lv_style_set_text_font(&style_blue, &lv_font_montserrat_20);lv_obj_t * span_group = lv_span_group_create(lv_scr_act());lv_obj_set_width(span_group, 250);lv_obj_center(span_group);lv_span_t * span1 = lv_span_new(span_group);span1->txt = "这是红色下划线文本，";span1->style = &style_red;lv_span_t * span2 = lv_span_new(span_group);span2->txt = "这是蓝色大号字体文本。";span2->style = &style_blue;lv_span_group_refr_mode(span_group);
}

---

五、典型应用场景

• 富文本消息框（提示信息、警告）
• 标签信息多样化（比如“状态：正常/警告/错误”等）
• 简单的 markdown/富文本渲染器
• 高亮搜索结果中匹配的关键词

---

总结

lv_span 提供了一种在 LVGL 中实现文本混排的轻量级方式，它以灵活的样式控制为特点，适用于嵌入式设备中对显示能力有一定要求的文本界面。通过 lv_span_group + lv_span_t + style 的组合，你可以轻松实现 HTML 样式中类似 <span style="..."> 的效果，提升界面表达力。

如果你在项目中有文本高亮、强调关键词、多样式提示等需求，lv_span 是一个非常实用的解决方案。需要注意的是，它主要适用于行级排版，而不是复杂的段落样式或交互富文本编辑。