lvgl 小部件样式篇

简介

样式设置是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);

效果如下：

点击后，效果如下：

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);

使用效果如下：

补充中

。。。