LVGL8.2学习笔记

笔记主要记录LVGL控件基本的编程使用和相关的程序，并且在程序中对使用到的API函数进行简要注解（有些是个人的理解），以便后续根据实际项目所需直接套用对应的控件代码修改使用；本文主要参考的是正点原子的LVGL相关教程。

LVGL控件的基础知识

(1) C语言编写的LVGL以结构体的形式实现类似C++ “Class”的思想：

图中的子对象也可以作为父对象，如以lv_btn作为父对象，lv_label为子对象。

(2) 父子对象的默认关系

• 子对象会随着父对象移动，且移动时相对父对象的位置不变
• 当子对象的位置超出父对象的范围，则子对象超出的部分不会显示

LVGL基础对象

lv_obj_t *obj = lv_obj_create(lv_scr_act());

lv_scr_act()        /*以当前屏幕创建对象*/

scr_act_width()     /*获取活动屏幕的宽度*/
scr_act_height()    /*获取活动屏幕的宽度*/

LVGL控件的基本属性及相关函数

基本属性	作用
大小（size）	宽度和高度设置
位置（position）	设置控件的相对屏幕/父对象的位置，默认以左上角为原点，向下为Y轴，向右为X轴
对齐（alignment）	1.可设置子对象参照父对象对齐；2.一个对象参照另一个对象对齐
样式（styles）	设置控件的外观属性
事件（events）	控件的动作触发回调函数(事件)，在函数中进行相关的处理操作

(1) 大小（size）相关的API函数：

/*设置控件的宽度*/
lv_obj_set_width(obj, new_width);
/*设置高度*/
lv_obj_set_height(obj, new_height);
/*同时设置宽度、高度*/
lv_obj_set_size(obj, new_width, new_height);
/*获取当前活动屏幕宽高*/
lv_obj_get_width(lv_scr_act());
lv_obj_get_height(lv_scr_act());

(2) 位置（position）相关的API函数：

/*设置X坐标*/
lv_obj_set_x(obj, new_x);
/*设置Y轴坐标*/
lv_obj_set_y(obj, new_y);
/*同时设置X、Y轴坐标*/
lv_obj_set_pos(obj, new_x, new_y);

(3) 对齐（alignment）相关的API函数：

/*参照父对象对齐，一般用于子对象的在父对象的内部的相对位置设置*/
lv_obj_set_align(obj, align);
/*参照父对象对齐之后，再进行偏移*/
lv_obj_align(obj, align, x, y);
/*参照其他对象对齐（非父子关系），再进行偏移*/
lv_obj_align_to(obj_to_align, reference_obj, align, x, y);

对齐模式(align)的选择可参考下图中的相对位置；灰色方框内表示父子对象可选的对齐方式，灰色方框外表示非父子对象可选的对齐方式

(4) 样式（styles）相关的API函数：

/*自定义样式添加的基本流程；（可封装为一个函数）*/
/*-------------------------------------Start--------------------------------------*/
static lv_style_t style; 								/* 定义样式变量，需设置为静态或全局 */
lv_obj_t* obj = lv_obj_create(lv_scr_act());			/* 创建控件 */
lv_style_init(&style); 									/* 初始化样式 */
/**每个控件都有不同的样式属性**/
/*--(大小)Size--(位置)Position--(背景)Background--(轮廓)Outline--(边框)Border--(阴影)Shadow--其他--*/
/*可参考LVGL手册查找对应API，举例如下*/
lv_style_set_bg_color(&style, lv_color_hex(0xffffff)); 	/* 设置背景颜色 */
lv_obj_set_style_opa(obj,100,LV_STATE_DEFAULT);       /* 设置控件透明度 */
lv_obj_set_style_text_font(obj,&lv_font_montserrat_14,LV_STATE_DEFAULT); /*设置文本字体*/

lv_obj_t * obj = lv_obj_create(lv_scr_act()); 			/* 创建一个部件 */
lv_obj_add_style(obj, & style, LV_STATE_DEFAULT); 		/* 设置部件的样式 */
/*-------------------------------------End--------------------------------------*/

/*本地样式的添加*/
/*-------------------------------------Start--------------------------------------*/
lv_obj_t * obj = lv_obj_create(lv_scr_act()); 						        /* 创建部件 */
lv_obj_set_style_bg_color(obj, lv_color_hex(0xffffff),LV_STATE_DEFAULT);	/* 设置部件的样式 */

/*-------------------------------------End--------------------------------------*/


/*--------------------------------------------------------------------------------*/
/*--------------------------控件在什么状态下使样式生效---------------------------*/
enum {

    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,		 /* 禁用状态 */
    …
};
/*--------------------------------------------------------------------------------*/

也可以单独设置控件的各个组成部分的样式，例如滑块的组成部分，可单独设置样式。

(5) 事件（events）相关的API函数：

/*****不同的事件类型共用一个事件回调函数******/
static void event_cb( lv_event_t *e )
{
    lv_event_code_t   code = lv_event_get_code(e);	 /* 第一步：获取事件类型 */
	if ( code == LV_EVENT_CLICKED )				     /* 第二步：判断事件类型 */
	{
        		printf(“事件类型: 按下后释放\r\n”);	 /* 第三步：执行相应操作 */
	}
	else if ( code == LV_EVENT_LONG_PRESSED)
	{
        		printf(“事件类型:按下（长按）\r\n”);	
	}
}

/*****不同的部件共用一个事件回调函数******/
static void event_cb( lv_event_t *e )
{
	lv_obj_t  *target = lv_event_get_target(e); 		 /* 第一步：获取触发事件的部件 */
	if ( target == parent_obj )			      			 /* 第二步：判断触发事件的部件 */
	{
        		printf(“父对象触发事件 \r\n”);	 		 /* 第三步：执行相应操作 */
	}
	else if ( target == child_obj )
	{
        		printf(“子对象触发事件 \r\n”);	
	}
}

//在控件创建时注册回调函数，例如
lv_obj_t* btn = lv_btn_create(lv_scr_act());
lv_obj_add_event_cb(btn,event_cb,LV_EVENT_LONG_PRESSED,NULL);

--------------------------------------------控件的使用---------------------------------------------

(一)标签控件(label)

组成部分	编程对应
主体	LV_PART_MAIN
滚动条	LV_PART_SCROLLBAR
选中的文本	LV_PART_SELECTED

1. 创建标签

lv_obj_t* label = lv_label_create(parent); /*parent为标签以什么作为父类*/

2. 标签文本设置

/*直接设置文本，文本由内存动态分配*/
lv_label_set_text(label, "Text");
/*设置文本，文本存放在指定缓存区，慎用！！！*/
lv_label_set_text_static( label,"Text" );
/*格式化显示文本，类似printf,可用于事件更新显示*/
lv_label_set_text_fmt( label, “Value: %d”, 50 ) ;

3. 文本样式设置

/*背景颜色设置，由于标签默认的背景透明度为最大，因此要显示标签背景还需设置对应的透明度*/
lv_obj_set_style_bg_color( label, lv_color_hex(0xffe1d4), LV_STATE_DEFAULT);
lv_obj_set_style_opa(label,100,LV_STATE_DEFAULT);
/*字体大小设置*/
lv_obj_set_style_text_font( label, &lv_font_montserrat_30, LV_STATE_DEFAULT);
/*文本颜色设置*/
lv_obj_set_style_text_color( label, lv_color_hex(0xf7b37b), LV_STATE_DEFAULT);
/*设置个别文本的字体颜色*/
lv_label_set_recolor( label, true ); /*开启重新着色功能*/
lv_label_set_text( label, "hallo #1E90FF lvgl# " ); /*单独设置颜色*/

• 设置个别文本的字体颜色效果：

• 若需要更改字体可在lv_conf.h修改如下宏定义：
  

4. 文本超出部件大小

(1). 若设置了部件大小lv_obj_set_size( )则文本超出部分会被裁剪掉；若没有限定标签部件大小，则自动扩展为文本大小。
(2).设置长文本模式

lv_label_set_long_mode(label,LV_LABEL_LONG_...);
/*对应可选的长文本模式*/
enum {
		/*默认模式，如果部件大小固定，超出文本被裁剪*/
	    LV_LABEL_LONG_WRAP,  /**< Keep the object width, wrap the too long lines and expand the object height*/
	    /*文本最下面超出字符将被替换为...*/
	    LV_LABEL_LONG_DOT,   /**< Keep the size and write dots at the end if the text is too long*/
	    /*来回滚动*/
	    LV_LABEL_LONG_SCROLL,   /**< Keep the size and roll the text back and forth*/
	    /*循环滚动*/
	    LV_LABEL_LONG_SCROLL_CIRCULAR,  /**< Keep the size and roll the text circularly*/
	    /*直接剪切掉外面的文本部分*/
	    LV_LABEL_LONG_CLIP,     /**< Keep the size and clip the text out of it*/
   };

(二)按钮控件(Button)

组成部分	编程对应
主体	LV_PART_MAIN

1.按钮创建及样式配置

 lv_obj_t  *btn;				 /* 创建全局标签结构体 */	
