lvgl-标签学习篇(四)

lvgl-标签篇(四)

学习材料/工具

• QT Creator 5.12.3

• lvgl 源代码

• lvgl - 官方标签例程

• 极客笔记

学习内容/过程

• 零件和样式

• 用法

  • 设定文字
  • 越线
  • 长模式
  • 文字对齐
  • 文字重新着色
  • 很长的文字
  • 符号
  • 自定义动画属性

• 事件

• 按键

• 范例

  • 给标签重新着色和滚动

  • 文字阴影

  • 标签对齐

简介

标签(lv_label) 是用于显示文本的基本对象类型。

零件和样式

标签只有一个主要部分，称为LV_LABEL_PART_MAIN。它使用所有典型的背景属性和文本属性。填充值可用于使文本的区域在相关方向上变小。

• LV_PART_SCROLLBAR：当文本大于widget时，就显示滚动条

• LV_PART_SELECTED：告诉选定文本的风格。只有text_color和bg_color样式属性可以使用。

用法

1. 设定文字

可以在运行时使用lv_label_set_text(label,“New text”)在标签上设置文本。它将动态分配一个缓冲区，并将提供的字符串复制到该缓冲区中。因此，在该函数返回后，无需将传递给lv_label_set_text的文本保留在范围内。

使用lv_label_set_text_fmt(label,“value：%d”,15)，可以使用printf格式设置文本。

标签能够显示来自0终止的静态字符缓冲区的文本。为此，请使用lv_label_set_static_text(label, “text”)。在这种 模式下，文本不会存储在动态内存中，而是直接使用给定的缓冲区。这意味着数组不能是在函数推出时超出范围的局部变量。常数字符串可以安全地与lv_label_set_static_text一起使用(除非与LV_LABEL_LONG_DOT一起使用，因为它可以就地修改缓冲区)，因为它们存储在ROM存储器中，该存储器始终可以访问。

也可以使用原始数组作为标签文本。数组不必以\0终止。在这种情况下，文本将于lv_label_set_text一样保存到动态存储器中。要设置原始字符数组，请使用lv_label_set_array_text(label,char_array,size)函数。

2. 越线

换行符由标签对象自动处理。可以使用\n换行。例如：“line1\nline2\n\nline3”

3. 长模式

默认情况下，标签对象的宽度会自动扩展为文本大小。否则，可以根据几种长模式策略来操纵文本：

• LV_LABEL_LONG_EXPAND - 将对象大小扩展为文本大小(默认)

• LV_LABEL_LONG_BREAK - 保持对象宽度，断开(换行)过长的线条并扩大对象高度

• LV_LABEL_LONG_DOT - 保持对象大小，打断文本并在最后一行写点(使用lv_label_set_static_text时不支持)

• LV_LABEL_LONG_SROLL - 保持大小并来回滚动标签

• LV_LABEL_LONG_SROLL_CIRC - 保持大小并循环滚动标签

• LV_LABEL_LONG_CROP - 保持大小并裁剪文本

可以使用lv_label_set_long_mode(label, LV_LABEL_LONG_…)指定长模式

重要的是要注意，当创建标签并设置其文本时，标签的大小已扩展为文本大小。除了默认的LV_LABEL_LONG_EXPAND，长模式lv_obj_set_width/height/size()无效。

因此，需要更改长模式，首先设置新的长模式，然后使用lv_obj_set_width/height/size()设置大小。

另一个重要的注意事项是LV_LABEL_LONG_DOT在原地操纵文本缓冲区，以便添加/删除点。当使用lv_label_set_text或lv_label_set_array_text时，将分配一个单独的缓冲区，并且该实现细节不会被注意。lv_label_set_static_text并非如此！如果打算使用LV_LABEL_LONG_DOT，则传递给lv_label_set_static_text的缓冲区必须可写。

4. 文字对齐

文本的行可以使用lv_label_set_align(label,LV_LABEL_ALIGN_LEFT/RIGHT/CENTER)左右对齐。请注意，它将仅对齐线，而不对齐标签对象本身。

标签本身不支持垂直对齐；应该将标签放在更大的容器中，然后将整个标签对象对齐。

5. 文本重新着色

在文本中，可以使用命令来重新着色部分文本。例如：“Write a #ff0000 red# word”。可以通过lv_label_set_recolor()函数分别为每个标签启用此功能。

请注意，重新着色只能在一行中进行。因此，\n不应在重新着色的文本中使用，或者用LV_LABEL_LONG_BREAK换行，否则，新行中的文本将不会重新着色。

6. 很长的文字

lvgl 通过保存一些额外的数据(~12个字节)来加快绘图速度，可以有效地处理很长的字符(>40k字符)。要启用此功能，请在lv_conf.h中设置LV_LABEL_LONG_TXT_HINT 1

7. 符号

