LVGL lv_style样式（6）

lv_style

每一个基础对象都会有一个lv_style样式，对于复杂些的对象，比如lv_btn按钮就会有多个样式，因为它是由多个基础对象组合而成。利用样式对对象进行重绘来达到UI设计效果，不同的样式来形成主题Theme，相关API在lv_obj_style_dec.h。

例子

lv_examples\src\lv_ex_style下有11个例子，其中第10个例子

/**
 * Using the transitions style properties
 过渡效果样式
 */
void lv_ex_style_10(void)
{
    static lv_style_t style;
    lv_style_init(&style);

    /*Set a background color and a radius*/
    lv_style_set_radius(&style, LV_STATE_DEFAULT, 5);/*设置背景圆角半径*/
    lv_style_set_bg_opa(&style, LV_STATE_DEFAULT, LV_OPA_COVER);/*设置背景透明度*/
	/*默认背景颜色：红色*/
    lv_style_set_bg_color(&style, LV_STATE_DEFAULT, LV_COLOR_RED);

    /*Set different background color in pressed state*/
	/*按下背景颜色：灰色*/
    lv_style_set_bg_color(&style, LV_STATE_PRESSED, LV_COLOR_GRAY);

    /*Set different transition time in default and pressed state
     *fast press, slower revert to default*/
	/*转到默认状态过渡动画时间*/
    lv_style_set_transition_time(&style, LV_STATE_DEFAULT, 500);
	/*转到按下状态过渡动画时间*/
    lv_style_set_transition_time(&style, LV_STATE_PRESSED, 200);

    /*Small delay to make transition more visible*/
	/*触发过渡动画延时时间*/
    lv_style_set_transition_delay(&style, LV_STATE_DEFAULT, 100);

    /*Add `bg_color` to transitioned properties*/
	/*用背景色来过渡，我也说不清楚*/
    lv_style_set_transition_prop_1(&style, LV_STATE_DEFAULT,  LV_STYLE_BG_COLOR);

    /*Create an object with the new style*/
    lv_obj_t * obj = lv_obj_create(lv_scr_act(), NULL);
	lv_obj_set_size(obj, 100, 100);
    lv_obj_add_style(obj, LV_OBJ_PART_MAIN, &style);/*基础对象只有一个主样式*/
    lv_obj_align(obj, NULL, LV_ALIGN_CENTER, 0, 0);
}

模拟效果如下，实际没有黄色圆圈点击效果

下面是对话框例子

lv_obj_t* dialog = NULL;
lv_obj_t* title_label, *cancel, *ok;
lv_obj_t* dialog_create(lv_obj_t* parent);
static void event_handler(lv_obj_t* obj, lv_event_t event)
{
	if (obj == title_label)
	{
		if (event == LV_EVENT_RELEASED)
		{
			if (dialog == NULL)
				dialog = dialog_create(lv_scr_act());
		}
	}
	else if (obj == cancel || obj == ok)
	{
		if (event == LV_EVENT_RELEASED /*|| event == LV_EVENT_PRESS_LOST*/)
		{
			if(dialog)
			lv_obj_del(dialog);//删除对话框
			dialog = NULL;
		}
	}
}