/*****多个按钮控件共用同一个回调函数*****/
static void my_event_cb(lv_event_t *e)
{
	lv_obj_t *target = lv_event_get_target();   /*获取触发源*/
	if(target == /*触发控件 btn1*/ )
	{
 	   /***事件处理代码***/
	}
	else if (target ==/*触发控件 btn2*/)
	{
		/***事件处理代码***/
	}
	//...
}
static void Btn_Create()
{
 	lv_obj_t   *btn  = lv_btn_create( parent );				            /* 创建标签对象 */
	lv_obj_set_size( btn, 100, 50 );								    /* 设置大小 */	
	lv_obj_set_align( btn, LV_ALIGN_CENTER );						    /* 设置对齐方式 */
	lv_obj_set_style_bg_color( btn, lv_color_hex(0xffe1d4), LV_STATE_PRESSED );    /* 设置背景颜色 */
	
	lv_obj_add_flag( btn, LV_OBJ_FLAG_CHECKABLE );	/* 开启状态切换，类似于自锁按钮一样，可保持按下后的状态 */
	lv_obj_add_event_cb( btn, my_event_cb, LV_EVENT_VALUE_CHANGED,NULL );	    /* 添加事件 注：要使用LV_EVENT_VALUE_CHANGED事件，就必须开启状态切换*/
}

(三)开关控件(Switch)

组成部分	编程对应
主体	LV_PART_MAIN
手柄	LV_PART_KNOB
指示器	LV_PART_INDICATOR

1.开关创建及样式配置

 lv_obj_t  *switch1;				 /* 创建全局标签结构体 */	
 lv_obj_t  *switch2;				 /* 创建全局标签结构体 */	
 
/*****多个按钮控件共用同一个回调函数*****/
static void my_event_cb(lv_event_t *e)
{
	lv_obj_t *target = lv_event_get_target();   /*获取触发源*/
	if(target == /*触发控件 switch1*/ )
	{
 	   /***事件处理代码***/
 	   if(lv_obj_has_state(switch1, LV_STATE_CHECKED)==1) /*判断开关状态*/
 	   {
 	   	 	lv_obj_clear_state(switch2, LV_STATE_CHECKED);	/* 清除开关2的状态*/
 	   }
	}
	else if (target ==/*触发控件 switch2*/)
	{
		/***事件处理代码***/
		if(lv_obj_has_state(switch2, LV_STATE_CHECKED)==1) /*判断开关状态*/
 	   {
 	    	lv_obj_clear_state(switch1, LV_STATE_CHECKED);	/* 清除开关1的状态*/
 	   }
	}
	//...
}
static void Btn_Create()
{
	switch1  = lv_switch_create( parent );      /* 创建开关对象 */
	switch2  = lv_switch_create( parent );      /* 创建开关对象 */
	/*设置指示器颜色时需要注意添加状态，否则指示器会被主体覆盖看不到效果*/
	lv_obj_set_style_bg_color(switch1,lv_color_hex(0xFF0000),LV_STATE_CHECKED|LV_PART_INDICATOR);
	lv_obj_add_event_cb(switch1,my_event_cb,LV_EVENT_VALUE_CHANGED,NULL);  /* 注册回调函数 */
}

2.通过代码设定开关状态

    /**/	

	lv_obj_add_state(switch1, LV_STATE_CHECKED | LV_STATE_DISABLED);	/* 添加状态：默认打开且不可修改 */
	lv_obj_clear_state(switch1, LV_STATE_CHECKED | LV_STATE_DISABLED);	/* 清除开关的状态*/

3.开关状态获取

	lv_obj_has_state(switch1, LV_STATE_CHECKED)					 /* 返回值：bool类型，开 :1；关: 0 */

(四)复选框控件(CheckBox)

组成部分	编程对应
主体	LV_PART_MAIN
勾选框	LV_PART_INDICATOR

1.复选框创建及文本设置

lv_obj_t  *checkbox;				/* 创建全局复选框结构体 */

static void my_event_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    if(code == LV_EVENT_VALUE_CHANGED)
    {
        /*勾选了进行处理*/
    }
    else 
    {
        /*取消勾选进行处理*/
    }
}

static void CheckBox_Create()
{
	checkbox  = lv_checkbox_create (parent );				/* 创建复选框 */
	lv_checkbox_set_text( checkbox, "remember the password" );			/* 设置文本内容 */
	lv_obj_set_align(checkbox,LV_ALIGN_CENTER);
	lv_obj_set_style_pad_column( checkbox, 20, LV_STATE_DEFAULT ); 		/* 设置文本和勾选框的间距 */
	lv_obj_add_event_cb(checkbox  ,my_event_cb,LV_EVENT_VALUE_CHANGED,NULL);
}

2.复选框状态设置

	lv_obj_add_state(checkbox, LV_STATE_CHECKED | LV_STATE_DISABLED);	/* 添加状态：默认选中且不可修改 */
	lv_obj_clear_state(checkbox, LV_STATE_CHECKED | LV_STATE_DISABLED);	/* 清除复选框的状态 */

3.复选框状态获取

	lv_obj_has_state(checkbox, LV_STATE_CHECKED);					 /* 返回值：1，选中； 0，非选中 */

(五)进度条控件(Bar)

组成部分	编程对应
主体	LV_PART_MAIN
指示器	LV_PART_INDICATOR

1.进度条创建

static void CheckBox_Create()
{
	lv_obj_t  *bar  = lv_bar_create ( parent );					/* 创建进度条部件 */
	lv_obj_set_size( bar, 400, 20 );							/* 设置大小 */
	lv_obj_set_align(bar,LV_ALIGN_CENTER);						/* 设置位置 */
	lv_bar_set_range( bar, -100, 100 );					    	/* 设置范围值 */
	lv_obj_set_style_anim_time( bar, 500, LV_STATE_DEFAULT );	/* 动画设置必须放在当前值设置之前 */
	lv_bar_set_value( bar, 50, LV_ANIM_ON );					/* 设置当前值 */
}
/*几点注意事项
	1.当进度条高度大于宽度时，其方向变为垂直。
	2.动画时间设置需要放在当前值设置之前 ，否则看不到动画效果。
	3.动画时间指的是旧值刷新到新值的绘图时间，并不是现实中当前值变化所需的时间。
*/

2.进度条模式、起始值设置

enum {
    LV_BAR_MODE_NORMAL,			/* 默认模式 */
    LV_BAR_MODE_SYMMETRICAL,	/* 从零值绘制到当前值（当前值可以小于0）,该模式不能设置起始值 */
    LV_BAR_MODE_RANGE			/* 允许设置起始值，但起始值必须小于当前值 */
};

lv_bar_set_mode( bar, LV_BAR_MODE_RANGE );			/* 设置模式 */
lv_bar_set_start_value( bar, -50, LV_ANIM_OFF );	/* 设置起始值 */

3.进度条定时器回调测试

uint16_t val=0;
lv_obj_t *bar;
lv_label_t *label1;
static void my_timer_cb(lv_timer_t *timer)
{
    if(val<100)
    {
        val++;
        lv_bar_set_value(bar,val,LV_ANIM_ON);
        lv_label_set_text_fmt(label1,"%d %%",lv_bar_get_value(bar));
    }
    else
    {
        lv_label_set_text(label1,"Finished");
    }
}

void MY_GUI()
{
    bar = lv_bar_create(lv_scr_act());
    lv_obj_set_align(bar,LV_ALIGN_CENTER);
    lv_obj_set_size(bar,200,20);
    lv_bar_set_range(bar,0,100);
    lv_obj_set_style_opa(bar,50,LV_STATE_SCROLLED    	);

    label1 = lv_label_create(bar);
    lv_obj_set_style_text_color(label1,lv_color_hex(0x56121c),LV_STATE_DEFAULT);
 	lv_label_set_text(label1, "0%");
    lv_obj_center(label1);

    lv_obj_set_style_anim_time(bar,500,LV_STATE_DEFAULT);/*动画效果一定要放在bar值的设置之前*/

   // lv_bar_set_value(bar,0,LV_ANIM_ON);

    lv_bar_set_mode(bar,LV_BAR_MODE_RANGE);
    lv_bar_set_start_value(bar,0,LV_ANIM_OFF);
    lv_timer_create(my_timer_cb,50,NULL);
}

–测试效果图–

(六)加载器控件(Spinner)

组成部分	编程对应
主体	LV_PART_MAIN
指示器	LV_PART_INDICATOR
手柄	LV_PART_KNOB

static void Spinner_Create()
{
    lv_obj_t  *spinner  = lv_spinner_create( lv_scr_act(), 1000, 30 );     /* 这里长度设置太小会有问题 */
    lv_obj_align(spinner,LV_ALIGN_CENTER,0,0);
    lv_obj_set_size(spinner,50,50);
    lv_obj_set_style_arc_color( spinner, lv_color_hex(0x00BFFF), LV_PART_MAIN ); 	  /* 设置主体圆弧颜色 */
    lv_obj_set_style_arc_color( spinner, lv_color_hex(0xFFFACD), LV_PART_INDICATOR ); /* 设置指示器圆弧颜色 */
    lv_obj_set_style_arc_width( spinner, 5, LV_PART_MAIN );					          /* 设置主体圆弧宽度 */
    lv_obj_set_style_arc_width( spinner, 5., LV_PART_INDICATOR );				      /* 设置指示器圆弧宽度 */
}

