关于前端: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 来间接管制文本的地位。