Lvgl widget styles

brief introduction

The style setting is LVGL in , To make a beautiful UI Interface is an indispensable and necessary element .

lvgl Style description

lvgl Style of size 、 Location and fill style attribute settings

Use code examples ：

static lv_style_t style;
lv_style_init(&style);
// Set the style fillet radius 
lv_style_set_radius(&style, 5);

// Set size style 
lv_style_set_width(&style, 150);
lv_style_set_height(&style, LV_SIZE_CONTENT);

// Set the fill pattern 
lv_style_set_pad_ver(&style, 20);
lv_style_set_pad_left(&style, 5);

// Set position style 
lv_style_set_x(&style, lv_pct(50));
lv_style_set_y(&style, 80);

/* Create an object using the new style */
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");

The effect is as follows ：

lvgl Style of Background color 、 Border color 、 The outer margin property is set

Example code ：

// Create a container 
static const lv_style_prop_t props[] = {
    LV_STYLE_BG_COLOR, LV_STYLE_BORDER_COLOR, LV_STYLE_BORDER_WIDTH, 0};

/*  A default style  *  Time delay 100ms start-up , Delay 200ms After that */
static lv_style_transition_dsc_t trans_def;
lv_style_transition_dsc_init(&trans_def, props, lv_anim_path_linear, 100, 200, NULL);

/*  A special style in the pressed state  *  Delay 500ms start-up ,  But do not delay the end */
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;
// Create styles 
lv_style_init(&style_def);
// Add a predetermined default state to the style style_def in 
lv_style_set_transition(&style_def, &trans_def);

static lv_style_t style_pr;
// Create styles 
lv_style_init(&style_pr);
// Style background color ： Red 
lv_style_set_bg_color(&style_pr, lv_palette_main(LV_PALETTE_RED));
// Style outer margin ：6pix
lv_style_set_border_width(&style_pr, 6);
// Style border color ： Blue 
lv_style_set_border_color(&style_pr, lv_palette_darken(LV_PALETTE_BLUE, 3));
// Add the scheduled press style to style_pr in 
lv_style_set_transition(&style_pr, &trans_pr);

/* Create an object , Used to make the style effective */
#if 0
// Common styles 
	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
// Create objects 
lv_obj_t * obj = lv_obj_create(lv_scr_act());
// take style_def Set as default style 
lv_obj_add_style(obj, &style_def, 0);
// take style_pr Set to press style 
lv_obj_add_style(obj, &style_pr, LV_STATE_PRESSED);

lv_obj_center(obj);

The effect is as follows ：

After clicking , The effect is as follows ：

lvgl Style of Text style attribute settings

Use code examples ：

// Create styles 
static lv_style_t style;
// Initialize style 
lv_style_init(&style);

// Set the background fillet radius to : 5
lv_style_set_radius(&style, 5);
// Set background transparency 
lv_style_set_bg_opa(&style, LV_OPA_COVER);
// Set the background color 
lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 2));
// Set the outer margin to : 2
lv_style_set_b：order_width(&style, 2);
// Set the outer border color to blue 
lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE));
// Set the fill 
lv_style_set_pad_all(&style, 10);

// Set the color of the text style ： Blue 
lv_style_set_text_color(&style, lv_palette_main(LV_PALETTE_BLUE));
// Set the spacing between text styles : 5
lv_style_set_text_letter_space(&style, 5);
// Set the line spacing of the text style : 20
lv_style_set_text_line_space(&style, 20);
// Set text style underline 
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);

The effect is as follows ：

In addition

...