LVGL笔记7--lv_label标签控件

LVGL笔记7–lv_label标签控件

lv_label标签控件是LVGL中使用最频繁的控件,主要是用来显示文本信息的,可在程序运行中动态修改文本内容,支持换行显示、图标字体、部分文本重绘色、长文本显示、6种显示模式等功能


lv_label控件的API接口
  1. 长文本模式数据类型

    enum {
        LV_LABEL_LONG_EXPAND,
        LV_LABEL_LONG_BREAK, 
        LV_LABEL_LONG_DOT, 
        LV_LABEL_LONG_SROLL,
        LV_LABEL_LONG_SROLL_CIRC,
        LV_LABEL_LONG_CROP, 
    };
    typedef uint8_t lv_label_long_mode_t;
    

    当标签中的文字内容较多时,有以上六种显示模式

    • LV_LABEL_LONG_EXPAND:自动扩展标签对象宽度来包裹文本内容。
    • LV_LABEL_LONG_BREAK:保持标签宽度不变,自动换行来包裹文本内容
    • LV_LABEL_LONG_DOT:保持标签对象长宽都不变,文本过长时在末尾显示3个省略点…(点的个数可以在配置文件中自定义)
    • LV_LABEL_LONG_SROLL:保持标签对象长宽都不变,文本过长时自动循环前后滚动显示
    • LV_LABEL_LONG_SROLL_CIRC:保持标签对象长宽都不变,文本过长时自动循环滚动显示(环形滚动)
    • LV_LABEL_LONG_CROP:保持标签对象长宽都不变,文本过长时超出的部分自动剪切掉
  2. 文本内容对齐数据类型

    enum {
        LV_LABEL_ALIGN_LEFT, 	//文本左对齐
        LV_LABEL_ALIGN_CENTER, 	//文本居中对齐
        LV_LABEL_ALIGN_RIGHT,	//文本右对齐
    };
    typedef uint8_t lv_label_align_t;
    

    标签中的文本内容只有三种对齐方式:左对齐、居中、右对齐

  3. 标签样式数据类型

    enum {
     	LV_LABEL_STYLE_MAIN,
    };
    typedef uint8_t lv_label_style_t;
    

    标签样式数据类型只有这一种,具体还不理解,后续会添加笔记的


API函数接口
  1. 创建标签

    /*--------------------------------------------------------------------------------
    	parent:指向父对象
    	copy:表示创建新对象时,把copy对象上的属性值复制过来
    	返回值:创建成功则返回新创建的标签对象,失败返回NULL
    	返回值类似FreeRTOS中的任务句柄,后续对于此标签的所有操作都有基于这个
    --------------------------------------------------------------------------------*/
    lv_obj_t * lv_label_create(lv_obj_t * parent, const lv_obj_t * copy);
    
    
  2. 设置标签显示的文本

    • 动态文本(动态的分配内存来存储文本内容)

      •   //	label:标签对象(创建标签时的返回值)
          //	text:新的文本内容,文本内容以\0结尾,如果传入NULL表示刷新当前文本(字符串)
          void lv_label_set_text(lv_obj_t * label, const char * text);//设置动态文本--字符串形式
        
      •   //	label:标签对象(创建标签时的返回值)
          //	array:新的文本内容,不需要\0结尾,如果传入NULL表示刷新当前文本(数组名)
          // 	size:传入的数组大小,单位是字节
          void lv_label_set_array_text(lv_obj_t * label, const char * array, uint16_t size);//设置动态文本--数组形式
        

        设置动态文本有字符串形式和数组形式,其实就是文本信息传入形式不同,一个是字符串形式,一个是数组形式。

    • 静态文本(节省内存)

      •   //	label:标签对象
          //	text:新的文本内容,’\0’空字符结尾,如果传NULL的话,那么代表刷新当前文本内容
          void lv_label_set_static_text(lv_obj_t * label, const char * text);
        
      •   //	label:标签对象(创建标签时的返回值)
          //	array:新的文本内容,不需要\0结尾,如果传入NULL表示刷新当前文本(数组名)
          // 	size:传入的数组大小,单位是字节
          void lv_label_set_array_text(lv_obj_t * label, const char * array, uint16_t size);
        

        设置静态文本,标签控件内不会申请内存来存放文本,所以比较节省内存,但是外部传入的文本内容不能删除或随意更改。(目前所说的文本都是指英文或者是符号,中文显示需要单独添加字库)

  3. 设置长文本模式

    /*-------------------------------------------------------------------------------
    	label:标签对象
    	long_mode:长文本模式(6种)
                        LV_LABEL_LONG_EXPAND,
                        LV_LABEL_LONG_BREAK, 
                        LV_LABEL_LONG_DOT, 
                        LV_LABEL_LONG_SROLL,
                        LV_LABEL_LONG_SROLL_CIRC,
                        LV_LABEL_LONG_CROP, 
    --------------------------------------------------------------------------------*/
    void lv_label_set_long_mode(lv_obj_t * label, lv_label_long_mode_t long_mode);
    

    此函数调用位置需要特别注意:必须放在 lv_obj_set_size 调用的前面,否则设置的宽和高是无

    效的,先设置长文本模式,在设置标签大小。

    不使用此函数时,系统默认是LV_LABEL_LONG_EXPAND模式,自动根据文本长度增加标签宽度,可以在文本中加入\n来换行

  4. 设置文本对齐方式

    /*-------------------------------------------------------------------------------
    	label:标签对象
    	align:对齐方式(3种)
    --------------------------------------------------------------------------------*/
    void lv_label_set_align(lv_obj_t * label, lv_label_align_t align);
    
  5. 是否使能文本重绘色功能

    /*-------------------------------------------------------------------------------
    	label: 标签对象
    	en: 是否使能
    --------------------------------------------------------------------------------*/
    void lv_label_set_recolor(lv_obj_t * label, bool en);
    

    使能后,可以对标签的部分文本进行颜色配置,一个标签中文本显示出不同颜色。

    使用格式为: #十六进制颜色值 文本# ,注意了颜色值和文本之间至少得有一个空格。

    lv_label_set_recolor(label1,true);//先得使能文本重绘色功能

    lv_label_set_text(label1,"#ff0000 red#,#00ff00 green#,#0000ff blue#");//使用了 3 次重绘色

  6. 是否使能背景重绘制功能

    /*-------------------------------------------------------------------------------
    	label: 标签对象
    	en: 是否使能
    --------------------------------------------------------------------------------*/
    void lv_label_set_body_draw(lv_obj_t * label, bool en);
    
    lv_label_set_style(label1,LV_LABEL_STYLE_MAIN,&lv_style_plain_color);//设置主背景的样
    式为lv_style_plain_color
    

    默认情况下,lv_label 标签对象是没有背景的,即透明的,但是我们可以通过这个接口和样式使标签对象具有背景。

  7. 设置动画速度

    /*-------------------------------------------------------------------------------
    	label: 标签对象
    	anim_speed: 动画速度,单位为 px/sec(一秒多少个像素)
    --------------------------------------------------------------------------------*/
    void lv_label_set_anim_speed(lv_obj_t * label, uint16_t anim_speed);
    

    当标签文本设置滚动时(LV_LABEL_LONG_SROLL/SCROLL_CIRC 模式下),可以通过这个函数设置滚动速度,不进行设置时有一个默认速度。

  8. 设置样式

    /*-------------------------------------------------------------------------------
    	label: 标签对象
    	type: 哪一个部件的样式,目前就 LV_LABEL_STYLE_MAIN 主背景部件这一个可选值
    	style: 样式
    --------------------------------------------------------------------------------*/
    
    static inline void lv_label_set_style(lv_obj_t * label, lv_label_style_t type, const lv_style_t *style)
    
  9. 插入文本

    /*-------------------------------------------------------------------------------
        label: 标签对象
        pos: 插入的位置,0 代表从最前面插入, LV_LABEL_POS_LAST 代表从最后面插入
       	txt: 要插入的文本
    --------------------------------------------------------------------------------*/
    void lv_label_ins_text(lv_obj_t * label, uint32_t pos, const char * txt);
    

    使用此函数,文本必须是动态设置的,不能是静态文本,插入位置代表字符位置,例如 1 表示在第一个字符后面插入。

  10. 剪切文本

    /*-------------------------------------------------------------------------------
        label: 标签对象
    	pos: 剪切的起始位置,从 0 开始
    	cnt: 要剪切的字符数量
    --------------------------------------------------------------------------------*/
    void lv_label_cut_text(lv_obj_t * label, uint32_t pos, uint32_t cnt);
    

    剪切文本亦可以理解为删除文本,可以删除指定区域指定长度的文本,当然也必须是动态文本才可以使用此函数。