(七)LED控件(Led)

组成部分	编程对应
主体	LV_PART_MAIN

- LED部件可进行点击.

1.LED创建

static void Led_Create()
{
    lv_obj_t *led= lv_led_create(lv_scr_act());
    lv_obj_set_size(led,50,50);
    lv_obj_set_align(led,LV_ALIGN_CENTER);
    lv_led_set_color( led, lv_color_hex(0x00BFFF) ); /* 设置LED颜色 */
    lv_led_set_brightness( led, 255 );				 /* 设置LED亮度，范围0~255，感觉没什么变化*/
}

2.LED状态切换

    lv_led_on( led );				    			/* 打开LED（设置亮度为255）*/
    lv_led_off( led );		    				    /* 关闭LED */
    lv_led_toggle( led );							/* 翻转LED状态 */

(八)列表条控件(List)

组成部分	编程对应
主体	LV_PART_MAIN
滚动条	LV_PART_SCROLLBAR

1.列表的创建

lv_obj_t   *list;

static void my_event_cb_1(lv_event_t * e)
{
    lv_obj_t *target = lv_event_get_target(e);
    printf("%s\n",lv_list_get_btn_text(list,target));    /*获取列表按钮文本*/
	lv_obj_add_state(target,LV_STATE_FOCUS_KEY);         /*添加选中-聚焦*/
}
void MY_GUI()
{

    list = lv_list_create( lv_scr_act() );               /*创建列表*/
    lv_list_add_text( list, "Settings" );                /* 添加列表文本 */
    lv_obj_t  *list_btn = lv_list_add_btn( list, LV_SYMBOL_WIFI, "WLAN");  /*添加列表按键*/
    lv_obj_add_event_cb(list_btn,my_event_cb_1,LV_EVENT_CLICKED,NULL);     /*注册回调函数*/
    lv_obj_t  *list_btn1 = lv_list_add_btn( list, LV_SYMBOL_GPS, "GPS");
    lv_obj_add_event_cb(list_btn1,my_event_cb_1,LV_EVENT_CLICKED,NULL);
    lv_obj_t  *list_btn2 = lv_list_add_btn( list, LV_SYMBOL_BATTERY_1, "BATTERY");
    lv_obj_add_event_cb(list_btn2,my_event_cb_1,LV_EVENT_CLICKED,NULL);
}

2.LVGL自带的图标

----------------------官网LVGL图标预览–>Overview–>Fonts------------------

(九)下拉列表控件(Dropdown)

组成部分	编程对应
按钮	BUTTON
列表	LIST

1.下拉列表的创建

static void my_event_cb_2(lv_event_t * e)
{
    lv_obj_t *target = lv_event_get_target(e);
    printf("%d",lv_dropdown_get_selected(target)); /*获取下拉列表选中项的索引，并打印*/

    char buf[10];
    lv_dropdown_get_selected_str(target,buf,10);   /*获取下拉列表选中项的文本，并打印*/
    printf("%s\n",buf);

}

void MY_GUI()
{
    lv_obj_t  *dd = lv_dropdown_create(  lv_scr_act() );   /* 创建下拉列表 */

    lv_dropdown_set_options( dd, "a\nb\nc\nd");	   		   /* 设置选项 */
    //lv_dropdown_set_options_static( dd, "a\nb\nc\nd ");  /* 设置选项 （静态）*/
    lv_dropdown_add_option( dd, "e", 4);			       /* 添加选项，索引从0开始，注意若使用这个添加，就不能使用上面静态添加函数 */
    lv_dropdown_set_selected(dd, 1);					   /* 设置选中的选项，注意：索引从0开始 */
    lv_dropdown_set_dir(dd,LV_DIR_NONE);                   /* 设置列表的展开方式*/
    lv_dropdown_set_symbol(dd,LV_SYMBOL_BELL);             /* 设置列表的图标样式*/

    lv_obj_add_event_cb(dd,my_event_cb_2,LV_EVENT_VALUE_CHANGED,NULL); /*注册回调函数*/
}

(十)滚轮控件(Roller)

组成部分	编程对应
按钮	LV_PART_MAIN
选项框	LV_PART_SELECTED

1.滚轮的创建

static void my_event_cb_3(lv_event_t * e)
{
    lv_obj_t *target  = lv_event_get_target(e);
    printf("%d",lv_roller_get_selected(target));/*获取滚轮选中项的索引，并打印*/

    char buf[10];
    lv_roller_get_selected_str(target,buf,10);  /*获取滚轮选中项的文本，并打印*/
    printf("%s\n",buf);

    /*可通过其他事件触发，锁定滚轮为不可选模式,操作如下*/
    /*
        if(/触发条件/)
        {
            lv_obj_add_state(roller,LV_STATE_DISABLED);
        }
        else
        {
            lv_obj_clear_state(roller,LV_STATE_DISABLED);
        }
    */
}

void MY_GUI()
{
    lv_obj_t *roller = lv_roller_create(lv_scr_act());                /* 创建滚轮 */
    lv_obj_set_style_text_line_space(roller,30,LV_STATE_DEFAULT);     /* 设置选项间隔 */
    lv_roller_set_options(roller,"a\nb\nc\nd",LV_ROLLER_MODE_NORMAL); /* 设置滚轮选项内容、模式 */
    lv_roller_set_selected(roller,3,LV_ANIM_OFF);                      /* 设置所选项(不设置默认首项)，注意：索引从0开始，第三个参数为动画是否开启*/
    lv_roller_set_visible_row_count(roller,3);                        /* 设置可见的行数 */
    lv_obj_add_event_cb(roller,my_event_cb_3,LV_EVENT_VALUE_CHANGED,NULL);/*注册回调函数*/
}

(十一)滑块控件(Slider)

组成部分	编程对应
主体	LV_PART_MAIN
指示器	LV_PART_INDICATOR
拖动旋钮	LV_PART_KNOB

1.滑块的创建

static void my_event_cb_4(lv_event_t * e)
{
    lv_obj_t *target  = lv_event_get_target(e); /* 获取触发源 */
    lv_event_code_t code  = lv_event_get_code(e);     /* 获取事件类型 */

    if(code == LV_EVENT_VALUE_CHANGED)
    {
        /*获取滑块的左值和当前值，并打印*/
        printf("Left:%d   Right:%d\n",lv_slider_get_left_value(target),lv_slider_get_value(target));
    }
}
void MY_GUI()
{
    lv_obj_t   *slider = lv_slider_create( lv_scr_act() );
    lv_obj_center(slider);
    lv_obj_set_size(slider, 200, 10);						/* 高度<宽度时，滑块为横向 */
//    lv_obj_set_size(slider, 20, 200);						/* 高度>宽度时，滑块为纵向 */
    lv_slider_set_range(slider, -100, 100);					/* 设置范围值,默认范围0-100 */
    lv_slider_set_mode(slider,LV_SLIDER_MODE_RANGE);        /* 设置滑块的三种模式，模式设置要在值设置之前，不然事件回调获取值会有问题 */
    lv_slider_set_value(slider, 50, LV_ANIM_OFF);			/* 设置当前值 */
    lv_slider_set_left_value(slider, -50, LV_ANIM_OFF);	    /* 设置左值 */

    lv_obj_add_event_cb(slider,my_event_cb_4,LV_EVENT_VALUE_CHANGED,NULL);/*注册回调函数*/
}

—加粗样式滑块的三种模式图解—

(十二)圆弧控件(Arc)

组成部分	编程对应
背景弧	LV_PART_MAIN
前景弧(指示器)	LV_PART_INDICATOR
拖动旋钮	LV_PART_KNOB

1.圆弧的创建

static void my_event_cb_5(lv_event_t * e)
{
    lv_obj_t *target  = lv_event_get_target(e);       /* 获取触发源 */
    lv_event_code_t code  = lv_event_get_code(e);     /* 获取事件类型 */

    if(code == LV_EVENT_VALUE_CHANGED)
    {
        /*获取滑块的左值和当前值，并打印*/
        printf("Value:%d \n",lv_arc_get_value(target));

    }
}
void MY_GUI()
{
    lv_obj_t *arc = lv_arc_create(lv_scr_act());
    lv_obj_center(arc);
    lv_arc_set_range(arc,0,200);             /* 设置范围值 */
    lv_arc_set_value(arc,100);               /* 设置当前值，和前景弧不要混用，会出错 */
    lv_arc_set_bg_angles(arc,135,45);        /* 设置背景弧 ，该API要在前景弧设置之前*/
    lv_obj_set_style_arc_color( arc, lv_color_hex(0xEEE9E9), LV_PART_KNOB ); /* 设置旋钮颜色 */
    lv_arc_set_mode(arc,LV_ARC_MODE_SYMMETRICAL);  /* 模式设置 */

//    lv_arc_set_rotation(arc,180);           /* 旋转圆弧的角度 */
    lv_obj_remove_style(arc,NULL,LV_PART_KNOB);
//    lv_arc_set_change_rate(arc,90);          /* 绘制速率 越大越快*/
    lv_obj_add_event_cb(arc,my_event_cb_5,LV_EVENT_VALUE_CHANGED,NULL);/*注册回调函数*/
}

—圆弧角度设置图解—

(十三)线条控件(Line)

