引言
本文的讲解顺序:
1、标签的基本概念。
2、实用性的案例。
3、官方的examples、demo。
基本概念
代码示例:
void my_gui(void)
{
lv_obj_t * label = lv_label_create(lv_scr_act());
lv_label_set_text(label, "lable test!");
lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);
lv_obj_center(label);
}
显示效果:
修改字体大小、颜色、背景
Todo: 也可以自定义样式lv_style_t进行加载。
代码示例:
void my_gui(void)
{
lv_obj_t * label = lv_label_create(lv_scr_act());
lv_label_set_text(label, "lable test!");
lv_obj_set_style_text_font(label, &lv_font_montserrat_48, LV_PART_MAIN);
lv_obj_set_style_bg_color(label, lv_color_black(), LV_PART_MAIN);
lv_obj_set_style_text_color(label, lv_palette_main(LV_PALETTE_BLUE), 0);
lv_obj_set_style_bg_opa(label, LV_OPA_COVER, LV_PART_MAIN);
lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);
}
显示效果:
显示汉字
代码示例:
Todo: 添加font_cn_test生成方法。
void my_gui(void)
{
static lv_style_t style_font1;
lv_style_init(&style_font1);
lv_style_set_text_font(&style_font1, &lv_font_montserrat_48);
lv_style_set_text_color(&style_font1, lv_palette_main(LV_PALETTE_BLUE));
lv_obj_t * label1 = lv_label_create(lv_scr_act());
lv_label_set_text(label1, "lable test!");
lv_obj_add_style(label1, &style_font1, LV_STATE_DEFAULT);
lv_obj_align(label1, LV_ALIGN_TOP_MID, 0, 0);
static lv_style_t style_font2;
lv_style_init(&style_font2);
lv_style_set_text_font(&style_font2, &font_cn_test);
lv_style_set_text_color(&style_font2, lv_palette_main(LV_PALETTE_GREEN));
lv_obj_t * label2 = lv_label_create(lv_scr_act());
lv_label_set_text_fmt(label2, "%s", "Hello, My name is:张暮笛!");
lv_obj_align(label2, LV_ALIGN_CENTER, 0, 0);
lv_obj_add_style(label2, &style_font2, LV_STATE_DEFAULT);
}
显示效果:
lv_example_label_1.c
路径:lvgl\examples\widgets\label\lv_example_label_1.c
参考文献
[1] LVGl_Projectsauron的博客
[2] ESP32基础应用之lvgl显示中文
[4] lvgl如何显示中文
[5] Font Converter — LVGL
[6] VS2019中使用LVGL显示中文
[7] LVGL documentation(中文)
[8] LVGL documentation(英文)