标签可以在字母旁边显示符号(或单独显示)。阅读字体(font)部分以了解有关符号的更多信息。

8. 自定义动画属性

通过使用lv_style_set_anim()设置样式的动画属性，可以定制长模式中LV_LABEL_LONG_SROLL和LV_LABEL_LONG_SCROLL_CIRCULAR滚动动画和某些方面。目前，只有循环滚动动画的开始和重复延迟可以自定义。如果你需要自定义滚动动画的另一个方面，请随意在Github上打开一个问题来请求该功能。

事件

仅通用事件是按对象类型发送的。

了解有关事件的更多内容。

按键

对象类型不处理任何键。

了解有关按键的更多内容。

范例

1. 给标签自动换行、重新着色和滚动

/**
 * @brief vReColorWrap_Init
 */
static void prvReColorWrap_Init(void)
{
//    创建标签容器对象
    lv_obj_t *prvLblReColor = lv_label_create(lv_scr_act());

//    设置标签长模式
    lv_label_set_long_mode(prvLblReColor,LV_LABEL_LONG_WRAP);

//    设置标签文字重新着色
    lv_label_set_recolor(prvLblReColor,true);

//    设置标签文字文本
    lv_label_set_text(prvLblReColor,"#0000ff Re-color# #ff00ff words# #ff0000 of a# label, align the lines to the center "
                                        "and wrap long text automatically.");

//    设置标签的宽度
    lv_obj_set_width(prvLblReColor,150);

//    设置标签文本对齐方式
    lv_obj_set_style_text_align(prvLblReColor,LV_TEXT_ALIGN_CENTER,0);

//    设置标签屏幕居中显示
    lv_obj_align(prvLblReColor,LV_ALIGN_CENTER,0,-40);

    lv_obj_t *prvLblWrap = lv_label_create(lv_scr_act());

//    设置标签长模式为循环滚动模式
    lv_label_set_long_mode(prvLblWrap,LV_LABEL_LONG_SCROLL_CIRCULAR);

    lv_obj_set_width(prvLblWrap,150);

    lv_label_set_text(prvLblWrap,"It is a circularly scrolling text. ");

    lv_obj_align(prvLblWrap, LV_ALIGN_CENTER, 0,40);

}

2. 文本阴影

/**
 * @brief prvTextShadow
 */
static void prvTextShadow(void)
{
//    Create a style for the shadow
//    创建一个阴影样式
    static lv_style_t prvStyleShadow;
    lv_style_init(&prvStyleShadow);

//    设置样式透明度为30%
    lv_style_set_text_opa(&prvStyleShadow, LV_OPA_30);

//    设置样式文本的颜色
    lv_style_set_text_color(&prvStyleShadow, lv_color_black());

    lv_obj_t *prvLblShadow = lv_label_create(lv_scr_act());

//    prvLblShadow标签添加样式
    lv_obj_add_style(prvLblShadow,&prvStyleShadow,0);

    lv_obj_t *prvMainLbl = lv_label_create(lv_scr_act());

    lv_label_set_text(prvMainLbl,"A simple method to create\n"
                                 "shadows on a text.\n"
                                 "It even works with\n\n"
                                 "newlines     and spaces.");

    lv_label_set_text(prvLblShadow, lv_label_get_text(prvMainLbl));

    lv_obj_align(prvMainLbl, LV_ALIGN_CENTER,0,0);

    lv_obj_align_to(prvLblShadow, prvMainLbl,LV_ALIGN_TOP_LEFT,2,2);

}

3. 显示文本语言

/**
 * @brief prvTextLanguage
 */
static void prvTextLanguage(void)
{
    lv_obj_t *prvLblTextLangauge_ltr = lv_label_create(lv_scr_act());

    lv_label_set_text(prvLblTextLangauge_ltr,  "In modern terminology, a microcontroller is similar to a system on a chip (SoC).");

    lv_obj_set_style_text_font(prvLblTextLangauge_ltr, &lv_font_montserrat_16,0);

    lv_obj_set_width(prvLblTextLangauge_ltr, 310);

    lv_obj_align(prvLblTextLangauge_ltr,LV_ALIGN_CENTER,5,5);

    lv_obj_t *prvLblTextLangauge_rtl = lv_label_create(lv_scr_act());

    lv_label_set_text(prvLblTextLangauge_rtl, "מעבד, או בשמו המלא יחידת עיבוד מרכזית (באנגלית: CPU - Central Processing Unit).");

    lv_obj_set_style_base_dir(prvLblTextLangauge_rtl,LV_BASE_DIR_RTL,0);

//    设置文本字库
    lv_obj_set_style_text_font(prvLblTextLangauge_rtl,&lv_font_montserrat_16,0);

    lv_obj_set_width(prvLblTextLangauge_rtl,310);

    lv_obj_align(prvLblTextLangauge_rtl,LV_ALIGN_LEFT_MID,5,0);

    lv_obj_t *prvLblLanguage_cz = lv_label_create(lv_scr_act());

    lv_label_set_text(prvLblLanguage_cz,  "嵌入式系统（Embedded System），\n是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统。");

    lv_obj_set_style_text_font(prvLblLanguage_cz,&lv_font_montserrat_16,0);

    lv_obj_set_width(prvLblLanguage_cz,310);

    lv_obj_align(prvLblLanguage_cz, LV_ALIGN_BOTTOM_LEFT,5,-5);

}

