LVGL——基础对象篇

基础对象篇

部件大小

• 设置宽度：lv_obj_set_width(obj, new_width);
• 设置高度：lv_obj_set_height(obj, new_height);
• 同时设置宽度、高度：lv_obj_set_size(obj, new_width, new_height);

位置设置

LVGL以左上角为原点

部件位置（position）设置相关API函数：

• 设置X轴坐标：lv_obj_set_x(obj, new_x);
• 设置Y轴坐标：lv_obj_set_y(obj, new_y);
• lv_obj_set_pos(obj, new_x, new_y);

对齐

• 参照父对象对齐：lv_obj_set_align(obj, LV_ALIGN_…)
• 参照父对象对齐，再进行偏移：lv_obj_align(obj, LV_ALIGN_…, x, y)，
• LV_ALIGN_为统一前缀，格式统一为LV_ALIGN_+对齐方式
• 参照其他对象对齐（无父子关系），再进行偏移：lv_obj_align_to(obj_to_align, obj_referece, LV_ALIGN_…, x, y);
  注意：有父子关系的部件使用对齐方式的时候要注意不然可能会导致部件显示缺失

对齐方式

样式

样式用于设置部件的外观，以优化显示界面和实现用户交互

给部件添加样式

添加普通样式

static lv_style_t style; 									/* 定义样式变量 */
lv_style_init(&style); 										/* 初始化样式 */
lv_style_set_bg_color(&style, lv_color_hex(0xf4b183)); 		/* 设置背景颜色 */

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

添加本地样式

lv_obj_t * obj = lv_obj_create(lv_scr_act()); 						/* 创建一个部件 */
lv_obj_set_style_bg_color(obj,lv_color_hex(0xf4b183),LV_STATE_DEFAULT);	/* 设置部件的样式 */

样式触发时机设置

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

单独设置部件中某个部分的样式

例如一下就是单独设置指示器的函数

lv_obj_set_style_bg_color(obj,lv_color_hex(0xf4b183),LV_STATE_DEFAULT|LV_PART_INDICATOR);	/* 设置部件的样式 */

enum {

    LV_PART_MAIN		= 0x000000, 	 	/* 主体，像矩形一样的背景 */
    LV_PART_SCROLLBAR	= 0x010000, 	 	/* 滚动条 */
    LV_PART_INDICATOR	= 0x020000, 	 	/* 指示器，指示当前值 */
    LV_PART_KNOB		= 0x030000,	 		/* 手柄或旋钮，用于调整参数值 */
    LV_PART_SELECTED	= 0x040000, 	 	/* 选项框，指示当前选择的选项 */
    LV_PART_ITEMS		= 0x050000, 	 	/* 相似的元素，例如单元格 */
    LV_PART_TICKS		= 0x060000, 	 	/* 刻度 */
    LV_PART_CURSOR		= 0x070000, 	 	/* 光标 */
};

事件

LVGL中，当发生用户感兴趣的事情时，可以触发回调事件，以执行相关的操作

事件（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”);	
	}
}