lvgl 小部件之样式属性篇

路过的小熊~

已于 2022-06-30 11:45:48 修改

阅读量2.7k

点赞数 1

分类专栏：嵌入式UI专栏文章标签： python 开发语言单片机

于 2022-06-29 21:47:16 首次发布

本文链接：https://blog.csdn.net/qq_32348883/article/details/125530124

版权

嵌入式UI专栏专栏收录该内容

12 篇文章 14 订阅

订阅专栏

简介

样式设置是LVGL中，要做一个优美的UI界面不可缺少的必然要素。

lvgl样式属性说明

lvgl样式之大小、位置和填充样式属性设置

使用代码举例：

static lv_style_t style;
lv_style_init(&style);
//设置样式圆角半径
lv_style_set_radius(&style, 5);

//设置大小样式
lv_style_set_width(&style, 150);
lv_style_set_height(&style, LV_SIZE_CONTENT);

//设置填充样式
lv_style_set_pad_ver(&style, 20);
lv_style_set_pad_left(&style, 5);

//设置位置样式
lv_style_set_x(&style, lv_pct(50));
lv_style_set_y(&style, 80);

/*创建一个对象使用新样式*/
lv_obj_t * obj = lv_obj_create(lv_scr_act());
lv_obj_add_style(obj, &style, 0);

lv_obj_t * label = lv_label_create(obj);
lv_label_set_text(label, "Hello");

使用效果如下：
在这里插入图片描述

lvgl样式之背景色、边框色、外边距属性设置

举例代码：

//创建一个容器
static const lv_style_prop_t props[] = {LV_STYLE_BG_COLOR, LV_STYLE_BORDER_COLOR, LV_STYLE_BORDER_WIDTH, 0};

/* 一个默认样式
 * 延时100ms启动，延迟200ms后结束*/
static lv_style_transition_dsc_t trans_def;
lv_style_transition_dsc_init(&trans_def, props, lv_anim_path_linear, 100, 200, NULL);

/* 按下状态下的一个特殊样式
 * 延迟500ms启动， 但不延迟结束*/
static lv_style_transition_dsc_t trans_pr;
lv_style_transition_dsc_init(&trans_pr, props, lv_anim_path_linear, 500, 0, NULL);

static lv_style_t style_def;
//创建样式
lv_style_init(&style_def);
//将预定默认状态添加到样式style_def中
lv_style_set_transition(&style_def, &trans_def);

static lv_style_t style_pr;
//创建样式
lv_style_init(&style_pr);
//样式背景颜色：红色
lv_style_set_bg_color(&style_pr, lv_palette_main(LV_PALETTE_RED));
//样式外边距：6pix
lv_style_set_border_width(&style_pr, 6);
//样式外边框颜色：蓝色
lv_style_set_border_color(&style_pr, lv_palette_darken(LV_PALETTE_BLUE, 3));
//将预定按下样式添加到style_pr中
lv_style_set_transition(&style_pr, &trans_pr);

/*创建一个对象，用于使样式生效*/
#if 0
//常见样式
	LV_STATE_DEFAULT     =  0x0000,
	LV_STATE_CHECKED     =  0x0001,
	LV_STATE_FOCUSED     =  0x0002,
	LV_STATE_FOCUS_KEY   =  0x0004,
	LV_STATE_EDITED      =  0x0008,
	LV_STATE_HOVERED     =  0x0010,
	LV_STATE_PRESSED     =  0x0020,
	LV_STATE_SCROLLED    =  0x0040,
	LV_STATE_DISABLED    =  0x0080,
	LV_STATE_USER_1      =  0x1000,
	LV_STATE_USER_2      =  0x2000,
	LV_STATE_USER_3      =  0x4000,
	LV_STATE_USER_4      =  0x8000,
#endif
//创建对象
lv_obj_t * obj = lv_obj_create(lv_scr_act());
//将style_def设置为默认样式
lv_obj_add_style(obj, &style_def, 0);
//将style_pr设置为按压样式
lv_obj_add_style(obj, &style_pr, LV_STATE_PRESSED);