4. 使用渐变色绘制标签

#define MASK_WIDTH  100
#define MASK_HEIGHT 45

static void add_mask_event_cb(lv_event_t *e)
{
    static lv_draw_mask_map_param_t m;
    static int16_t mask_id;

    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t *objTarget = lv_event_get_target(e);
    lv_opa_t *mask_map = lv_event_get_user_data(e);

    if(code == LV_EVENT_COVER_CHECK){

        lv_event_set_cover_res(e,LV_COVER_RES_MASKED);

    }else if (code == LV_EVENT_DRAW_MAIN_BEGIN) {

        lv_draw_mask_map_init(&m,&objTarget->coords,mask_map);

        mask_id = lv_draw_mask_add(&m,NULL);

    }else if (code == LV_EVENT_DRAW_MAIN_END) {

        lv_draw_mask_free_param(&m);

        lv_draw_mask_remove_id(mask_id);
    }
}

static void prvDrawGradient(void)
{
    static lv_opa_t mask_map[MASK_WIDTH*MASK_HEIGHT];

//    创建一个画布控件
    lv_obj_t *prvCanvas = lv_canvas_create(lv_scr_act());

//    设置画布缓冲区
    lv_canvas_set_buffer(prvCanvas, mask_map, MASK_WIDTH, MASK_HEIGHT,LV_IMG_CF_ALPHA_8BIT);

//    用画板为画布填充颜色
    lv_canvas_fill_bg(prvCanvas, lv_color_black(), LV_OPA_TRANSP);

//    设置绘画标签样式
    lv_draw_label_dsc_t label_dsc;
    lv_draw_label_dsc_init(&label_dsc);
    label_dsc.color = lv_color_white();
    label_dsc.align = LV_TEXT_ALIGN_CENTER;

//    在画布上画一个文本
    lv_canvas_draw_text(prvCanvas,5,5,MASK_WIDTH,&label_dsc, "Text whith gradient");

//    删除画布
    lv_obj_del(prvCanvas);

    lv_obj_t *grad = lv_obj_create(lv_scr_act());
    lv_obj_set_size(grad,MASK_WIDTH, MASK_HEIGHT);
    lv_obj_center(grad);
    lv_obj_set_style_bg_color(grad, lv_color_hex(0xff0000),0);
    lv_obj_set_style_bg_grad_color(grad, lv_color_hex(0x0000ff),0);
    lv_obj_set_style_bg_grad_dir(grad, LV_GRAD_DIR_HOR,0);
    lv_obj_add_event_cb(grad, add_mask_event_cb,LV_EVENT_ALL,mask_map);
}

5. 自定义圆形滚动动画

/**
 * @brief prvCustomizeCirSrollingAnimation
 */
static void prvCustomizeCirSrollingAnimation(void)
{
    static lv_anim_t prvAnimationTemplate;
    static lv_style_t prvLblStyle;

//    配置动画
    lv_anim_init(&prvAnimationTemplate);

//    延迟多久执行动画
    lv_anim_set_delay(&prvAnimationTemplate,1000);

//    设置动画重复次数，不重复
    lv_anim_set_repeat_delay(&prvAnimationTemplate,0);

    lv_style_init(&prvLblStyle);


    lv_obj_t * label1 = lv_label_create(lv_scr_act());
    lv_label_set_long_mode(label1, LV_LABEL_LONG_SCROLL_CIRCULAR);      /*Circular scroll*/
    lv_obj_set_width(label1, 150);
    lv_label_set_text(label1, "It is a circularly scrolling text. ");
    lv_obj_align(label1, LV_ALIGN_CENTER, 0, 40);
    lv_obj_add_style(label1, &prvLblStyle, LV_STATE_DEFAULT);
}

学习结果

bel_create(lv_scr_act());
lv_label_set_long_mode(label1, LV_LABEL_LONG_SCROLL_CIRCULAR); /Circular scroll/
lv_obj_set_width(label1, 150);
lv_label_set_text(label1, "It is a circularly scrolling text. ");
lv_obj_align(label1, LV_ALIGN_CENTER, 0, 40);
lv_obj_add_style(label1, &prvLblStyle, LV_STATE_DEFAULT);
}

### 学习结果
通过本篇文章的学习，对lvgl的标签控件有了进一步的学习。