LVGL笔记:深入理解标签部件(lv_label)

基础使用方法:

最基础的用法只需要两行代码,分别创建和配置即可: 

lv_obj_t* label = lv_label_create(lv_scr_act());
lv_label_set_text(label, "label");

配置字体背景颜色:

配置字体背景色使用 lv_obj_set_style_bg_color() 即可,但要顺便使用 lv_obj_set_style_bg_opa() 配置透明度,因为默认透明度是100%,这样将不会显示背景色。

lv_obj_t* label = lv_label_create(lv_scr_act());
lv_label_set_text(label, "label");
lv_obj_set_style_bg_color(label, lv_color_hex(0xff00000), LV_STATE_DEFAULT);
lv_obj_set_style_bg_opa(label, 100, LV_STATE_DEFAULT);

 

配置字体颜色:

lv_obj_set_style_text_color() 可以配置文字颜色。

lv_obj_t* label = lv_label_create(lv_scr_act());
lv_label_set_text(label, "label");
lv_obj_set_style_text_color(label, lv_color_hex(0xdf5345), LV_STATE_DEFAULT);

配置部分字体颜色:

lv_label_set_recolor() 函数可以开启部分设置字体功能,在设置字体中设置  #ff0000 lvgl# 即可配置部分字体颜色。

lv_obj_t* label = lv_label_create(lv_scr_act());
lv_label_set_recolor(label, true);
lv_label_set_text(label, "label #ff0000 lvgl#");

配置字体大小:

使用 lv_obj_set_style_text_font() 可以配置字体大小。

lv_obj_t* label = lv_label_create(lv_scr_act());
lv_label_set_text(label, "label");
lv_obj_set_style_text_font(label, &lv_font_montserrat_48, LV_STATE_DEFAULT);

 

当文本超过部件大小:

在这里,使用 lv_obj_set_size() 将宽高设置为 100,50。很显然是不足够显示下面这行文本的。

使用 lv_label_set_long_mode() 可以配置文本超过部件大小模式。

lv_obj_t* label = lv_label_create(lv_scr_act());
lv_obj_set_size(label, 100, 50);
lv_label_set_text(label, "THE UNANIMOUS DECLARATION OF THE THIRTEEN UNITED STATES OF AMERICA");
lv_label_set_long_mode(label, LV_LABEL_LONG_SCROLL);

共有以下配置可以选择: 

综合案例: 

/* 获取当前活动屏幕的宽高 */
#define scr_act_width() lv_obj_get_width(lv_scr_act())
#define scr_act_height() lv_obj_get_height(lv_scr_act())

static const lv_font_t *font;


    lv_obj_t* label = lv_label_create(lv_scr_act());                                /* 定义并创建标签 */
    lv_label_set_text_fmt(label, "Label can set text like %s", "printf");           /* 设置标签文本 */
    lv_obj_set_width(label, scr_act_width() / 3);                                   /* 设置标签宽度 */
    lv_obj_align(label, LV_ALIGN_CENTER, scr_act_width() / 3, 0);                   /* 设置标签位置 */
    lv_obj_set_style_text_align(label, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN);         /* 设置标签文本对齐方式 */

    lv_obj_t* label_shadow = lv_label_create(lv_scr_act());                         /* 定义并创建阴影标签 */
    lv_label_set_text(label_shadow, lv_label_get_text(label));                      /* 设置标签文本 */
    lv_obj_set_width(label_shadow, scr_act_width() / 3);                            /* 设置标签宽度 */
    lv_obj_set_style_text_opa(label_shadow, LV_OPA_30, LV_PART_MAIN);               /* 设置标签文本透明度 */
    lv_obj_set_style_text_color(label_shadow, lv_color_black(), LV_PART_MAIN);      /* 设置标签文本颜色 */
    lv_obj_set_style_text_align(label_shadow, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN);  /* 设置标签文本对齐方式 */
    lv_obj_align_to(label_shadow, label, LV_ALIGN_TOP_LEFT, 3, 3);                  /* 设置标签位置 */

物联沃分享整理
物联沃-IOTWORD物联网 » LVGL笔记:深入理解标签部件(lv_label)

发表评论