lv_obj_center(obj);

效果如下：
在这里插入图片描述
点击后，效果如下：
![在这里插入图片描述](https://img-blog.csdnimg.cn/72dd6a2b07c5475e9e98294f195c0e36.png

lvgl样式之文本样式属性设置

使用代码举例：

//创建样式
static lv_style_t style;
//初始化样式
lv_style_init(&style);

//设置背景圆角半径为: 5
lv_style_set_radius(&style, 5);
//设置背景透明度
lv_style_set_bg_opa(&style, LV_OPA_COVER);
//设置背景颜色
lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 2));
//设置外边距为: 2
lv_style_set_b：order_width(&style, 2);
//设置外边框颜色为蓝色
lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE));
//设置填充
lv_style_set_pad_all(&style, 10);

//设置文本样式之颜色：蓝色
lv_style_set_text_color(&style, lv_palette_main(LV_PALETTE_BLUE));
//设置文本样式之文字之间间距: 5
lv_style_set_text_letter_space(&style, 5);
//设置文本样式之行间距: 20
lv_style_set_text_line_space(&style, 20);
//设置文本样式下划线
lv_style_set_text_decor(&style, LV_TEXT_DECOR_UNDERLINE);

/*Create an object with the new style*/
lv_obj_t * obj = lv_label_create(lv_scr_act());
lv_obj_add_style(obj, &style, 0);
lv_label_set_text(obj, "Text of\n"
                        "a label");

lv_obj_center(obj);

使用效果如下：
在这里插入图片描述

LVGL之多样式的使用

使用示例：

// 创建一个属性style_base，并设置属性
static lv_style_t style_base;
lv_style_init(&style_base);
lv_style_set_bg_color(&style_base, lv_palette_main(LV_PALETTE_LIGHT_BLUE));
lv_style_set_border_color(&style_base, lv_palette_darken(LV_PALETTE_LIGHT_BLUE, 3));
lv_style_set_border_width(&style_base, 2);
lv_style_set_radius(&style_base, 10);
lv_style_set_shadow_width(&style_base, 10);
lv_style_set_shadow_ofs_y(&style_base, 5);
lv_style_set_shadow_opa(&style_base, LV_OPA_50);
lv_style_set_text_color(&style_base, lv_color_white());
lv_style_set_width(&style_base, 100);
lv_style_set_height(&style_base, LV_SIZE_CONTENT);

/*只设置与基础样式属性style_base不同的属性*/
static lv_style_t style_warning;
lv_style_init(&style_warning);
lv_style_set_bg_color(&style_warning, lv_palette_main(LV_PALETTE_YELLOW));
lv_style_set_border_color(&style_warning, lv_palette_darken(LV_PALETTE_YELLOW, 3));
lv_style_set_text_color(&style_warning, lv_palette_darken(LV_PALETTE_YELLOW, 4));

// 只使用基本样式创建一个对象
lv_obj_t * obj_base = lv_obj_create(lv_scr_act());
lv_obj_add_style(obj_base, &style_base, 0);
lv_obj_align(obj_base, LV_ALIGN_LEFT_MID, 20, 0);

//创建新标签，将标签Base加入新建基本样式对象中obj_base
lv_obj_t * label = lv_label_create(obj_base);
lv_label_set_text(label, "Base");
lv_obj_center(label);

// 创建另一个对象，同时使用基本样式style_base和另一个新增的样式style_warning
lv_obj_t * obj_warning = lv_obj_create(lv_scr_act());
lv_obj_add_style(obj_warning, &style_base, 0);
lv_obj_add_style(obj_warning, &style_warning, 0);
lv_obj_align(obj_warning, LV_ALIGN_RIGHT_MID, -20, 0);

//创建新标签，将标签Warning加入新建基本样式对象中obj_warning
label = lv_label_create(obj_warning);
lv_label_set_text(label, "Warning");
lv_obj_center(label);