lvgl 中让文本居中显示

LVGL 是一个灵活强大的图形库，多用于嵌入式系统。其中，文本标签（label）是我们比较常用的一个组件，UI 一般会使用文本居中的设计，但我在实践中发现，LVGL 并没有使文本居中的接口供调用，这里就分享一种使 label 的文本居中的方式。

1 先看一段 label 相关的代码

const char* content = "this is for test";
// 在 root 上创建一个文本标签，并居中显示
lv_obj_t* label = lv_label_create(root);
lv_obj_center(label);
// 这里将边框显示出来，方便我们观察文字的位置
lv_obj_set_style_border_width(label, 2, 0);
lv_obj_set_style_border_color(label, lv_color_black(), 0);
// 红色文字，使用默认字体
lv_obj_set_style_text_color(label, lv_color_hex(0xFF0000), 0);
// label 的 size 设置的偏大，方便观察文字在其中的相对位置
lv_obj_set_size(label, 200, 50);
lv_label_set_text(label, content);

上面这段代码跑出来是什么样的呢？如下图，因为 label 的高度（50）是远大于文本的高度的，文本的默认对齐位置是左上角，所以就呈现了图中的效果。

我找了一会，发现有个函数叫 lv_obj_set_style_text_align()，看起来像是设置文字对齐方式的，让我们先试一下。

// 前面代码不变，省略了
lv_obj_set_style_text_align(label, LV_ALIGN_CENTER, 0);
lv_obj_set_size(label, 200, 50);
lv_label_set_text(label, content);

现在是什么样的效果呢？一点变化也没有，不用怀疑，我确实重新跑了一次代码，这也是新的结果。

2 如何让 label 中的文字居中呢？

其实也很简单，我们使用 pad 来调节文字的位置即可。如图所示，一个 label 的文本其实在中间，四边都是有 pad 存在的，我们可以控制 pad 的高(宽)度，来间接控制文本内容在 label 中的相对位置。

代码如下

// 前面代码不变，省略了
lv_obj_set_size(label, 200, 50);
lv_label_set_text(label, content);
auto fontHeight = lv_font_get_line_height(LV_FONT_DEFAULT);
auto verPad = (50 - fontHeight)/2;
lv_obj_set_style_pad_top(label, verPpad, 0);
auto textWidth = lv_txt_get_width(content, strlen(content), LV_FONT_DEFAULT, 0);
auto horPad = (200 - textWidth)/2;
lv_obj_set_style_pad_left(label, horPad, 0);

我们通过 lv_font_get_line_height 来计算出文本的实际高度，进而计算出上下 pad 的高度，水平方向也是同理。效果图如下，文本已经居中了。

实际上，竖直方向的居中用的比较多，水平方向一般不用管，我们通常会在该方向使用自适应宽度，文本自然就会在中间了。

3 总结

让 label 的文本居中其实比较简单，掌握了 label 组件的布局就容易理解，可以使用 pad 来间接控制文本的位置。