标签 (Label)

::: hljs-center ![Label.png](https://cos.easydoc.net/79463195/files/krtfildq.png) ::: 标签是 LVGL 用来显示文字的控件。 ## 示例代码 ```lua label = lvgl.label_create(lvgl.scr_act(), nil) lvgl.label_set_recolor(label, true) lvgl.label_set_text(label, "#0000ff Re-color# #ff00ff words# #ff0000 of\n# align the lines to\n the center and wrap\n long text automatically.") lvgl.obj_set_width(label, 150) lvgl.label_set_align(label, lvgl.LABEL_ALIGN_CENTER) lvgl.obj_align(label, nil, lvgl.ALIGN_CENTER, 0, -40) ``` ## 创建 标签是通过 `lvgl.label_create` 函数创建的。 ```lua label = lvgl.label_create(lvgl.scr_act(), nil) ``` ## 设置文字 可以使用 `lvgl.label_set_text` 设置标签上的文字显示内容。 ```lua lvgl.label_set_text(label, "Hello World!") ``` ::: hljs-center ![image.png](https://cos.easydoc.net/71161452/files/ks8w034r.png) ::: ## 长模式 标签是有宽度的,默认情况下,在设置文字后会自行调整,标签宽度会自动扩充到文本宽度。但是这种显示方式是可以进行更改的,也就是设置 `长模式`,长模式是通过函数 `lvgl.label_set_long_mode` 进行设置的。使用长模式有个前提,就是文字内容需要比标签长。所以需要先设置 `长模式`,然后设置标签宽度,最后才是设置文字内容。长模式的选项有以下几种: ```lua -- 设置模式 lvgl.LABEL_LONG_EXPAND lvgl.LABEL_LONG_BREAK lvgl.LABEL_LONG_CROP lvgl.LABEL_LONG_DOT lvgl.LABEL_LONG_SROLL lvgl.LABEL_LONG_SROLL_CIRC ``` 我们先来看下 `lvgl.LABEL_LONG_BREAK` 的显示效果,注意顺序,`长模式`,`宽度`,`文字`。 ```lua lvgl.label_set_long_mode(lab, lvgl.LABEL_LONG_BREAK) lvgl.obj_set_width(lab, 60) lvgl.label_set_text(lab, "ABCDEFGHIJKLMK") ``` ::: hljs-center ![image.png](https://cos.easydoc.net/71161452/files/ks8wtj3u.png) ::: `lvgl.LABEL_LONG_CROP ` 超出长度内容部分会直接截断 ```lua lvgl.label_set_long_mode(lab, lvgl.LABEL_LONG_CROP) ``` ::: hljs-center ![image.png](https://cos.easydoc.net/71161452/files/ks8wxtdo.png) ::: `lvgl.LABEL_LONG_DOT` 同样会截断显示,但是会在标签后添加 `...`,来表示有省略内容。 ```lua lvgl.label_set_long_mode(lab, lvgl.LABEL_LONG_DOT) ``` ::: hljs-center ![image.png](https://cos.easydoc.net/71161452/files/ks8x1g01.png) ::: `lvgl.LABEL_LONG_SROLL` 是设置滚动模式,文字滚动方式是左右滚动。 ```lua lvgl.label_set_long_mode(lab, lvgl.LABEL_LONG_SROLL) ``` ::: hljs-center ![jdfw6.gif](https://cos.easydoc.net/71161452/files/ks8x6lce.gif) ::: `lvgl.LABEL_LONG_SROLL` 也是设置滚动模式,文字滚动方式是循环滚动。 ```lua lvgl.label_set_long_mode(lab, lvgl.LABEL_LONG_SROLL_CIRC) ``` ::: hljs-center ![jdfw7.gif](https://cos.easydoc.net/71161452/files/ks8x8vm2.gif) ::: ## 文字方向 文字的默认方向是依靠文本方向的,中英文都是从左向右书写阅读的,但是有些文字的书写阅读方向是从右向左的,比如阿拉伯文,`lvgl.LABEL_ALIGN_AUTO` 就是根据文字方向对齐。文字对齐方向就是靠左,靠右,居中三种,这个没有什么好展示的了,这里有一点需要注意的是,在使用长模式时需要文字内容比标签宽度宽,但是要看出文字对齐方向效果则需要文字内容比标签宽度窄,所以我们需要把标签宽度加长,这里只展示个靠右的效果。 ```lua lvgl.obj_set_width(lab, 160) lvgl.label_set_text(lab, "ABCDE") lvgl.label_set_align(lab, lvgl.LABEL_ALIGN_RIGHT) ``` ::: hljs-center ![image.png](https://cos.easydoc.net/71161452/files/ks8ysomp.png) ::: ## 设置颜色 文本设置颜色可以通过启用 recolor 实现: ```lua lvgl.label_set_recolor(lab, true) ``` 随后就可以通过命令设置文本的不同部分颜色,来对文本进行重新着色。标签会把 `#` 打头的6个数字识别为颜色值,该模式可以随时取消。 ``` lvgl.label_set_recolor(lab, true) lvgl.label_set_text(lab, "#FF0000 RED#\n#00FF00 GREEN#\n#0000FF BLUE#\n") ``` ::: hljs-center ![image.png](https://cos.easydoc.net/71161452/files/ks8z44zl.png) ::: ## 编辑 可以通过函数对标签的文本进行简单的编辑,LVGL 的官方库是由 C语言 编写,C语言本身对文本操作不是特别方便。Lua 相对于 C 来说文本处理能力要强很多,所以此接口用途范围也比较窄。`label_cut_text` 删除文本,虽然 cut 看起来像是"剪切",实际上这里的意思是"删除",该函数的返回值是空,并没有把剪切完的文本传递出来。`label_ins_text` 插入文本,在指定的位置插入文本。 ## API lvgl.label_create(par, copy)| |功能|创建一个标签对象| |返回|指向创建的标签对象的指针| |参数|| |par|指向对象的指针, 它将是新键对象的父对象| |copy|指向标签对象的指针, 如果不为 nil, 则将从其复制新对象| ### lvgl.label_create |调用|lvgl.label_create(label, text)| |-|-| |功能|设置标签的新文本| |参数|| |label|指向标签对象的指针| |text|需要对标签设置的文本| ### lvgl.label_set_long_mode |调用|lvgl.label_set_long_mode(label, mode)| |-|-| |功能|设置标签的长模式显示| |参数|| |label|指向标签对象的指针| |mode|标签的长模式| ||lvgl.LABEL_LONG_EXPAND| ||lvgl.LABEL_LONG_BREAK| ||lvgl.LABEL_LONG_CROP| ||lvgl.LABEL_LONG_DOT| ||lvgl.LABEL_LONG_SROLL| ||lvgl.LABEL_LONG_SROLL_CIRC| ### lvgl.label_set_align |调用|lvgl.label_set_align(label, align)| |-|-| |功能|设置标签的文字对齐方式| |参数|| |label|指向标签对象的指针| |align|标签的对齐方式| ||lvgl.LABEL_ALIGN_AUTO| ||lvgl.LABEL_ALIGN_CENTER| ||lvgl.LABEL_ALIGN_LEFT| ||lvgl.LABEL_ALIGN_RIGHT| ### lvgl.label_set_recolor |调用|lvgl.label_set_recolor(label, en)| |-|-| |功能|启动重新着色功能| |参数|| |label|指向标签对象的指针| |en|true 打开重新着色,false 关闭重新着色| ### lvgl.label_set_anim_speed |调用|lvgl.label_set_anim_speed(label, speed)| |-|-| |功能|设置文本滚动的速度| |参数|| |label|指向标签对象的指针| |speed|文本滚动的速度,单位是 像素/秒| ### lvgl.label_ins_text |调用|lvgl.label_ins_text(label, pos, txt)| |-|-| |功能|在标签上插入文本| |参数|| |label|指向标签对象的指针| |pos|文本插入的位置| |txt|需要插入的文本| ### lvgl.label_cut_text |调用|lvgl.label_cut_text(label, pos, cnt)| |-|-| |功能|从标签中删除文本| |参数|| |label|指向标签对象的指针| |pos|文本删除的位置| |cnt|删除文本的个数| ### lvgl.label_is_char_under_pos |调用|lvgl.label_is_char_under_pos(label, tpos)| |-|-| |功能|检查某坐标点位置是否绘制有字符| |返回|有字符 true,无字符 false| |参数|| |label|指向标签对象的指针| |tpos|坐标点的 table,如 {2, 3}| ### lvgl.label_get_text |调用|lvgl.label_get_text(label)| |-|-| |功能|获取标签的设置文本| |返回|当前标签文本| |参数|| |label| 指向标签对象的指针| ### lvgl.label_get_align |调用|lvgl.label_get_align(label)| |-|-| |功能|获取标签的对齐方式| |返回|当前标签的对齐方式| |参数|| |label|指向标签对象的指针| ### lvgl.label_get_anim_speed |调用|lvgl.label_get_anim_speed(label)| |-|-| |功能|获取标签的滚动速度| |返回|当前标签的滚动速度| |参数|| |label|指向标签对象的指针| ### lvgl.label_get_long_mode |调用|lvgl.label_get_long_mode(label)| |-|-| |功能|获取标签的显示模式| |返回|当前标签的显示模式| |参数|| |label|指向标签对象的指针| ### lvgl.label_get_recolor |调用|lvgl.label_get_recolor(label)| |-|-| |功能|获取当前文本着色开关| |返回|当前文本着色是否打开| |形参|| |label|指向标签对象的指针 [参考链接(C语言)](https://docs.lvgl.io/master/widgets/core/label.html)