组成部分	编程对应
主体	LV_PART_MAIN

1.线条的创建

static lv_point_t line_points[]={{10,10},{110,20},{100,60},{110,70},{10,80},{10,10}};

void MY_GUI()
{
    lv_obj_t *line = lv_line_create(lv_scr_act());
    lv_line_set_points(line,line_points,6);                 /* 设置线条的绘制坐标点 */
    lv_obj_set_style_line_width(line,8,LV_PART_MAIN);       /* 设置线条的宽度 */
    lv_obj_set_style_line_rounded(line,true,LV_PART_MAIN);  /* 设置拐角为圆角 */
//    lv_line_set_y_invert(line,true);                        /* 设置按y轴反转 */
}

(十四)图片控件(Img)

组成部分	编程对应
主体	LV_PART_MAIN

1.图片的创建

LV_IMG_DECLARE(NCHU);  /* 声明图片 */

void MY_GUI()
{
    lv_obj_t *img = lv_img_create(lv_scr_act());
//    lv_obj_center(img);
    lv_img_set_src(img,&NCHU);
    lv_obj_center(img);

//    lv_img_set_offset_x(img,100);  /*设置图片的x偏移*/
//    lv_img_set_offset_y(img,50);   /*设置图片的y偏移*/

//    lv_obj_set_style_img_recolor(img, lv_color_hex(0xffe1d2), LV_PART_MAIN); /*图片重新着色，需要配合透明度设置*/
//    lv_obj_set_style_img_recolor_opa(img, 150, LV_PART_MAIN);     /*图片透明度设置*/

//    lv_img_set_zoom(img, 128);		/* 图片的缩放：128缩小1/2；256原尺寸；512放大2倍 */
//    lv_img_set_angle(img, 900);		/* 顺时针方向旋转90°*/

    lv_obj_update_layout(img);		/* 更新图片布局信息，要在设置中心点之前调用 */
    lv_img_set_pivot(img, 0, 0);    /* 设置中心点,相对于原照片的位置 */
}

----LVGL图片的数组可以使用LVGL官网TOOL->Image Converter(加载可能有点慢！！！)----

Color format	含义
CF_TRUE_COLOR	存储RGB颜色
CF_TRUE_COLOR_ALPHA	在RGB的基础上增加了不透明度

注：如果使用vscode+ESP_IDF开发ESP32，将生成的图片C数组添加到工程后，要进行full clean，再进行build；否则会出现图片数组未定义的报错！

(十五)色环条控件(colorwheel)

组成部分	编程对应
主体	LV_PART_MAIN
旋钮	LV_PART_KNOB

1.色环的创建

static lv_obj_t *obj ;
static void my_event_cb_6(lv_event_t * e)
{
    lv_obj_t *target = lv_event_get_target(e);
    lv_obj_set_style_bg_color(obj,lv_colorwheel_get_rgb(target),LV_PART_MAIN);
}

void MY_GUI()
{
    lv_obj_t *cw = lv_colorwheel_create(lv_scr_act(),false); /*创建色环，第二个参数为旋钮颜色跟随设置*/
    lv_obj_center(cw);

    lv_obj_set_style_arc_width(cw,20,LV_PART_MAIN);    /* 宽度设置 */
    lv_colorwheel_set_rgb(cw,lv_color_hex(0x00FF00));  /* 设置颜色 */

    lv_obj_add_event_cb(cw,my_event_cb_6,LV_EVENT_VALUE_CHANGED,NULL);/*注册回调函数*/

    obj = lv_obj_create(lv_scr_act());
    lv_obj_center(obj);
    lv_obj_set_style_bg_color(obj,lv_colorwheel_get_rgb(cw),LV_PART_MAIN);

//    lv_colorwheel_set_mode(cw,LV_COLORWHEEL_MODE_SATURATION);  /* 色相、饱和度、透明度设置，长按时有BUG导致模式乱切换，不建议 */
    lv_colorwheel_set_mode_fixed(cw,LV_COLORWHEEL_MODE_SATURATION); /* 固定色环模式 */
}

(十六)按钮矩阵控件(Btnmatrix)

组成部分	编程对应
主体	LV_PART_MAIN
按钮	LV_PART_ITEMS

1.按钮矩阵的创建（示例）

lv_obj_t *label_input;
LV_IMG_DECLARE(user);

static lv_point_t points[]={{0,20},{0,240}};

/*设置按钮数量和文本*/
static const char *map[] = { "1", "2", "3", "\n",
                              "4", "5", "6", "\n",
                              "7", "8", "9", "\n",
                              "#", "0", "%", "" };	/* 定义按钮数组，最后一个元素必须为空 */

static void my_event_cb_7(lv_event_t * e)
{
    uint8_t id; /*索引*/
    lv_obj_t *target = lv_event_get_target(e);      /* 获取触发源 */
    lv_event_code_t code = lv_event_get_code(e);    /* 获取触发事件 */

    if(code == LV_EVENT_PRESSED)
    {
        id = lv_btnmatrix_get_selected_btn(target);
        lv_label_set_text(label_input,lv_btnmatrix_get_btn_text(target,id));
        lv_obj_align(label_input,LV_ALIGN_CENTER,0,0);
    }
}

void MY_GUI()
{
    /*用户图标的创建*/
    lv_obj_t *img = lv_img_create(lv_scr_act());               /*创建图片对象*/
    lv_img_set_src(img,&user);                                 /*设置图片来源*/
    lv_img_set_zoom(img,128);                                  /*设置图片缩放比*/
    lv_obj_align(img,LV_ALIGN_CENTER,-140,-60);                  /*设置图片位置*/
    lv_obj_set_style_img_recolor(img,lv_color_hex(0xf2f2f2),0);/*设置重染色*/
    lv_obj_set_style_img_recolor_opa(img,100,0);               /*设置染色透明度*/

    /*用户标签的创建*/
    lv_obj_t *label = lv_label_create(lv_scr_act());                      /*创建标签对象*/
    lv_label_set_text(label,"USER");                                      /*设置标签文本*/
    lv_obj_set_style_text_font(label,&lv_font_montserrat_30,LV_PART_MAIN);/*设置标签文本字体*/
    lv_obj_set_style_text_align(label,LV_TEXT_ALIGN_CENTER,LV_PART_MAIN); /*设置标签内容位置*/
    lv_obj_align_to(label,img,LV_ALIGN_OUT_BOTTOM_MID,0,-20);              /*设置标签位置*/

    /*输入框背景的创建*/
    lv_obj_t *obj_input = lv_obj_create(lv_scr_act());                  /*创建基础对象*/
    lv_obj_set_size(obj_input,160,30);                                  /*设置大小*/
    lv_obj_align_to(obj_input,label,LV_ALIGN_OUT_BOTTOM_MID,0,16);      /*设置对齐位置*/
    lv_obj_set_style_bg_color(obj_input,lv_color_hex(0xcccccc),0);      /*设置背景颜色*/
    lv_obj_set_style_bg_opa(obj_input,150,0);                           /*设置透明度*/
    lv_obj_set_style_border_width(obj_input,0,0);                       /*去除边框*/
    lv_obj_set_style_radius(obj_input,20,0);                            /*设置圆角*/
    lv_obj_remove_style(obj_input,NULL,LV_PART_SCROLLBAR);              /*移除滚动模式*/

    /*输入框标签，用作显示*/
    label_input = lv_label_create(obj_input);                         /*创建标签对象*/
    lv_label_set_text(label_input," ");                                         /*设置文本为空*/
    lv_obj_set_style_text_font(label_input,&lv_font_montserrat_30,LV_PART_MAIN);/*设置字体*/
    lv_obj_set_style_text_align(label_input,LV_TEXT_ALIGN_CENTER,LV_PART_MAIN); /*设置标签内容位置*/
    lv_obj_align_to(label_input,img,LV_ALIGN_OUT_BOTTOM_MID,0,10);              /*设置标签位置*/

    /*分隔线*/
    lv_obj_t *line = lv_line_create(lv_scr_act());              /*创建线*/
    lv_line_set_points(line,points,2);                          /*画线坐标*/
    lv_obj_align(line,LV_ALIGN_CENTER,0,-20);                   /*线位置*/
    lv_obj_set_style_line_color(line,lv_color_hex(0xcdcdcd),0); /*线颜色*/


    /*按钮矩阵*/
    lv_obj_t  *btnm = lv_btnmatrix_create(lv_scr_act());/* 创建按钮矩阵 */
    lv_obj_set_size(btnm,220,280);                      /* 设置大小 */
    lv_btnmatrix_set_map(btnm, map);					/* 设置按钮 */
    lv_obj_align(btnm,LV_ALIGN_RIGHT_MID,0,0);          /* 位置设置 */
    lv_obj_set_style_text_font(btnm,&lv_font_montserrat_30,LV_PART_ITEMS);/* 按钮显示字体设置 */

    /*优化矩阵界面*/
    lv_obj_set_style_border_width(btnm,0,LV_PART_MAIN); /* 去除主体边框 */
    lv_obj_set_style_bg_opa(btnm,0,LV_PART_MAIN);       /* 设置主体背景透明度 */
    lv_obj_set_style_bg_opa(btnm,0,LV_PART_ITEMS);      /* 设置按钮背景透明度 */
    lv_obj_set_style_shadow_opa(btnm,0,LV_PART_ITEMS);  /* 去除按钮阴影 */
    lv_obj_add_event_cb(btnm,my_event_cb_7,LV_EVENT_PRESSED,NULL);/* 按钮矩阵回调 */

//    lv_btnmatrix_set_btn_width(btnm,2,2);                                                      /* 索引 (id) 从0开始，宽度1~7 ( 默认为1 ) */
//    lv_btnmatrix_set_one_checked(btnm,true);                                                   /*设置单次选中属性*/
//    lv_btnmatrix_set_btn_ctrl(btnm, 0, LV_BTNMATRIX_CTRL_RECOLOR);	                         /* 设置单个按钮属性 */
//    lv_btnmatrix_clear_btn_ctrl(btnm, id, LV_BTNMATRIX_CTRL_...);	                             /* 清除单个按钮属性 */
//    lv_btnmatrix_set_btn_ctrl_all(btnm, LV_BTNMATRIX_CTRL_CHECKABLE|LV_BTNMATRIX_CTRL_RECOLOR);/* 设置所有按钮属性 */
//    lv_btnmatrix_clear_btn_ctrl_all(btnm,LV_BTNMATRIX_CTRL_..);                                /* 清除所有按钮属性 */
}