有些函数接口没有总结

根据正点原子的LVGL教程总结的笔记,以后使用中遇到问题会继续总结在这里。

2021-2-1-WRS

  • 5
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
好的,我知道你想问什么。首先,我们需要创建一个 Tabs 组件,并且在组件中使用 v-for 循环来渲染标签页。以下是一个简单的示例代码: ```html <template> <div class="tabs"> <div class="tab" v-for="(tab, index) in tabs" :key="index" :class="{ 'active': activeTab === index }" @click="activeTab = index"> {{ tab.label }} </div> <div class="tab-content"> <slot :name="tabs[activeTab].label"></slot> </div> </div> </template> <script> export default { name: 'Tabs', data() { return { activeTab: 0, tabs: [ { label: 'Tab 1' }, { label: 'Tab 2' }, { label: 'Tab 3' } ] } } } </script> <style> .tabs { display: flex; flex-direction: column; } .tab { cursor: pointer; padding: 10px; border: 1px solid #ccc; border-bottom: none; } .tab.active { background-color: #ccc; } .tab-content { border: 1px solid #ccc; padding: 10px; } </style> ``` 在上面的示例中,我们使用了一个名为 tabs 的数组来存储每个标签页的信息。我们使用 v-for 循环来渲染每个标签页的标签,并且使用 activeTab 变量来追踪当前选中的标签页。当用户单击标签页时,我们将更新 activeTab 变量,并使用插槽来渲染相应的标签页内容。 如果你想根据不同的标签页来显示不同的表格内容,你可以在插槽中使用 v-if 或者 v-show 来判断应该显示哪个表格。例如: ```html <template> <div class="tabs"> <div class="tab" v-for="(tab, index) in tabs" :key="index" :class="{ 'active': activeTab === index }" @click="activeTab = index"> {{ tab.label }} </div> <div class="tab-content"> <table v-if="tabs[activeTab].label === 'Tab 1'"> <!-- 表格 1 的内容 --> </table> <table v-else-if="tabs[activeTab].label === 'Tab 2'"> <!-- 表格 2 的内容 --> </table> <table v-else-if="tabs[activeTab].label === 'Tab 3'"> <!-- 表格 3 的内容 --> </table> </div> </div> </template> ``` 在上面的示例中,我们使用了 v-if 和 v-else-if 来判断当前选中的标签页是哪个,并根据不同的标签显示不同的表格内容。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值