LittleVGL 学习笔记1-标签，风格，字体

sk52341314

已于 2022-10-25 17:26:01 修改

阅读量272

点赞数

文章标签：单片机 1024程序员节

于 2022-10-24 16:57:57 首次发布

本文链接：https://blog.csdn.net/sk52341314/article/details/127492662

版权

LittleVGL 学习笔记（一）
设置父类

建立显示屏scr为父类，显示屏一般父类为显示屏

lv_obj_t* scr = lv_scr_act();

建立标签子类

声明标签子类

举例：lv_obj_t* label1；

在父类中创建标签子类

/****************************************************************************************************
*@par    :  											该子类存在的父类，比如显示屏scr
*@copy : 											传入的参数，一般为NULL
*******************************************************************************************************/
lv_obj_t * lv_label_create(lv_obj_t * par, const lv_obj_t * copy)
举例：label1 = lv_label_create(scr, NULL);

设置标签模式

enum {
	//标签宽度随文本大小改变
    LV_LABEL_LONG_EXPAND,    /**< Expand the object size to the text size*/
    //标签高度随文本大小改变，自动换行
    LV_LABEL_LONG_BREAK,     /**< Keep the object width, break the too long lines and expand the object
                                height*/
    //文本长度超过标签长度部分显示。。。                            
    LV_LABEL_LONG_DOT,       /**< Keep the size and write dots at the end if the text is too long*/
    //文本长度超过标签长度前后滚动  
    LV_LABEL_LONG_SROLL,      /**< Keep the size and roll the text back and forth*/
    //文本长度超过标签长度循环滚动  
    LV_LABEL_LONG_SROLL_CIRC, /**< Keep the size and roll the text circularly,text lenth must more than the label lenth*/
    文本长度超过标签长度本分不显示
    LV_LABEL_LONG_CROP,      /**< Keep the size and crop the text out of it*/
};
/****************************************************************************************************
*@label: 									 		标签名称
*@lv_label_long_mode_t : 							标签模式
*******************************************************************************************************/
void lv_label_set_long_mode（lv_obj_t * label, lv_label_long_mode_t long_mode);
举例：lv_label_set_long_mode（label1, LV_LABEL_LONG_EXPAND);

设置标签宽度/高度/尺寸

/****************************************************************************************************
*@obj：													标签名称
*@w：													标签宽度
*******************************************************************************************************/
void lv_label_set_width(lv_obj_t * obj, lv_coord_t w)
举例：lv_label_set_width(label1,100);
/****************************************************************************************************
*@obj：													标签名称
*@h：													标签高度
*******************************************************************************************************/
void lv_obj_set_height(lv_obj_t * obj, lv_coord_t h)
举例：lv_obj_set_height(label1,100);
/****************************************************************************************************
*@obj：													标签名称
*@w:													标签长度
*@h：													标签高度
*******************************************************************************************************/
void lv_obj_set_size(lv_obj_t * obj, lv_coord_t w, lv_coord_t h)
举例：lv_obj_set_height(label1,100,100);

设置标签风格

/****************************************************************************************************
*@label：												标签名称
*@type：												标签类型
*@style：												标签风格
*******************************************************************************************************/
static inline void lv_label_set_style(lv_obj_t * label, lv_label_style_t type, const lv_style_t * style)
举例：lv_label_set_style(label1,LV_LABEL_STYLE_MAIN,&lv_style_plain_color);

设定自定义风格：
风格结构体定义