效果图

(十七)文本区域控件(Textarea)

组成部分	编程对应
主体	LV_PART_MAIN
滚动条	LV_PART_SCROLLBAR
所选文本	LV_PART_SELECTED
光标	LV_PART_CURSOR
占位符	TEXTAREA_PLACEHOLDER

1.文本的创建（示例）

lv_obj_t *keyboard;

static void my_event_cb_11(lv_event_t * e)
{
	 lv_obj_t *target = lv_event_get_target(e);      /* 获取触发源 */
   lv_event_code_t code = lv_event_get_code(e);    /* 获取触发事件 */

	if(code == LV_EVENT_FOCUSED)
	{
		lv_keyboard_set_textarea(keyboard,target);
	}
	else if(code == LV_EVENT_VALUE_CHANGED)
	{
		const char *text = lv_textarea_get_text(target);
	}
}

static void my_event_cb_21(lv_event_t * e)
{
	 lv_obj_t *target = lv_event_get_target(e);      /* 获取触发源 */
   lv_event_code_t code = lv_event_get_code(e);    /* 获取触发事件 */

		if(code == LV_EVENT_FOCUSED)
	{
		lv_keyboard_set_textarea(keyboard,target);
	}
	else if(code == LV_EVENT_VALUE_CHANGED)
	{
		const char *text = lv_textarea_get_text(target);
	}
}


void MY_GUI()
{
    lv_obj_t *ta1 = lv_textarea_create(lv_scr_act());
    lv_obj_t *ta2 = lv_textarea_create(lv_scr_act());
    lv_obj_align(ta1,LV_ALIGN_TOP_MID,0,10);
    lv_obj_align(ta2,LV_ALIGN_TOP_MID,0,60);

    lv_textarea_set_one_line(ta1, true);
    lv_textarea_set_one_line(ta2, true);

    keyboard = lv_keyboard_create(lv_scr_act());	  /* 创建键盘部件 */

    lv_obj_add_event_cb(ta1,my_event_cb_11,LV_EVENT_ALL,NULL);/* 回调 */
    lv_obj_add_event_cb(ta2,my_event_cb_21,LV_EVENT_ALL,NULL);/* 回调 */

//    lv_textarea_add_char(ta, 'A');					/* 添加一个字符到当前光标处 */
//    lv_textarea_add_text(ta, "BCDEF"); 				/* 添加字符串到当前光标处 */
//
//    lv_obj_t *keyboard = lv_keyboard_create(lv_scr_act());	/* 创建键盘部件 */
//    lv_keyboard_set_textarea(keyboard, ta);			        /* 关联键盘和文本区域部件 */
//
//    lv_textarea_set_cursor_pos(ta,LV_TEXTAREA_CURSOR_LAST);
//
//    lv_textarea_del_char(ta);							/* 删除光标左侧的一个字符 */
//    lv_textarea_del_char_forward(ta);					/* 删除光标右侧的一个字符 */

//    lv_textarea_set_one_line(ta, true);				/* 单行模式,超过内容则形成滚动条 */
//    lv_textarea_set_password_mode(ta, true);			/* 密码模式（1.5s后隐藏输入的内容） */
//    lv_textarea_set_password_show_time(ta, 100);		/* 密码显示时间 */
//    lv_textarea_set_accepted_chars(ta,"0123456789");	/* 限制接收的字符 */
//    lv_textarea_set_max_length(ta,6);			 		/* 限制字符长度 */
//    lv_textarea_set_placeholder_text(ta, "password");	/* 提示输入密码 */
//    const char *txt = lv_textarea_get_text(ta);		/* 获取文本框文本 */
//    strcmp(const char *s1,const char *s2);			/* 当s1=s2时，返回0 */
}

效果图

(十八)键盘控件(Keyboard)

组成部分	编程对应
主体	LV_PART_MAIN
按钮	LV_PART_ITEMS

1.键盘的创建（示例）

static void my_event_cb_11(lv_event_t * e)
{
	 lv_obj_t *target = lv_event_get_target(e);      /* 获取触发源 */
   lv_event_code_t code = lv_event_get_code(e);    /* 获取触发事件 */

	if(code == LV_EVENT_FOCUSED)
	{
		lv_keyboard_set_textarea(keyboard,target);
	}
	else if(code == LV_EVENT_VALUE_CHANGED)
	{
		const char *text = lv_textarea_get_text(target);
	}
}

static void my_event_cb_21(lv_event_t * e)
{
	 lv_obj_t *target = lv_event_get_target(e);      /* 获取触发源 */
   lv_event_code_t code = lv_event_get_code(e);    /* 获取触发事件 */

		if(code == LV_EVENT_FOCUSED)
	{
		lv_keyboard_set_textarea(keyboard,target);
	}
	else if(code == LV_EVENT_VALUE_CHANGED)
	{
		const char *text = lv_textarea_get_text(target);
	}
}

void MY_GUI()
{

    lv_obj_t *kb = lv_keyboard_create(lv_scr_act());
    lv_obj_t *ta = lv_textarea_create(lv_scr_act());				/* 创建文本区域部件 */

    lv_keyboard_set_textarea(kb, ta);						/* 关联键盘和文本区域部件 */

    lv_keyboard_set_popovers(kb, true);						/* 允许按键弹窗提示 */

    lv_keyboard_set_mode(kb, LV_KEYBOARD_MODE_NUMBER);		/* 数字键盘模式,小写字母模式，大写字母模式，特殊字符模式，数字键盘模式  */
}

(十九)图片按钮控件(Imgbtn)

组成部分	编程对应
主体	LV_PART_MAIN

1.图片按钮的创建（示例）

LV_IMG_DECLARE(Address);
LV_IMG_DECLARE(Close);
LV_IMG_DECLARE(Phone);

static lv_point_t points_imgbtn[]={{0,0},{0,150}};

static void my_event_cb_Address(lv_event_t * e)
{
   static  uint8_t flag=0;
   lv_obj_t *target = lv_event_get_target(e);      /* 获取触发源 */
   lv_event_code_t code = lv_event_get_code(e);    /* 获取触发事件 */
   if(code == LV_EVENT_CLICKED)
   {
       if(flag == 0)
       {
           lv_obj_set_style_img_recolor(target,lv_color_hex(0x00BFFF),LV_STATE_DEFAULT);
    	   lv_obj_set_style_img_recolor_opa(target,255,LV_STATE_DEFAULT);
           flag=1;
       }
       else
       {
           lv_obj_set_style_img_recolor(target,lv_color_hex(0x000000),LV_STATE_DEFAULT);
   		   lv_obj_set_style_img_recolor_opa(target,255,LV_STATE_DEFAULT);
           flag=0;
       }
   }
}

static void my_event_cb_Close(lv_event_t * e)
{
   static  uint8_t flag=0;
   lv_obj_t *target = lv_event_get_target(e);      /* 获取触发源 */
   lv_event_code_t code = lv_event_get_code(e);    /* 获取触发事件 */
   if(code == LV_EVENT_CLICKED)
   {
       if(flag == 0)
       {
           lv_obj_set_style_img_recolor(target,lv_color_hex(0xff0000),LV_STATE_DEFAULT);
    	   lv_obj_set_style_img_recolor_opa(target,255,LV_STATE_DEFAULT);
           flag=1;
       }
       else
       {
           lv_obj_set_style_img_recolor(target,lv_color_hex(0x000000),LV_STATE_DEFAULT);
   		   lv_obj_set_style_img_recolor_opa(target,255,LV_STATE_DEFAULT);
           flag=0;
       }
   }
}
static void my_event_cb_Phone(lv_event_t * e)
{
   static  uint8_t flag=0;
   lv_obj_t *target = lv_event_get_target(e);      /* 获取触发源 */
   lv_event_code_t code = lv_event_get_code(e);    /* 获取触发事件 */
   if(code == LV_EVENT_CLICKED)
   {
       if(flag == 0)
       {
           lv_obj_set_style_img_recolor(target,lv_color_hex(0x00EE76),LV_STATE_DEFAULT);
    	   lv_obj_set_style_img_recolor_opa(target,255,LV_STATE_DEFAULT);
           flag=1;
       }
       else
       {
           lv_obj_set_style_img_recolor(target,lv_color_hex(0x000000),LV_STATE_DEFAULT);
   		   lv_obj_set_style_img_recolor_opa(target,255,LV_STATE_DEFAULT);
           flag=0;
       }
   }
}


