界面背景

1、界面纯色背景创建

创建背景纯色

void Home_Page_Create(void)

{

    lv_obj_t* bgk;

    bgk = lv_obj_create(lv_scr_act(), NULL);//创建对象

    lv_obj_clean_style_list(bgk, LV_OBJ_PART_MAIN); //清空对象风格

    lv_obj_set_style_local_bg_opa(bgk, LV_OBJ_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_100);//设置颜色覆盖度100%，数值越低，颜色越透。

    lv_obj_set_style_local_bg_color(bgk, LV_OBJ_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_GREEN);//设置背景颜色为绿色

    //省去下方两行代码，默认是从0,0处开始绘制

    lv_obj_set_x(bgk, 0);//设置X轴起点

    lv_obj_set_y(bgk, 0);//设置Y轴起点

    lv_obj_set_size(bgk, 800, 40);//设置覆盖大小

}

2、如何让纯色背景动起来

这里我们用到了LVGL自带的任务函数lv_task_create()。

 

static void bgk_anim(lv_task_t* t)
{
	static uint32_t x = 0;
	lv_obj_t* bg = t->user_data;
	x = !x;
	lv_obj_set_style_local_bg_color(bg, LV_OBJ_PART_MAIN, LV_STATE_DEFAULT, x?LV_COLOR_RED: LV_COLOR_GREEN);//设置背景颜色为绿色
}
void Home_Page_Create(void)
{
	lv_obj_t* bgk;
	bgk = lv_obj_create(lv_scr_act(), NULL);//创建对象
	lv_obj_clean_style_list(bgk, LV_OBJ_PART_MAIN); //清空对象风格
	lv_obj_set_style_local_bg_opa(bgk, LV_OBJ_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_100);//设置颜色覆盖度100%，数值越低，颜色越透。
	lv_obj_set_style_local_bg_color(bgk, LV_OBJ_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_GREEN);//设置背景颜色为绿色
	//省去下方两行代码，默认是从0,0处开始绘制
	lv_obj_set_x(bgk, 0);//设置X轴起点
	lv_obj_set_y(bgk, 0);//设置Y轴起点

	lv_obj_set_size(bgk, 800, 40);//设置覆盖大小
	lv_task_create(bgk_anim, 500, LV_TASK_PRIO_LOW, bgk);//创建任务 500ms一次
}

3、界面图片背景创建

想要美观的背景图可以试试哦！

void Home_Page_Create(void)
{
    lv_obj_t* bg_img;
	LV_IMG_DECLARE(picture); //声明图片
	bg_img = lv_img_create(lv_scr_act(), NULL);//创建一个图像对象
	lv_img_set_src(bg_img, &picture);//设置图片源
	lv_obj_align(bg_img, NULL, LV_ALIGN_IN_TOP_LEFT, 0, 0);//对齐
}

4、在背景上创建一个按键

有了背景，不知道如何在背景上创建对象？？

void Home_Page_Create(void)
{
	lv_obj_t* bg_img;
	LV_IMG_DECLARE(H_PIC_0); //声明图片
	LV_IMG_DECLARE(picture);
	bg_img = lv_img_create(lv_scr_act(), NULL); //创建一个图像对象
	lv_img_set_src(bg_img, &picture); //设置图片源
	lv_obj_align(bg_img, NULL, LV_ALIGN_IN_TOP_LEFT, 0, 0); //对齐
	static lv_style_t style;
	lv_style_init(&style);//对象风格初始化
	lv_style_set_image_recolor_opa(&style, LV_STATE_PRESSED, LV_OPA_30);//设置按下时的背景色深
	lv_style_set_image_recolor(&style, LV_STATE_PRESSED, LV_COLOR_GRAY);//设置按下时的背景色
	lv_obj_t* img1 = lv_imgbtn_create(lv_scr_act(), NULL);//创建图片按键
	lv_imgbtn_set_src(img1, LV_BTN_STATE_PRESSED, &H_PIC_0);//按下
	lv_imgbtn_set_src(img1, LV_BTN_STATE_RELEASED, &H_PIC_0);//抬起
	lv_obj_align(img1, NULL, LV_ALIGN_IN_TOP_LEFT, 30, 25);//左上角对齐
	lv_obj_add_style(img1, LV_IMGBTN_PART_MAIN, &style);
}