typedef struct
{
    uint8_t glass : 1; /**< 1: Do not inherit this style*/

    /** Object background. */
    struct
    {
    	//上半部分颜色
        lv_color_t main_color; /**< Object's main background color. */
        //下半部分颜色
        lv_color_t grad_color; /**< Second color. If not equal to `main_color` a gradient will be drawn for the background. */
        //4角的圆角弧度
        lv_coord_t radius; /**< Object's corner radius. You can use #LV_RADIUS_CIRCLE if you want to draw a circle. */
        //透明度
        lv_opa_t opa; /**< Object's opacity (0-255). */
		//边框设置
        struct
        {
        	//边框颜色
            lv_color_t color; /**< Border color */
            //边框宽度
            lv_coord_t width; /**< Border width */
            //边框位置-上/下/左/右
            lv_border_part_t part; /**< Which borders to draw */
            //边框阴影
            lv_opa_t opa; /**< Border opacity. */
        } border;

        //阴影设置
        struct
        {
        	//阴影颜色
            lv_color_t color;	
            //阴影宽度
            lv_coord_t width;
            //阴影类型
            lv_shadow_type_t type; /**< Which parts of the shadow to draw */
        } shadow;
		
		//边距设置
        struct
        {
            lv_coord_t top;
            lv_coord_t bottom;
            lv_coord_t left;
            lv_coord_t right;
            lv_coord_t inner;
        } padding;
    } body;

    /** Style for text drawn by this object. */
    //文字设置
    struct
    {
    	//文本颜色
        lv_color_t color; /**< Text color */
        //文本选中颜色
        lv_color_t sel_color; /**< Text selection background color. */
        //文本字体
        const lv_font_t * font;
        //文本间距
        lv_coord_t letter_space; /**< Space between letters */
        //文本行距
        lv_coord_t line_space; /**< Space between lines (vertical) */
        //文本透明度
        lv_opa_t opa; /**< Text opacity */
    } text;

    /**< Style of images. */
    //图片设置
    struct
    {
        lv_color_t color; /**< Color to recolor the image with */
        lv_opa_t intense; /**< Opacity of recoloring (0 means no recoloring) */
        lv_opa_t opa; /**< Opacity of whole image */
    } image;

    /**< Style of lines (not borders). */
    struct
    {
        lv_color_t color;
        lv_coord_t width;
        lv_opa_t opa;
        uint8_t rounded : 1; /**< 1: rounded line endings*/
    } line;
} lv_style_t;

//一定要定义static或者全局变量，否则会无法显示

static lv_style_t my_style;

//将lv_style_plain_color复制到my_style中，这样可以只配置自己需要的参数

lv_style_copy(&my_style,&lv_style_plain_color)

//上下部分颜色不一样将出现渐变色效果

my_style.body.main_color = LV_COLOR_BLUE;
my_style.body.grad_color = LV_COLOR_YELLOW;

//4角变成5mm圆角

my_style.body.radius = 5;

//边框透明度设置0~255，255为不透明

my_style.body.opa = LV_OPA_COVER;

//边距设置

my_style.body.padding.top = 10;

//阴影设置

my_style.body.shadow.type = LV_SHADOW_FULL;
my_style.body.shadow.width = 10;
my_style.body.shadow.color = LV_COLOR_RED;

//边框设置

my_style.body.border.color = LV_COLOR_BLACK;
my_style.body.border.width = 1;
my_style.body.border.part = LV_BORDER_FULL;
my_style.body.border.opa = LV_OPA_100;

//文字设置

my_style.text.color = LV_COLOR_RED;
my_style.text.font = &lv_font_roboto_28;		//字体选择
my_style.text.line_space = 10;					//文字间水平距离
my_style.text.letter_space = 10;				//文字间垂直距离

使能背景绘制

/****************************************************************************************************
*@label													标签名称
*@en													是否使能
*******************************************************************************************************/
void lv_label_set_body_draw(lv_obj_t * label, bool en)
举例：lv_label_set_body_draw(label1,true);

使能标签点击功能(非必要)

/****************************************************************************************************
*@label													标签名称
*@en													是否使能
*******************************************************************************************************/
void lv_label_set_click(lv_obj_t * label, bool en)
举例：
lv_label_set_click(label1,true);
lv_obj_set_event_cb(label1,event_handler);//设置事件回调函数

设置标签文本

/****************************************************************************************************
*@label													标签名称
*@en													是否使能
*@text													显示的文本
*******************************************************************************************************/
void lv_label_set_recolor(lv_obj_t * label, bool en)
void lv_label_set_text(lv_obj_t * label, const char * text)
举例：
lv_label_set_recolor(label2,true);//使能文本重绘色功能,不需要可以不用
lv_label_set_text(label2,"Please #00ff00 click #me!");//设置文本