void MY_GUI()
{
	lv_obj_t *obj = lv_obj_create(lv_scr_act());
	lv_obj_set_size(obj,420,200);
	lv_obj_align(obj,LV_ALIGN_CENTER,0,0);

	lv_obj_t  *imgbtn1 = lv_imgbtn_create(obj);
    lv_imgbtn_set_src(imgbtn1,LV_IMGBTN_STATE_RELEASED,NULL,&Address,NULL);  /* 设置某个状态的图片源 */
    lv_obj_set_size(imgbtn1,64,64);	                                  /* 设置图片按钮大小 */
	lv_obj_align(imgbtn1,LV_ALIGN_LEFT_MID,0,0);
    lv_obj_add_event_cb(imgbtn1,my_event_cb_Address,LV_EVENT_CLICKED,NULL);

    lv_obj_t  *label_Address = lv_label_create(obj);                         /*创建标签对象*/
    lv_label_set_text(label_Address,"Address");                                         /*设置文本为空*/
    lv_obj_align_to(label_Address,imgbtn1,LV_ALIGN_OUT_BOTTOM_MID,0,10);              /*设置标签位置*/


	lv_obj_t  *imgbtn2 = lv_imgbtn_create(obj);
    lv_imgbtn_set_src(imgbtn2,LV_IMGBTN_STATE_RELEASED,NULL,&Close,NULL);  /* 设置某个状态的图片源 */
    lv_obj_set_size(imgbtn2,64,64);	                                  /* 设置图片按钮大小 */
	lv_obj_align(imgbtn2,LV_ALIGN_CENTER,0,0);
    lv_obj_add_event_cb(imgbtn2,my_event_cb_Close,LV_EVENT_CLICKED,NULL);

    lv_obj_t  *label_Close = lv_label_create(obj);                         /*创建标签对象*/
    lv_label_set_text(label_Close,"Close");                                         /*设置文本为空*/
    lv_obj_align_to(label_Close,imgbtn2,LV_ALIGN_OUT_BOTTOM_MID,0,10);              /*设置标签位置*/


	lv_obj_t  *imgbtn3 = lv_imgbtn_create(obj);
    lv_imgbtn_set_src(imgbtn3,LV_IMGBTN_STATE_RELEASED,NULL,&Phone,NULL);  /* 设置某个状态的图片源 */
    lv_obj_set_size(imgbtn3,64,64);	                                  	/* 设置图片按钮大小 */
	lv_obj_align(imgbtn3,LV_ALIGN_RIGHT_MID,0,0);
    lv_obj_add_event_cb(imgbtn3,my_event_cb_Phone,LV_EVENT_CLICKED,NULL);

    lv_obj_t  *label_Phone = lv_label_create(obj);                         /*创建标签对象*/
    lv_label_set_text(label_Phone,"Phone");                                         /*设置文本为空*/
    lv_obj_align_to(label_Phone,imgbtn3,LV_ALIGN_OUT_BOTTOM_MID,0,10);              /*设置标签位置*/

   /*分隔线*/
   lv_obj_t *line1 = lv_line_create(obj);             		   /*创建线*/
   lv_line_set_points(line1,points_imgbtn,2);                   /*画线坐标*/
   lv_obj_align(line1,LV_ALIGN_CENTER,-90,0);                   /*线位置*/
   lv_obj_set_style_line_color(line1,lv_color_hex(0xcdcdcd),0); /*线颜色*/

   lv_obj_t *line2 = lv_line_create(obj);             		   /*创建线*/
   lv_line_set_points(line2,points_imgbtn,2);                   /*画线坐标*/
   lv_obj_align(line2,LV_ALIGN_CENTER,90,0);                   /*线位置*/
   lv_obj_set_style_line_color(line2,lv_color_hex(0xcdcdcd),0); /*线颜色*/

效果图

(二十)选项卡控件(Tabview)

组成部分	编程对应
主体	lv_obj
按钮	lv_btnmatrix

1.选项卡的创建（示例）

    lv_obj_t *tabview = lv_tabview_create(lv_scr_act(),LV_DIR_TOP,50);  /*创建选项卡*/
    //lv_obj_set_style_text_font(tabview,font,LV_STATE_DEFAULT);          /*设置字体*/

    lv_obj_t *tab1 = lv_tabview_add_tab(tabview,"Mon");      /*添加选项卡1*/
    lv_obj_t *tab2 = lv_tabview_add_tab(tabview,"Tue");     /*添加选项卡2*/
    lv_obj_t *tab3 = lv_tabview_add_tab(tabview,"Wed");   /*添加选项卡3*/
    lv_obj_t *tab4 = lv_tabview_add_tab(tabview,"Thu");    /*添加选项卡4*/
    lv_obj_t *tab5 = lv_tabview_add_tab(tabview,"Fri");      /*添加选项卡5*/
    lv_obj_t *tab6 = lv_tabview_add_tab(tabview,"Sat");    /*添加选项卡6*/
    lv_obj_t *tab7 = lv_tabview_add_tab(tabview,"Sun");      /*添加选项卡7*/


    lv_obj_t *label1 = lv_textarea_create(tab1);
    lv_textarea_set_text(label1,"I will not make the same mistakes that you did I will not let myself cause my heart so much misery");
    lv_obj_set_align(label1,LV_ALIGN_CENTER);

    lv_obj_t *label2 = lv_textarea_create(tab2);
    lv_textarea_set_text(label2,"I will not break the way you did you fell so hard");
    lv_obj_set_align(label2,LV_ALIGN_CENTER);

    lv_obj_t *label3 = lv_textarea_create(tab3);
    lv_textarea_set_text(label3,"I've learned the hard way to never let it get that far");
    lv_obj_set_align(label3,LV_ALIGN_CENTER);

    lv_obj_t *label4 = lv_textarea_create(tab4);
    lv_textarea_set_text(label4,"Because of you I never stray too far from the sidewalk");
    lv_obj_set_align(label4,LV_ALIGN_CENTER);

    lv_obj_t *label5 = lv_textarea_create(tab5);
    lv_textarea_set_text(label5,"Because of you I learned to play on the safe side so I don't get hurt");
    lv_obj_set_align(label5,LV_ALIGN_CENTER);

    lv_obj_t *label6 = lv_textarea_create(tab6);
    lv_textarea_set_text(label6,"Because of you I find it hard to trust not only me, but everyone around me");
    lv_obj_set_align(label6,LV_ALIGN_CENTER);

    lv_obj_t *label7 = lv_textarea_create(tab7);
    lv_textarea_set_text(label7,"Because of you I am afraid I lose my way");
    lv_obj_set_align(label7,LV_ALIGN_CENTER);

    /*界面优化*/
    lv_obj_t  *btn = lv_tabview_get_tab_btns(tabview);  /*获取选项卡按钮部分*/

    /*未选中的按钮*/
    lv_obj_set_style_bg_color(btn,lv_color_hex(0xb7472a),LV_PART_ITEMS|LV_STATE_DEFAULT);   /*设置按钮背景颜色*/
    lv_obj_set_style_bg_opa(btn,200,LV_PART_ITEMS|LV_STATE_DEFAULT);                       /*设置按钮背景透明度*/
    lv_obj_set_style_text_color(btn,lv_color_hex(0xf3f3f3),LV_PART_ITEMS|LV_STATE_DEFAULT);/*设置按钮文本颜色*/

    /*选中的按钮*/
    lv_obj_set_style_bg_color(btn,lv_color_hex(0xe1e1e1),LV_PART_ITEMS|LV_STATE_CHECKED);   /*设置按钮背景颜色*/
    lv_obj_set_style_bg_opa(btn,200,LV_PART_ITEMS|LV_STATE_CHECKED);                       /*设置按钮背景透明度*/
    lv_obj_set_style_text_color(btn,lv_color_hex(0xb7472a),LV_PART_ITEMS|LV_STATE_CHECKED); /*设置按钮文本颜色*/
    lv_obj_set_style_border_width(btn,5,LV_PART_ITEMS|LV_STATE_CHECKED);                    /*设置选中按钮边框宽度*/

    /*主体*/
    lv_obj_t *obj = lv_tabview_get_content(tabview);
    lv_obj_set_style_bg_color(obj,lv_color_hex(0xffffff),LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(obj,255,LV_STATE_DEFAULT);

    lv_tabview_set_act(tabview,0,LV_ANIM_OFF);    /* 索引从0开始,关闭动画 */
}

效果图

(二十一)平铺视图控件(Tileview)

组成部分	编程对应
主体	LV_PART_MAIN
按钮	LV_PART_SCROLLBAR

1.平铺视图的创建（示例）

  lv_obj_t  *tileview = lv_tileview_create( lv_scr_act() );

    lv_obj_set_size(tileview,480,320);

    lv_obj_t *tile1 = lv_tileview_add_tile( tileview, 0, 0, LV_DIR_RIGHT );              /*添加页面*/
    lv_obj_t *tile2 = lv_tileview_add_tile( tileview, 1, 0, LV_DIR_LEFT|LV_DIR_RIGHT );  /*添加页面*/
    lv_obj_t *tile3 = lv_tileview_add_tile( tileview, 2, 0, LV_DIR_LEFT );               /*添加页面*/

    lv_obj_t *label_1 = lv_label_create(tile1);                  /*创建标签*/
    lv_label_set_text(label_1,"Page_1");                         /*添加标签文本*/
//    lv_obj_set_style_text_font(label_1,font,LV_STATE_DEFAULT); /*设置标签字体*/
    lv_obj_center(label_1);                                       /*对齐*/

    lv_obj_t *label_2 = lv_label_create(tile2);                /*创建标签*/
    lv_label_set_text(label_2,"Page_2");                       /*添加标签文本*/
//    lv_obj_set_style_text_font(label_1,font,LV_STATE_DEFAULT); /*设置标签字体*/
    lv_obj_center(label_2);                                    /*对齐*/

    lv_obj_t *label_3 = lv_label_create(tile3);                /*创建标签*/
    lv_label_set_text(label_3,"Page_3");                       /*添加标签文本*/
//    lv_obj_set_style_text_font(label_3,font,LV_STATE_DEFAULT); /*设置标签字体*/
    lv_obj_center(label_3);                                    /*对齐*/

    lv_obj_remove_style(tileview,NULL,LV_PART_SCROLLBAR);       /*移除滚动条*/

    /*状态栏创建*/
    lv_obj_t *label_left = lv_label_create(lv_scr_act());
    lv_label_set_text(label_left,"AM 5:50");                       /*添加标签文本*/
    lv_obj_align(label_left,LV_ALIGN_TOP_LEFT,10,10);

    lv_obj_t *label_right = lv_label_create(lv_scr_act());
    lv_label_set_text(label_right,LV_SYMBOL_WIFI " 95% "  LV_SYMBOL_BATTERY_3);    /*添加标签文本*/
    lv_obj_align(label_right,LV_ALIGN_TOP_RIGHT,-10,10);

//    lv_obj_update_layout( tileview );							/* 更新参数 */
//    lv_obj_set_tile( tileview, tile2, LV_ANIM_OFF );			/* 根据页面对象设置 */
    lv_obj_set_tile_id( tileview, 0, 0, LV_ANIM_OFF );			/* 根据页面行列设置 */

效果图

(二十二)窗口部件控件(Win)

组成部分	编程对应
头部	Header
主体	Content

1.窗口部件的创建（示例）

lv_obj_t *win;
static void btn_event_cb(lv_event_t * e)
{
   lv_obj_t *target = lv_event_get_target(e);      /* 获取触发源 */
   lv_event_code_t code = lv_event_get_code(e);    /* 获取触发事件 */
   if(code == LV_EVENT_CLICKED)
   {
       lv_obj_add_flag(win,LV_OBJ_FLAG_HIDDEN);
   }
}

void MY_GUI()
{
    win = lv_win_create(lv_scr_act(),30); 					/*创建窗口部件*/
    lv_obj_set_size(win,300,200);                   		/*设置大小*/
    lv_obj_center(win);                             		/*位置居中*/
    lv_obj_set_style_border_width(win,1,LV_STATE_DEFAULT);  /*边框大小*/
    lv_obj_set_style_border_color(win,lv_color_hex(0x8a8a8a),LV_STATE_DEFAULT);/*边框颜色*/
    lv_obj_set_style_border_opa(win,100,LV_STATE_DEFAULT);	/*边框透明度设置*/
    lv_obj_set_style_radius(win,10,LV_STATE_DEFAULT);		/*圆角设置*/

    lv_obj_t *btn_set = lv_win_add_btn(win,LV_SYMBOL_SETTINGS ,30); /*添加头部按钮*/
    lv_obj_set_style_bg_opa(btn_set,0,LV_STATE_DEFAULT);			/*背景透明度设置*/
    lv_obj_set_style_shadow_width(btn_set,0,LV_STATE_DEFAULT);		/*阴影宽度设置*/
    lv_obj_set_style_text_color(btn_set,lv_color_hex(0x000000),LV_STATE_DEFAULT);/*设置文本颜色*/

    /*标题*/
    lv_obj_t *title = lv_win_add_title(win,"Setting");				/*添加头部文本*/
//    lv_obj_set_style_text_font(title,);

    /*右侧按钮*/
    lv_obj_t *bt_close = lv_win_add_btn(win,LV_SYMBOL_CLOSE,30);	/*创建按钮*/
    lv_obj_set_style_bg_opa(bt_close,0,LV_STATE_DEFAULT);			/*背景透明度设置*/
    lv_obj_set_style_shadow_width(bt_close,0,LV_STATE_DEFAULT);		/*阴影宽度设置*/
    lv_obj_set_style_text_color(bt_close,lv_color_hex(0x000000),LV_STATE_DEFAULT);/*设置默认文本颜色*/
    lv_obj_set_style_text_color(bt_close,lv_color_hex(0xff0000),LV_STATE_PRESSED);/*设置按下文本颜色*/
    lv_obj_add_event_cb(bt_close,btn_event_cb,LV_EVENT_CLICKED,NULL);/*回调函数*/


    /*主体背景*/
    lv_obj_t *content = lv_win_get_content(win);  /*获取主体*/
    lv_obj_set_style_bg_color(content,lv_color_hex(0xffffff),LV_STATE_DEFAULT);/*设置背景颜色*/

    /*音乐音量滑块*/
    lv_obj_t *slider_music = lv_slider_create(content);				/*创建滑块*/
    lv_obj_set_size(slider_music,200,20);							/*设置大小*/
    lv_obj_align(slider_music,LV_ALIGN_CENTER,0,-20);				/*设置位置*/
    lv_slider_set_value(slider_music,50,LV_ANIM_OFF);				/*设置值，关闭动画*/
    lv_obj_set_style_bg_color(slider_music,lv_color_hex(0x787c78),LV_PART_MAIN);/*设置默认颜色*/
    lv_obj_set_style_bg_color(slider_music,lv_color_hex(0x00BFFF),LV_PART_INDICATOR);/*设置指示器颜色*/
    lv_obj_remove_style(slider_music,NULL,LV_PART_KNOB);			/*移除控制器*/

    /*音乐音量图标*/
    lv_obj_t *label_music = lv_label_create(content);				/*创建标签*/
    lv_label_set_text(label_music,LV_SYMBOL_AUDIO);					/*设置标签文本*/
    lv_obj_align_to(label_music,slider_music,LV_ALIGN_OUT_LEFT_MID,-5,0);/*设置对齐*/

    /*闹钟音量滑块*/
    lv_obj_t *slider_clock = lv_slider_create(content);				/*创建滑块*/
    lv_obj_set_size(slider_clock,200,20);							/*设置大小*/
    lv_obj_align(slider_clock,LV_ALIGN_CENTER,0,20);				/*设置位置*/
    lv_slider_set_value(slider_clock,50,LV_ANIM_OFF);				/*设置值，关闭动画*/
    lv_obj_set_style_bg_color(slider_clock,lv_color_hex(0x787c78),LV_PART_MAIN);/*设置默认颜色*/
    lv_obj_set_style_bg_color(slider_clock,lv_color_hex(0x00BFFF),LV_PART_INDICATOR);*设置指示器颜色*/
    lv_obj_remove_style(slider_clock,NULL,LV_PART_KNOB);			/*移除控制器*/

    /*闹钟音量图标*/
    lv_obj_t *label_clock = lv_label_create(content);				/*创建标签*/
    lv_label_set_text(label_clock,LV_SYMBOL_BELL);					/*设置标签文本*/
    lv_obj_align_to(label_clock,slider_clock,LV_ALIGN_OUT_LEFT_MID,-5,0);/*设置对齐*/
}

效果图

(二十三)消息框控件(Msgbox)

组成部分	编程对应
主体	obj
标题	title
关闭按钮	close_btn
内容	content
按钮矩阵	btnmatrix

1.消息框的创建（示例）

lv_obj_t *slider_label;
lv_obj_t *msgbox;

static void slider_sound_event_cb(lv_event_t * e)
{
    static uint8_t flag=0;
    lv_obj_t *target = lv_event_get_current_target(e);    /* 获取触发源,这里特别注意和msgbox常规获取函数不同 */
    lv_event_code_t code = lv_event_get_code(e);          /* 获取触发事件 */

    if(code == LV_EVENT_VALUE_CHANGED)
    {
        lv_label_set_text_fmt(slider_label,"%d%%",lv_slider_get_value(target)); /*获取当前值，更新音量百分比*/

        if(lv_slider_get_value(target) >= 80 && flag == 0)
        {
            lv_obj_clear_flag(msgbox,LV_OBJ_FLAG_HIDDEN);  /*清除消息框隐藏属性，出现弹出提示*/
            flag = 1;
        }
        else if(lv_slider_get_value(target) < 80)
        {
            flag = 0;
        }
    }
}

static void msgbox_btn_event_cb(lv_event_t * e)
{
    lv_obj_t *target = lv_event_get_current_target(e);    /* 获取触发源,这里特别注意和msgbox常规获取函数不同 */
    lv_event_code_t code = lv_event_get_code(e);          /* 获取触发事件 */

     if(code == LV_EVENT_CLICKED)
    {
        lv_obj_add_flag(msgbox,LV_OBJ_FLAG_HIDDEN);
    }
}

void MY_GUI()
{
    static const char *btns[] = {" "," ","OK"," "};

    /*音乐音量滑块*/
    lv_obj_t *slider_sound = lv_slider_create(lv_scr_act()); /*创建滑块*/
    lv_obj_set_size(slider_sound,200,15);                    /*设置大小*/
    lv_obj_align(slider_sound,LV_ALIGN_CENTER,0,0);          /*设置位置*/
    lv_slider_set_value(slider_sound,50,LV_ANIM_OFF);        /*设置值*/
    lv_obj_add_event_cb(slider_sound,slider_sound_event_cb,LV_EVENT_VALUE_CHANGED,NULL);/*回调函数*/

    /*百分比标签*/
    slider_label = lv_label_create(lv_scr_act());            /*创建标签*/
    lv_label_set_text(slider_label,"50%");                   /*设置内容*/
    lv_obj_align_to(slider_label,slider_sound,LV_ALIGN_OUT_RIGHT_MID,5,0); /*设置位置*/

    /*音量图标*/
    lv_obj_t *sound_label = lv_label_create(lv_scr_act());
    lv_label_set_text(sound_label,LV_SYMBOL_VOLUME_MAX);
    lv_obj_align_to(sound_label,slider_sound,LV_ALIGN_OUT_LEFT_MID,-5,0);

    /*消息框*/
    msgbox = lv_msgbox_create(lv_scr_act(),LV_SYMBOL_WARNING "Notice","Excessive volume may damage hearing.",btns,false);
    lv_obj_set_size(msgbox,250,150);
    lv_obj_center(msgbox);
    lv_obj_set_style_border_width(msgbox,0,LV_STATE_DEFAULT);                     /*边框大小*/
    lv_obj_set_style_shadow_width(msgbox,20,LV_STATE_DEFAULT);                    /*阴影宽度*/
    lv_obj_set_style_shadow_color(msgbox,lv_color_hex(0xa9a9a9),LV_STATE_DEFAULT);/*边框颜色*/
    lv_obj_set_style_pad_top(msgbox,18,LV_STATE_DEFAULT);                         /*设置顶部填充*/
    lv_obj_set_style_pad_left(msgbox,20,LV_STATE_DEFAULT);                        /*设置左侧填充*/
//    lv_obj_add_event_cb(msgbox,slider_sound_event_cb,LV_EVENT_CLICKED,NULL);      /*回调函数*/

    /*消息框标题*/
    lv_obj_t *title = lv_msgbox_get_title(msgbox);                                /*获取标题部分*/
    lv_obj_set_style_text_color(title,lv_color_hex(0xff0000),LV_STATE_DEFAULT);   /*设置文本颜色*/

    /*消息框主体*/
    lv_obj_t *content = lv_msgbox_get_content(msgbox);                            /*获取主体部分*/
    lv_obj_set_style_text_color(content,lv_color_hex(0x6c6c6c),LV_STATE_DEFAULT); /*设置文本颜色*/
    lv_obj_set_style_pad_top(content,15,LV_STATE_DEFAULT);                        /*设置顶部填充*/

    /*消息框按钮*/
    lv_obj_t *btn  = lv_msgbox_get_btns(msgbox);                                  /*获取消息框按钮*/
    lv_obj_set_style_bg_opa(btn,0,LV_PART_ITEMS);                                 /*设置透明度*/
    lv_obj_set_style_shadow_width(btn,0,LV_PART_ITEMS);                           /*设置阴影宽度*/
    lv_obj_set_style_text_color(btn,lv_color_hex(0x2271df),LV_PART_ITEMS);        /*设置文本颜色*/
    lv_obj_set_style_text_color(btn,lv_color_hex(0xff0000),LV_PART_ITEMS|LV_STATE_PRESSED);/*设置设置文本颜色*/
    lv_obj_add_event_cb(btn,msgbox_btn_event_cb,LV_EVENT_CLICKED,NULL);          /*回调函数*/

    lv_obj_add_flag(msgbox,LV_OBJ_FLAG_HIDDEN);                                  /*隐藏msgbox*/
}

效果图

(二十四)微调器控件(Spinbox)

组成部分	编程对应
主体	LV_PART_MAIN
光标	LV_PART_CURSOR

1.微调器的创建（示例）

lv_obj_t *spinbox;
static void spinbox_btnadd_event_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);          /* 获取触发事件 */
    if(code == LV_EVENT_CLICKED)
    {
        lv_spinbox_increment(spinbox);   /*递增*/
    }
}
static void spinbox_btndec_event_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);          /* 获取触发事件 */
    if(code == LV_EVENT_CLICKED)
    {
        lv_spinbox_decrement(spinbox);   /*递减*/
    }
}
void MY_GUI()
{
    spinbox = lv_spinbox_create(lv_scr_act());          /*创建微调器*/
    lv_obj_center(spinbox);                             /*设置位置*/
    lv_spinbox_set_value(spinbox,0);                    /*设置值*/
    lv_spinbox_set_digit_format(spinbox, 4, 2); 		/* 设置数字位数、小数点位置 */
    lv_spinbox_set_pos(spinbox, 1);						/* 设置光标位置 */

    lv_spinbox_set_step(spinbox,1);                     /*设置步进值*/
    lv_spinbox_set_range(spinbox,-1000,1000);           /*设置位置*/

    lv_obj_t *btn_add = lv_btn_create(lv_scr_act());                           /*创建按钮*/
    lv_obj_align_to(btn_add,spinbox,LV_ALIGN_OUT_RIGHT_MID,5,0);               /*设置位置*/
    lv_obj_set_style_bg_img_src(btn_add,LV_SYMBOL_PLUS,LV_PART_MAIN);          /*设置背景图标*/
    lv_obj_add_event_cb(btn_add,spinbox_btnadd_event_cb,LV_EVENT_CLICKED,NULL);/*回调函数*/

    lv_obj_t *btn_dec = lv_btn_create(lv_scr_act());                           /*创建按钮*/
    lv_obj_align_to(btn_dec,spinbox,LV_ALIGN_OUT_LEFT_MID,-5,0);               /*设置位置*/
    lv_obj_set_style_bg_img_src(btn_dec,LV_SYMBOL_MINUS,LV_PART_MAIN);         /*设置背景图标*/
    lv_obj_add_event_cb(btn_dec,spinbox_btndec_event_cb,LV_EVENT_CLICKED,NULL);/*回调函数*/

效果图

(二十五)表格控件(Table)

组成部分	编程对应
主体	LV_PART_MAIN
单元格	LV_PART_ITEMS

1.表格的创建（示例）

void MY_GUI()
{
    /*表格*/
    lv_obj_t *table = lv_table_create(lv_scr_act()); /*创建表格*/
    lv_obj_set_height(table,160);                    /*设置表格高度*/
    lv_obj_center(table);                            /*设置位置*/

    /*标题*/
    lv_obj_t *label_title = lv_label_create(lv_scr_act());          /*创建标签*/
    lv_obj_align_to(label_title,table,LV_ALIGN_OUT_TOP_MID,-30,-5); /*设置位置*/
    lv_label_set_text(label_title,"Fruit Prices");                  /*设置内容*/

    /*设置第一列单元格内容*/
    lv_table_set_cell_value(table,0,0,"Fruit"); 
    lv_table_set_cell_value(table,1,0,"AAAA");
    lv_table_set_cell_value(table,2,0,"BBBB");
    lv_table_set_cell_value(table,3,0,"CCCC");
    lv_table_set_cell_value(table,4,0,"DDDD");
    lv_table_set_cell_value(table,5,0,"EEEE");
    lv_table_set_cell_value(table,6,0,"FFFF");


    /*设置第二列单元格内容*/
    lv_table_set_cell_value(table,0,1,"Prices");
    lv_table_set_cell_value(table,1,1,"$12");
    lv_table_set_cell_value(table,2,1,"$13");
    lv_table_set_cell_value(table,3,1,"$14");
    lv_table_set_cell_value(table,4,1,"$15");
    lv_table_set_cell_value(table,5,1,"$16");
    lv_table_set_cell_value(table,6,1,"$19");

    /*单元格宽度*/
    lv_table_set_col_width(table,0,100);  
    lv_table_set_col_width(table,1,100);
}

效果图

(二十六)中文字库应用

步骤	操作
第一步	准备使用到的字体文件（TTF、OTF等格式）
第二步	在LVGL官网使用在线字体转换工具 网址链接
第三步	添加生成的字库到LVGL工程中，声明调用LV_FONT_DECLARE()

字体生成工具的使用

常规中文字库编码范围：

文字	编码范围
基本汉字	0x4E00-0x7FA5
数字、拉丁字母、标点符号	0x20-0x7E
注：转换范围越大生成字库所占内存越大，根据自己的硬件资源合理选择

参考资料

-----LVGL官网手册链接-----

-----百问网LVGL参考手册链接-----