标签(label)组件的使用

VGL 标签的作用:

  1. 显示信息:标签主要用于显示静态或动态的文字信息,如提示、标题、状态等。
  2. 布局调整:可以设置标签的位置和对齐方式,使其适应不同的屏幕布局需求。
  3. 动态更新:支持动态更改标签中的文本内容,比如实时数据显示。
  4. 交互反馈:虽然标签本身通常不具备交互功能,但可以通过改变其内容或样式来响应用户的操作,提供视觉反馈。

多语言支持:可以结合多语言系统,在不同语言环境下显示相应的文字。

标签(lV_label)

标签是用来显示文本的基本对象类型。

在盒子模型里面,标签的组成包括:

LV_PART_MAIN矩形部分(盒子区域)。填充值可用于在文本和背景之间添加空间。

LV_PART_SCROLLBAR 当在展示的文本大于部件时,显示滚轮条部分。

LV_PART_SELECTED 选中文本时,突出显示部分。Label只能使用text_color和bg_color 样式属性。

创建标签:

Lv_obj_t * label = lv_label_create(parent);

设置显示文本:

创建了标签部件之后我们就可以设置文本来显示了。

直接设置要显示的文本:

lv_label _set _text(label, "New text");

格式化给定要显示的文本:

Iv _label set text fmt(label, “%s: %d", "Value". 15)

文本不存储在动态内存中,而是直接使用给定的缓冲区

iv label set text static(label. " New text"):

要在label换行非常简单,像printf函数那样使用\n 即可:

lv label set text(label." linel\nline2\n\nline4 "):

大小:

默认情况标签的大小会自动拓展成和文本一样的大小(Iv_SIZE_CONTENT),:如果可以像前面课程说到的方法显式设置宽高:

lv_obj_set_size  lvobj set width  lv obi set height

这样就可能出现文本的宽度或高度大小label的情况,就需要做一些调整,下面是几种模式:

LV_LABEL_LONG_WRAP 如果有多个换行,并且如果高度为LV_SIZE_CONTENT,那么高度会根据文本换行被自动扩展;否则文本将被剪掉。(默认设置)

LV LABEL LONG DOT如果文本太长,就保持大小并在末尾写3个点

LV_LABEL_LONG_SCROLL 如果文本比标签宽(太长),则可以水平来回滚动显示它。如果它很高(多个\n换行),可以垂直滚动。只滚动一个方向,水平滚动的优先级更高。

LVL_LABEL_LONG_SCROLL_CIRCULAR 如果文本比标签宽,则水平滚动它。如果它更高,就垂直滚动。只滚动一个方向,水平滚动的优先级更高。

LV_LABEL_LONG_CLIP 剪掉超出标签范围外的文本部分,。

可以使用 iv_labelset_long_mode(label, LV_LABEL_LONG...) 指定模式。

注意:LVL_LABEL_LONG.DOT是直接操作文本缓冲区以添加/删除点。如果使用 iv_abeLsettext 和ivJabeLsettex_ímt它们会分配一个单独的缓冲区,不会出问题。但是如果使用 iabeLseutexustatic 时我们传递给它的缓冲区必须是可写的。

文本着色:      

我们可以很方便地给我们的要显示的文本重新着色,可以通过样式来上色,例如:

Lv_style_set_text_color(&style_obj,lv_color_hex(0xf7b37b));

Lv_label_set_text(label1,”#0000ff Re-color# #ff00ff words# #ff0000 of a# label”);

也可以让文本某些部分重新着色,例如:

olv label set recolor(labell. true):

lv_label_set_text(label1.“#0000ff Re-color# #ff00ff words# #ff0000 of a# label);

文本选择:

如果在 w.confh 中打开了 I_BELTExT_SELECHON(默认开启),就可以选择部分文本了。这个和我们在PC用鼠标选中文本类似,但是这个效果只能在文本框(lv_extarea)中实现。Label只能事先手动选择指定范围的文本:

Lv_label_set_text sel start(label. 0);

Iv_label_set text sel end(label. 6);

显示图标:

标签的API

1. **创建标签**

   - `lv_label_create(lv_obj_t *parent)`: 创建一个新的标签对象并将其添加到指定的父容器中。

     - 参数 `parent` 是标签的父对象。

2. **设置和获取文本**

   - `lv_label_set_text(lv_label_t *label, const char *text)`: 设置标签的文本内容。

     - 参数 `text` 是要显示的字符串。

   - `lv_label_get_text(const lv_label_t *label)`: 获取标签的文本内容。

     - 返回值是当前标签的文本。

3. **设置长文本模式**

   - `lv_label_set_long_mode(lv_label_t *label, lv_label_long_mode_t mode)`: 设置如何处理过长的文本。

     - 参数 `mode` 可以是 `LV_LABEL_LONG_WRAP`, `LV_LABEL_LONG_CLIP`, `LV_LABEL_LONG_ELLIPSIS` 或 `LV_LABEL_LONG_SCROLL`.

       - `LV_LABEL_LONG_WRAP`: 文本自动换行。

       - `LV_LABEL_LONG_CLIP`: 超出部分被裁剪。

       - `LV_LABEL_LONG_ELLIPSIS`: 超出部分用省略号表示。

       - `LV_LABEL_LONG_SCROLL`: 文本滚动显示。

4. **设置对齐方式**

   - `lv_label_set_align(lv_label_t *label, lv_label_align_t align)`: 设置文本的对齐方式。

     - 参数 `align` 可以是 `LV_LABEL_ALIGN_LEFT`, `LV_LABEL_ALIGN_CENTER`, `LV_LABEL_ALIGN_RIGHT`.

5. **设置多行文本**

   - `lv_label_set_text_multiline(lv_label_t *label, const char *text)`: 设置多行文本。

     - 参数 `text` 包含换行符 `\n` 以分隔多行。

6. **设置滚动**

   - `lv_label_set_scroll(lv_label_t *label, bool enable)`: 开启或关闭标签文本的滚动显示。

     - 参数 `enable` 如果为 `true` 则启用滚动;否则禁用。

   - `lv_label_set_scroll_speed(lv_label_t *label, uint16_t speed)`: 设置滚动的速度。

     - 参数 `speed` 滚动速度,单位为像素/秒。

   - `lv_label_set_scroll_period(lv_label_t *label, uint32_t period)`: 设置完成一次滚动所需的时间。

     - 参数 `period` 单位为毫秒。

### 样式和外观

1. **设置字体**

   - `lv_label_set_style_text_font(lv_label_t *label, const lv_font_t *font, lv_part_t part)`: 设置标签的字体。

     - 参数 `font` 是字体结构体指针。

     - 参数 `part` 表示样式应用于哪个部分。

2. **设置颜色**

   - `lv_label_set_style_text_color(lv_label_t *label, lv_color_t color, lv_part_t part)`: 设置标签文本的颜色。

     - 参数 `color` 是颜色值。

     - 参数 `part` 表示样式应用于哪个部分。

3. **设置背景颜色**

   - `lv_label_set_style_bg_color(lv_label_t *label, lv_color_t color, lv_part_t part)`: 设置标签背景颜色。

     - 参数 `color` 是颜色值。

     - 参数 `part` 表示样式应用于哪个部分。

4. **设置边框**

   - `lv_label_set_style_border_width(lv_label_t *label, lv_coord_t width, lv_part_t part)`: 设置标签的边框宽度。

     - 参数 `width` 边框宽度。

     - 参数 `part` 表示样式应用于哪个部分。

   - `lv_label_set_style_border_color(lv_label_t *label, lv_color_t color, lv_part_t part)`: 设置标签的边框颜色。

     - 参数 `color` 边框颜色。

     - 参数 `part` 表示样式应用于哪个部分。

5. **设置圆角**

   - `lv_label_set_style_radius(lv_label_t *label, lv_coord_t radius, lv_part_t part)`: 设置标签的圆角半径。

     - 参数 `radius` 圆角半径。

     - 参数 `part` 表示样式应用于哪个部分。

6. **设置阴影**

   - `lv_label_set_style_shadow_width(lv_label_t *label, lv_coord_t width, lv_part_t part)`: 设置标签阴影的宽度。

     - 参数 `width` 阴影宽度。

     - 参数 `part` 表示样式应用于哪个部分。

   - `lv_label_set_style_shadow_color(lv_label_t *label, lv_color_t color, lv_part_t part)`: 设置标签阴影的颜色。

     - 参数 `color` 阴影颜色。

     - 参数 `part` 表示样式应用于哪个部分。

### 布局和位置

1. **设置位置**

   - `lv_obj_set_pos(lv_label_t *label, lv_coord_t x, lv_coord_t y)`: 设置标签的位置。

     - 参数 `x` 和 `y` 分别是X轴和Y轴的坐标。

2. **设置尺寸**

   - `lv_obj_set_size(lv_label_t *label, lv_coord_t width, lv_coord_t height)`: 设置标签的尺寸。

     - 参数 `width` 和 `height` 分别是宽度和高度。

3. **设置自动重排**

   - `lv_obj_set_auto_realign(lv_label_t *label, bool enable)`: 设置是否自动调整标签尺寸以适应文本。

     - 参数 `enable` 如果为 `true` 则开启自动重排;否则关闭。

4. **设置最大宽度**

   - `lv_obj_set_width(lv_label_t *label, lv_coord_t width)`: 设置标签的最大宽度。

     - 参数 `width` 最大宽度。

  • 21
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值