9.位置对齐：如标签的位置对齐

/** Object alignment. */
enum {
    LV_ALIGN_CENTER = 0,
    LV_ALIGN_IN_TOP_LEFT,
    LV_ALIGN_IN_TOP_MID,
    LV_ALIGN_IN_TOP_RIGHT,
    LV_ALIGN_IN_BOTTOM_LEFT,
    LV_ALIGN_IN_BOTTOM_MID,
    LV_ALIGN_IN_BOTTOM_RIGHT,
    LV_ALIGN_IN_LEFT_MID,
    LV_ALIGN_IN_RIGHT_MID,
    LV_ALIGN_OUT_TOP_LEFT,
    LV_ALIGN_OUT_TOP_MID,
    LV_ALIGN_OUT_TOP_RIGHT,
    LV_ALIGN_OUT_BOTTOM_LEFT,
    LV_ALIGN_OUT_BOTTOM_MID,
    LV_ALIGN_OUT_BOTTOM_RIGHT,
    LV_ALIGN_OUT_LEFT_TOP,
    LV_ALIGN_OUT_LEFT_MID,
    LV_ALIGN_OUT_LEFT_BOTTOM,
    LV_ALIGN_OUT_RIGHT_TOP,
    LV_ALIGN_OUT_RIGHT_MID,
    LV_ALIGN_OUT_RIGHT_BOTTOM,
};
/****************************************************************************************************
*@obj：													名称
*@base：												对齐基准，如果是NULL则选择父类
*@align：												对齐位置
*@x_mod：												x偏移位置
*@y_mod：												y偏移位置
*******************************************************************************************************/
void lv_obj_align(lv_obj_t * obj, const lv_obj_t * base, lv_align_t align, lv_coord_t x_mod, lv_coord_t y_mod)
举例：lv_obj_align(label2,NULL,LV_ALIGN_CENTER,0,0);

标签文本对齐

enum {
    LV_LABEL_ALIGN_LEFT, /**< Align text to left */
    LV_LABEL_ALIGN_CENTER, /**< Align text to center */
    LV_LABEL_ALIGN_RIGHT, /**< Align text to right */
};
/****************************************************************************************************
*@label：												标签名称
*@align：												对齐位置
*******************************************************************************************************/
void lv_label_set_align(lv_obj_t * label, lv_label_align_t align)
举例：lv_label_set_align(label1,LV_LABEL_ALIGN_CENTER);

标签内文本颜色重绘（非必要）

/****************************************************************************************************
*@label：												标签名称
*@en：													使能
*******************************************************************************************************/
void lv_label_set_recolor(lv_obj_t * label, bool en)
举例：
lv_label_set_recolor(label1,true);
lv_label_set_text(label1,"Please #00ff00 click #me!");//#颜色 #设置文本颜色

标签内文本插入与剪切
插入

/****************************************************************************************************
*@label：												标签名称
*@pos:													插入位置
*@txt：													插入文本内容
*******************************************************************************************************/
void lv_label_ins_text(lv_obj_t * label, uint32_t pos, const char * txt)
举例：lv_label_ins_text(label1,0,"OK");//在0位置插入ok

剪切

/****************************************************************************************************
*@label：												标签名称
*@pos:													插入位置
*@cnt：													剪切的字符数
*******************************************************************************************************/
void lv_label_cut_text(lv_obj_t * label, uint32_t pos, uint32_t cnt)
举例：lv_label_cut_text(label1,0,2);//从0位置剪切2个字符

标签内文本动画速度：专门针对LV_LABEL_LONG_SROLL与LV_LABEL_LONG_SROLL_CIRC

/****************************************************************************************************
*@label：											标签名称
*@anim_speed:										动画速度
*******************************************************************************************************/
void lv_label_set_anim_speed(lv_obj_t * label, uint16_t anim_speed)
举例：lv_label_set_anim_speed(label1,20);