lv_obj_t* dialog_create(lv_obj_t* parent)
{
#define DIALOG_WIDTH 180/*对话框宽度*/
#define DIALOG_HEIGHT 150/*对话框高度*/
#define DIALOG_BOTTOM_HEIGHT 40/*对话框底部按钮高度*/
#define DIALOG_BOTTOM_PADDING 5/*按钮与对话框边距离*/

	/*1.创建带有半透明效果的灰色遮罩层*/
	lv_obj_t* gray_layer = lv_obj_create(parent, NULL);
	lv_obj_set_pos(gray_layer,0,0);
	lv_obj_set_size(gray_layer,lv_obj_get_width(parent), lv_obj_get_height(parent));

	static lv_style_t gray_layer_style;
	lv_style_init(&gray_layer_style);
	lv_style_set_bg_color(&gray_layer_style, LV_STATE_DEFAULT, LV_COLOR_SILVER);/*设置上部分背景色*/
	lv_style_set_bg_grad_color(&gray_layer_style, LV_STATE_DEFAULT, LV_COLOR_SILVER);/*设置下部分背景色*/
	lv_style_set_bg_opa(&gray_layer_style, LV_STATE_DEFAULT, LV_OPA_80);/*设置背景透明度*/
	lv_obj_add_style(gray_layer, LV_OBJ_PART_MAIN, &gray_layer_style);

	/*2.创建对话框上面背景色(黑色)*/
	//注意,为了保持控件的一体性,这里的父对象应该是传 gray_layer,而不是 parent
	lv_obj_t* top_bg = lv_obj_create(gray_layer, NULL);
	lv_obj_set_size(top_bg, DIALOG_WIDTH, DIALOG_HEIGHT);
	lv_obj_align(top_bg, NULL, LV_ALIGN_CENTER, 0, 0);//居中对齐

	static lv_style_t top_bg_style;
	lv_style_init(&top_bg_style);
	lv_style_set_bg_color(&top_bg_style, LV_STATE_DEFAULT,  LV_COLOR_MAKE(0x39, 0x3C, 0x4A));/*设置上部分背景色*/
	lv_style_set_bg_grad_color(&top_bg_style, LV_STATE_DEFAULT,  LV_COLOR_MAKE(0x39, 0x3C, 0x4A));/*设置下部分背景色*/
	lv_style_set_radius(&top_bg_style, LV_STATE_DEFAULT, 10);/*设置背景圆角半径*/
	lv_obj_add_style(top_bg, LV_OBJ_PART_MAIN, &top_bg_style);

	/*3.创建对话框下面背景色(白色)*/
	lv_obj_t* bottom_bg = lv_obj_create(gray_layer, NULL);
	lv_obj_set_size(bottom_bg, DIALOG_WIDTH, DIALOG_BOTTOM_HEIGHT);
	lv_obj_align(bottom_bg, top_bg, LV_ALIGN_IN_BOTTOM_MID, 0, 0);/*与top_bg对齐*/

	static lv_style_t bottom_bg_style;
	lv_style_init(&bottom_bg_style);
	lv_style_set_bg_color(&bottom_bg_style, LV_STATE_DEFAULT, LV_COLOR_WHITE);/*设置上部分背景色*/
	lv_style_set_bg_grad_color(&bottom_bg_style, LV_STATE_DEFAULT, LV_COLOR_WHITE);/*设置下部分背景色*/
	lv_obj_add_style(bottom_bg, LV_OBJ_PART_MAIN, &bottom_bg_style);

	/*4.创建对话框标题*/
	lv_obj_t* title = lv_label_create(gray_layer, NULL);
	lv_label_set_recolor(title, true);
	lv_label_set_text_static(title, "#ffffff Title#");
	lv_obj_align(title, top_bg, LV_ALIGN_IN_TOP_MID, 0, 10);

	/*5.创建对话框内容*/
	lv_obj_t* content = lv_label_create(gray_layer, NULL);
	lv_label_set_recolor(content, true);
	lv_label_set_text_fmt(content, "%s\n%s", "#ffffff This is a dialog#","#ffffff Do you like it?#");
	lv_obj_align(content, top_bg, LV_ALIGN_CENTER, 0, 0);

	/*6.创建取消按钮,先用 label 对象来模拟*/
	static lv_style_t cancel_style;
	lv_style_init(&cancel_style);
	lv_style_set_bg_opa(&cancel_style, LV_STATE_DEFAULT, LV_OPA_COVER);
	lv_style_set_bg_color(&cancel_style, LV_STATE_DEFAULT, LV_COLOR_WHITE);/*设置上部分背景色*/
	lv_style_set_border_width(&cancel_style, LV_STATE_DEFAULT, 1);//边框的宽度
	lv_style_set_border_color(&cancel_style, LV_STATE_DEFAULT, LV_COLOR_MAKE(0xBD, 0xBA, 0xBD));//边框的颜色
	lv_style_set_border_side(&cancel_style, LV_STATE_DEFAULT, LV_BORDER_SIDE_FULL);//四条边框全部绘制
	lv_style_set_pad_top(&cancel_style, LV_STATE_DEFAULT, 5);/*设置内边距*/
	lv_style_set_pad_bottom(&cancel_style, LV_STATE_DEFAULT, 5);
	//lv_style_set_text_color(&cancel_style, LV_STATE_DEFAULT, LV_COLOR_MAKE(0x63, 0x65, 0x63));

	cancel = lv_label_create(gray_layer, NULL);
	lv_obj_add_style(cancel, LV_LABEL_PART_MAIN, &cancel_style);
	//要想有固定的大小,必须得先设置好长文本模式
	lv_label_set_long_mode(cancel, LV_LABEL_LONG_CROP);
	//设置固定的大小
	lv_obj_set_size(cancel, (DIALOG_WIDTH - DIALOG_BOTTOM_PADDING * 4) / 2, DIALOG_BOTTOM_HEIGHT - DIALOG_BOTTOM_PADDING * 2);
	lv_label_set_recolor(cancel, true);
	lv_label_set_text(cancel, "#636563 Cancel#");//设置文本
	lv_label_set_align(cancel, LV_LABEL_ALIGN_CENTER);//设置文本居中对齐
	lv_obj_align(cancel, bottom_bg, LV_ALIGN_IN_LEFT_MID, DIALOG_BOTTOM_PADDING, 0);
	lv_obj_set_click(cancel, true);//使能点击
	lv_obj_set_event_cb(cancel, event_handler);//注册事件回调函数

	/*7.创建确定按钮,直接从 cancel 拷贝过来*/
	static lv_style_t ok_style;
	lv_style_init(&ok_style);
	lv_style_copy(&ok_style, &cancel_style);
	lv_style_set_bg_color(&ok_style, LV_STATE_DEFAULT, LV_COLOR_MAKE(0x31, 0xAA, 0xFF));/*设置上部分背景色*/
	lv_style_set_bg_grad_color(&ok_style, LV_STATE_DEFAULT, LV_COLOR_MAKE(0x31, 0xAA, 0xFF));/*设置下部分背景色*/
	lv_style_set_radius(&ok_style, LV_STATE_PRESSED, 10);
	lv_style_set_bg_opa(&ok_style, LV_STATE_PRESSED, LV_OPA_50);
	
	ok = lv_label_create(gray_layer, cancel);
	lv_obj_add_style(ok, LV_OBJ_PART_MAIN, &ok_style);
	lv_label_set_recolor(ok, true);
	lv_label_set_text(ok, "#ffffff Ok#");//设置文本
	lv_obj_align(ok, bottom_bg, LV_ALIGN_IN_RIGHT_MID, -DIALOG_BOTTOM_PADDING, 0);

	return gray_layer;
}

void lv_style_test(void)
{
	lv_obj_t* src = lv_scr_act();
	
	title_label = lv_label_create(src, NULL);
	lv_label_set_text_static(title_label, "click to open dialog");
	lv_obj_align(title_label, NULL, LV_ALIGN_IN_TOP_MID, 0, 20);
	lv_obj_set_click(title_label, true);
	lv_obj_set_event_cb(title_label, event_handler);
	dialog = dialog_create(src);//创建对话框
}