【LVGL- 基础对象(lv_obj_t)】

已于 2024-08-25 01:06:45 修改
阅读量1k 收藏 15
点赞数 10
分类专栏： # LVGL 文章标签： c语言
于 2024-08-25 00:48:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_23896491/article/details/141507827
版权

LVGL- 基础对象(lv_obj_t

■ LVGL-border-box 模型

在这里插入图片描述

属性描述
边界(bounding)元素的宽度/高度围起来的区域(整个盒子)。
边框(border)边框有大小和颜色等属性(相当于盒子的厚度和它的颜色)。
填充(padding)对象两侧与其子对象之间的空间(盒子的填充物)。
内容(content)如果边界框按边框宽度和填充的大小缩小，则显示其大小的内容区域(盒子实际装东西的区域)。
轮廓(outline)LVGL中没有外边距(margin)的概念(盒子之间的距离)，确认代之的是轮廓(outline)。
它是绘制于元素(盒子)周围的一条线，它不占据空间，位于边框边缘的外围，可起到突出元素(盒子)的作用。
在浏览器里，当鼠标点击或使用Tab键让一个选项或者一个图片获得焦点的时候，这个元素就会多了一个轮廓框围绕。轮廓(outline)

LVGL的盒子模型是我们理解对象(部件)的组成，修改对象的样式，实现对对象的布局、处理对象排列等等的关键。

盒子模型模型实例对比

/******************/
lv_obj_t* obj1 = lv_line_create(ui_ContainerRight);
static lv_point_t line_points[] = { {50, 50}, {150, 50} };
lv_line_set_points(obj1, line_points, sizeof(line_points) / sizeof(lv_point_t));

/******************/
lv_obj_t* obj2 = lv_obj_create(ui_ContainerRight);
lv_obj_set_pos(obj2,50,70);
lv_obj_set_width(obj2,  100);
lv_obj_set_height(obj2, 50);
lv_obj_set_style_line_color(obj2, lv_color_black(), LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_line_width(obj2, 10, LV_PART_MAIN | LV_STATE_DEFAULT );
lv_obj_set_style_line_opa(obj2, 255 ,LV_PART_MAIN | LV_STATE_DEFAULT );
lv_obj_set_style_line_rounded(obj2, 255 ,LV_PART_MAIN | LV_STATE_DEFAULT );

/******************/
lv_obj_t* obj3 = lv_obj_create(ui_ContainerRight);
lv_obj_set_pos(obj3,50,130);
lv_obj_set_width(obj3,  100);
lv_obj_set_height(obj3, 50);
lv_obj_set_style_border_color(obj3, lv_color_black(), LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_border_width(obj3, 10, LV_PART_MAIN | LV_STATE_DEFAULT );
lv_obj_set_style_border_opa(obj3, 255 ,LV_PART_MAIN | LV_STATE_DEFAULT );


/******************/
lv_obj_t* obj4 = lv_obj_create(ui_ContainerRight);
lv_obj_set_pos(obj4,50,200);
lv_obj_set_width(obj4,  100);
lv_obj_set_height(obj4, 50);
lv_obj_set_style_outline_color(obj4, lv_color_black(), LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_outline_width(obj4, 10, LV_PART_MAIN | LV_STATE_DEFAULT );
lv_obj_set_style_outline_opa(obj4, 255 ,LV_PART_MAIN | LV_STATE_DEFAULT );

/******************/
lv_obj_t* obj5 = lv_obj_create(ui_ContainerRight);
lv_obj_set_pos(obj5,50,270);
lv_obj_set_width(obj5,  100);
lv_obj_set_height(obj5, 50);
lv_obj_set_style_arc_color(obj5, lv_color_black(), LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_arc_width(obj5, 10, LV_PART_MAIN | LV_STATE_DEFAULT );
lv_obj_set_style_arc_opa(obj5, 255 ,LV_PART_MAIN | LV_STATE_DEFAULT );

显示结果：
在这里插入图片描述
边框 宽度
lv_obj_set_style_border_width(pppppppp2, 10, LV_PART_MAIN | LV_STATE_DEFAULT);

lv_obj_t *pppppppp = lv_label_create(ui_EBKV_Containe_Body);
lv_obj_set_pos(pppppppp,100,100);
lv_obj_set_size(pppppppp, 130, 60);
lv_label_set_text(pppppppp, "book 1");
lv_obj_set_style_text_color(pppppppp, lv_color_hex(0x00), LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_text_opa(pppppppp, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_text_font(pppppppp, &lv_font_montserrat_22, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_bg_color(pppppppp, lv_color_hex(0x4ea7d1), LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_bg_opa(pppppppp, 255, LV_PART_MAIN | LV_STATE_DEFAULT); //加上这句上面有效果
lv_obj_set_style_border_color(pppppppp, lv_color_hex(0x00), LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_border_width(pppppppp, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_border_opa(pppppppp, 255, LV_PART_MAIN | LV_STATE_DEFAULT);

lv_obj_t *pppppppp2 = lv_label_create(ui_EBKV_Containe_Body);
lv_obj_set_pos(pppppppp2,100,170);
lv_obj_set_size(pppppppp2, 130, 60);
lv_label_set_text(pppppppp2, "book 2");
lv_obj_set_style_text_color(pppppppp2, lv_color_hex(0x00), LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_text_opa(pppppppp2, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_text_font(pppppppp2, &lv_font_montserrat_22, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_bg_color(pppppppp2, lv_color_hex(0x4ea7d1), LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_bg_opa(pppppppp2, 255, LV_PART_MAIN | LV_STATE_DEFAULT); //加上这句上面有效果
lv_obj_set_style_border_color(pppppppp2, lv_color_hex(0x00), LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_border_width(pppppppp2, 10, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_border_opa(pppppppp2, 255, LV_PART_MAIN | LV_STATE_DEFAULT);

在这里插入图片描述
pad设置宽度
lv_obj_set_style_pad_top(pppppppp, 10, LV_PART_MAIN);
lv_obj_set_style_pad_left(pppppppp, 10, LV_PART_MAIN);
lv_obj_set_style_pad_all(pppppppp, 10, LV_PART_MAIN);

int fontHeight1 = lv_font_get_line_height(&lv_font_montserrat_22);
int verPad2 = (60 - fontHeight1)/2;
lv_obj_set_style_pad_top(pppppppp, verPad2, 0);
int textWidth1 = lv_txt_get_width("book 1", strlen("book 1"), &lv_font_montserrat_22, 1,LV_TEXT_FLAG_NONE);
int horPad1 = (130 - textWidth1)/2;
lv_obj_set_style_pad_left(pppppppp, horPad1, 0);
lv_obj_set_style_pad_all(pppppppp, 10, LV_PART_MAIN);

文本居中
lv_obj_set_style_pad_top(pppppppp, verPad2, 0);
lv_obj_set_style_pad_left(pppppppp, horPad1, 0);

lv_obj_t *pppppppp = lv_label_create(ui_EBKV_Containe_Body);
lv_obj_set_pos(pppppppp,100,100);
lv_obj_set_size(pppppppp, 130, 60);
lv_label_set_text(pppppppp, "book 1");
lv_obj_set_style_text_color(pppppppp, lv_color_hex(0x00), LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_text_opa(pppppppp, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_text_font(pppppppp, &lv_font_montserrat_22, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_bg_color(pppppppp, lv_color_hex(0x4ea7d1), LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_bg_opa(pppppppp, 255, LV_PART_MAIN | LV_STATE_DEFAULT); //加上这句上面有效果
lv_obj_set_style_border_color(pppppppp, lv_color_hex(0x00), LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_border_width(pppppppp, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_border_opa(pppppppp, 255, LV_PART_MAIN | LV_STATE_DEFAULT);

int fontHeight1 = lv_font_get_line_height(&lv_font_montserrat_22);
int verPad2 = (60 - fontHeight1)/2;
lv_obj_set_style_pad_top(pppppppp, verPad2, 0);
int textWidth1 = lv_txt_get_width("book 1", strlen("book 1"), &lv_font_montserrat_22, 1,LV_TEXT_FLAG_NONE);
int horPad1 = (130 - textWidth1)/2;
lv_obj_set_style_pad_left(pppppppp, horPad1, 0);

lv_obj_t *pppppppp2 = lv_label_create(ui_EBKV_Containe_Body);
lv_obj_set_pos(pppppppp2,100,170);
lv_obj_set_size(pppppppp2, 130, 60);
lv_label_set_text(pppppppp2, "book 2");
lv_obj_set_style_text_color(pppppppp2, lv_color_hex(0x00), LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_text_opa(pppppppp2, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_text_font(pppppppp2, &lv_font_montserrat_22, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_bg_color(pppppppp2, lv_color_hex(0x4ea7d1), LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_bg_opa(pppppppp2, 255, LV_PART_MAIN | LV_STATE_DEFAULT); //加上这句上面有效果
lv_obj_set_style_border_color(pppppppp2, lv_color_hex(0x00), LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_border_width(pppppppp2, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_border_opa(pppppppp2, 255, LV_PART_MAIN | LV_STATE_DEFAULT);

在这里插入图片描述

■ LVGL-基础对象（lv_obj_t）就是一个矩形

LVGL (6) 基础对象 Obj 分析

在这里插入图片描述

在这里插入图片描述

示例一：

在这里插入代码片

■ LVGL-（lv_obj_t）基本属性

在这里插入图片描述

■ LVGL-（lv_obj_t）大小

在这里插入图片描述

//大小
lv_obj_set_width(obj, 200);
lv_obj_set_width(btn, lv_pct(50))  //lv_pct(value) 将值转换为百分比
lv_obj_set_width(btn, LV_SIZE_CONTENT) //设置对象的宽度/高度以涉及所有子项的特殊值
lv_obj_set_height(obj, 100);
lv_obj_set_height(obj, lv_pct(100)); //百分比值是根据父内容区域的大小计算的。例如将对象的高度设置为屏幕高度：
lv_obj_set_size(obj, 200, 100); 	//Or in one function
lv_obj_update_layout(obj) //如果您需要获取对象的任何坐标并且坐标刚刚更改，则需要强制 LVGL 重新计算坐标。

scr_act_width()  //获取宽度
scr_act_height() //获取高度

lv_obj_get_width(obj)  //获取宽度
lv_obj_get_height(obj)  //获取高度

lv_obj_update_layout(obj_left);                      /* 手动更新物体的参数 */

■ LVGL-（lv_obj_t）位置

//位置
lv_obj_set_x(obj, 10);
lv_obj_set_y(obj, 20);   
lv_obj_set_pos(obj, 10, 20); 	//Or in one function

■ LVGL-（lv_obj_t）对齐

在这里插入图片描述

//对齐
lv_obj_set_align(obj, align); //lv_obj_set_align(obj, align);
lv_obj_align(obj, align, x, y);        //更改对齐方式并设置新坐标：

在这里插入图片描述

示例一：右对齐
在这里插入图片描述

对齐问题 点 没有完全重合

lv_obj_t *parent = lv_obj_create(lv_scr_act());
lv_obj_set_size(parent,100,100);
lv_obj_set_style_bg_color(parent,lv_palette_main(LV_PALETTE_BLUE),0);
lv_obj_align(parent,LV_ALIGN_CENTER,0,0);

lv_obj_t *child = lv_obj_create(lv_scr_act());
lv_obj_set_size(child,50,50);
lv_obj_set_style_bg_color(child,lv_palette_main(LV_PALETTE_GREEN),0);
lv_obj_align_to(child,parent,LV_ALIGN_BOTTOM_MID,0,0);

没有完全对齐问题
在这里插入图片描述
==添加 lv_obj_set_style_pad_all(parent,0,0); == 后的效果
在这里插入图片描述

■ LVGL-（lv_obj_t）样式

■ 设置样式函数

在这里插入图片描述
设置颜色后一定要设置_bg_opa 才起效

lv_obj_set_style_bg_color(ui_ContainerBody, lv_color_hex(0x73C3EE), LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_bg_opa(ui_ContainerBody, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_align_to(ui_ContainerBody,ui_Title,LV_ALIGN_OUT_BOTTOM_MID,0,0);

■ 设置样式枚举

在这里插入图片描述

■ 设置样式（大小，位置，背景，轮廓，边框，阴影，其他）

在这里插入图片描述

void lv_style_set_bg_color(lv_style_t * style, lv_color_t value);			//设置背景颜色
void lv_style_set_bg_color_filtered(lv_style_t * style, lv_color_t value);	//设置背景过滤颜色
void lv_style_set_bg_opa(lv_style_t * style, lv_opa_t value);				//设置背景透明度
void lv_style_set_bg_grad_color(lv_style_t * style, lv_color_t value);		//设置背景下半部颜色
void lv_style_set_bg_grad_color_filtered(lv_style_t * style, lv_color_t value);//设置背景下半部过滤颜色
void lv_style_set_bg_grad_dir(lv_style_t * style, lv_grad_dir_t value);		//设置背景下半部颜色填充方向
void lv_style_set_bg_main_stop(lv_style_t * style, lv_coord_t value);		//主色停止
void lv_style_set_bg_grad_stop(lv_style_t * style, lv_coord_t value);		//下半部色停止
void lv_style_set_bg_img_src(lv_style_t * style, const void * value);		//设置背景图片
void lv_style_set_bg_img_opa(lv_style_t * style, lv_opa_t value);			//设置背景图片透明度
void lv_style_set_bg_img_recolor(lv_style_t * style, lv_color_t value);		//设置背景图片重着色
void lv_style_set_bg_img_recolor_filtered(lv_style_t * style, lv_color_t value);//设置背景图片重着色过滤色
void lv_style_set_bg_img_recolor_opa(lv_style_t * style, lv_opa_t value);	//设置背景图片重着色透明度
void lv_style_set_bg_img_tiled(lv_style_t * style, bool value);				//设置背景图片平铺

static inline void lv_style_set_pad_all(lv_style_t * style, lv_coord_t value);	//四边内边距
static inline void lv_style_set_pad_hor(lv_style_t * style, lv_coord_t value);	//水平内边距 左右相同
static inline void lv_style_set_pad_ver(lv_style_t * style, lv_coord_t value);	//竖直内边距 上下相同
static inline void lv_style_set_pad_gap(lv_style_t * style, lv_coord_t value);	//差距内边距 行列相同

lv_obj_set_style_pad_left(ui_LabelLine3_2, 10, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_pad_right(ui_LabelLine3_2, 10, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_pad_top(ui_LabelLine3_2, 10, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_pad_bottom(ui_LabelLine3_2, 10, LV_PART_MAIN | LV_STATE_DEFAULT);


void lv_style_set_border_color(lv_style_t * style, lv_color_t value);			//设置样式边框颜色
void lv_style_set_border_color_filtered(lv_style_t * style, lv_color_t value);	//设置样式边框过滤颜色
void lv_style_set_border_opa(lv_style_t * style, lv_opa_t value);			    //设置样式边框透明度
void lv_style_set_border_width(lv_style_t * style, lv_coord_t value);			//设置样式边框宽度
void lv_style_set_border_side(lv_style_t * style, lv_border_side_t value);		//设置样式边框显示范围
void lv_style_set_border_post(lv_style_t * style, bool value);					//设置样式边框柱
	LV_BORDER_SIDE_NONE 		//无边框
	LV_BORDER_SIDE_BOTTOM      	//底部边框
	LV_BORDER_SIDE_TOP      	//顶部边框
	LV_BORDER_SIDE_LEFT      	//左边边框    
	LV_BORDER_SIDE_RIGHT       	//右边边框  
	LV_BORDER_SIDE_FULL       	//四周边框
	LV_BORDER_SIDE_INTERNAL     //边境一侧内部




lv_style_set_radius(&style, 5);
lv_style_set_bg_opa(&style, LV_OPA_COVER);
lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 3));
lv_style_set_border_width(&style, 2);
lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE));

参考

实例一 outline

static lv_style_t style;                      //创建style
lv_style_init(&style);                        //初始化style

lv_style_set_radius(&style,5);                //设置样式的圆角
lv_style_set_opa(&style,LV_OPA_COVER);        //设置样式背景透明度
lv_style_set_bg_color(&style,lv_palette_lighten(LV_PALETTE_GREY,1));    //设置样式背景颜色

lv_style_set_outline_width(&style,2);          //设置样式轮廓的宽度   
lv_style_set_outline_color(&style,lv_palette_main(LV_PALETTE_BLUE));    //设置样式轮廓颜色
lv_style_set_outline_pad(&style,5);            //设置样式轮廓的边距

lv_obj_t * obj = lv_obj_create(lv_scr_act());  //创建对象
lv_obj_add_style(obj,&style, 0);               //将样式添加到对象中  
lv_obj_center(obj);                            //居中对象

显示结果；
在这里插入图片描述
实例二 border

static lv_style_t style;                       //创建style
lv_style_init(&style);                         //初始化style

lv_style_set_radius(&style,5);                 //设置样式的圆角
lv_style_set_opa(&style,LV_OPA_50);            //设置样式背景透明度
lv_style_set_bg_color(&style,lv_palette_lighten(LV_PALETTE_BLUE_GREY,1));  //设置样式背景颜色

lv_style_set_border_color(&style,lv_palette_main(LV_PALETTE_BLUE));        //设置样式边框颜色
lv_style_set_border_width(&style,5);                  //设置样式边框宽度
lv_style_set_border_opa(&style,LV_OPA_30);            //设置样式边框透明度
lv_style_set_border_side(&style,LV_BORDER_SIDE_FULL); //设置样式边框显示范围

lv_obj_t * obj = lv_obj_create(lv_scr_act());              //创建对象
lv_obj_add_style(obj,&style, 0);               //将样式添加到对象中  
lv_obj_center(obj);                            //居中对象

在这里插入图片描述

实例三 border左上下右边框

lv_obj_set_style_radius(ui_ImageBig,10,LV_PART_MAIN);
lv_obj_set_style_border_color(ui_ImageBig, lv_color_white(), LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_border_width(ui_ImageBig, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_border_opa(ui_ImageBig, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_border_side(ui_ImageBig,LV_BORDER_SIDE_BOTTOM | LV_BORDER_SIDE_TOP | LV_BORDER_SIDE_LEFT,LV_PART_MAIN | LV_STATE_DEFAULT);

实例四 实现圆角功能

 lv_obj_t* ui_main = lv_obj_create(lv_scr_act());
 lv_obj_remove_style_all(ui_main);
 lv_obj_set_size(ui_main, 400, 400);
 lv_obj_set_style_bg_color(ui_main, lv_color_hex(0xdc7878), LV_PART_MAIN);
 lv_obj_set_style_bg_opa(ui_main, 255, LV_PART_MAIN);
 lv_obj_set_style_radius(ui_main, 12, LV_PART_MAIN);
 lv_obj_set_y(ui_main, 76);
 lv_obj_center(ui_main);

 lv_obj_t* ui_radius = lv_obj_create(ui_main); // 矩形
 lv_obj_remove_style_all(ui_radius);
 lv_obj_set_size(ui_radius, 400, 12);
 lv_obj_set_style_bg_color(ui_radius, lv_color_hex(0xdc7878), LV_PART_MAIN);
 lv_obj_set_style_bg_opa(ui_radius, 255, LV_PART_MAIN);
 lv_obj_set_align(ui_radius, LV_ALIGN_BOTTOM_LEFT);

在这里插入图片描述

■ 设置控件子控件样式

知识点一：要单独设置某个控件的样式怎么区分呢？ LVGL 为每个控件都有定义某个部分
在这里插入图片描述

知识点二：这里可以查询每个控件对应的枚举值。
在这里插入图片描述

示例一：设置控件两个子控件两个枚举的背景色
在这里插入图片描述
结果：指示器手柄和滑块都设置为绿色
在这里插入图片描述

示例二：使用样式设置对象大小

使用样式设置对象大小的示例：
static lv_style_t style;
lv_style_init(&style);
lv_style_set_width(&style, 100);

lv_obj_t * btn = lv_btn_create(lv_scr_act());
lv_obj_add_style(btn, &style, LV_PART_MAIN);

■ LVGL-（lv_obj_t）事件

在这里插入图片描述

■ 点击事件

在这里插入图片描述

■ 一个obj添加多个事回调函数

static void scr_event_handle(lv_event_t* e){
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t *target = lv_event_get_target(e);
	char *cur_ssid = NULL;
    printf("shine 12 %s,%d,code = %d\n", __func__, __LINE__, code);
    if (code == LV_EVENT_SCREEN_LOADED) {
    }
}

static void mainpage_scr_event_handle(lv_event_t *e){
    lv_event_code_t code = lv_event_get_code(e);
    printf("shine 13 %s,%d,code = %d\n", __func__, __LINE__, code);
    if(code == LV_EVENT_SCREEN_LOADED){
        projector_set_some_sys_param(P_CUR_CHANNEL, SCREEN_CHANNEL_MAIN_PAGE);
        lv_group_set_default(main_page_g);
    }else if(code == LV_EVENT_SCREEN_UNLOADED){
        win_msgbox_msg_close();
    }
}

lv_obj_add_event_cb(main_page_scr, scr_event_handle, LV_EVENT_ALL, 0); 
lv_obj_add_event_cb(main_page_scr, mainpage_scr_event_handle, LV_EVENT_ALL, 0);

■ 多个对象可以使用一个回调函数

多个对象可以使用一个回调函数
void my_event_cb(lv_obj_t * obj, lv_event_t event)
{
	switch(event){
	case LV_EVENT_PRESSED:              /* 对象被按下 */
	    printf("Pressed\n");
	    break;
	case LV_EVENT_SHORT_CLICKED:        /* 对象被短点击 */
	    printf("Short clicked\n");
	  	break;
	case LV_EVENT_CLICKED:              /* 对象被点击 */
	    printf("Clicked\n");
	    break;
	}
}  
/* 指定一个事件回调函数 */
lv_obj_t * btn = lv_btn_create(lv_scr_act(), NULL);
lv_obj_set_event_cb(btn, my_event_cb);

■ 不同的事件类型共用一个事件回调函数

在这里插入图片描述

■ 事件回调中使用lv_event_cb（）函数区分不同对象的事件

在这里插入图片描述

■ LVGL-区域边界设置

lv_obj_set_ext_click_area(lv_obj_t * obj, lv_coord_t size) | 用户必须要在区域边界内点击对象，这样才能成功触发事件

■ LVGL-父和子对象的关系

在这里插入图片描述

示例一：switch2 在switch1里面。
在这里插入图片描述

■ LVGL-基础对象API 函数

| 属性 | 描述 |

函数描述
lv_obj_create ()创建基础对象（矩形）
lv_obj_set_user_data()设置对象的 user_data 字段
lv_obj_has_flag()检查是否在对象上设置了指定的标志
lv_obj_has_flag_any()检查是否在对象上设置了任何标志
lv_obj_get_state()获取对象的状态
lv_obj_has_state()检查对象是否处于指定状态
lv_obj_get_group()获取对象的组
lv_obj_get_user_data()获取对象的用户数据
lv_obj_allocate_spec_attr()为对象分配特殊数据（还未分配时）
lv_obj_check_type()检查 obj 的类型
lv_obj_has_class()检查是否有任何对象具有指定的类
lv_obj_get_class()获取对象的类
lv_obj_is_valid()检查是否有任何对象在活动
lv_obj_set_ext_click_area(lv_obj_t * obj, lv_coord_t size)用户必须要在区域边界内点击对象，这样才能成功触发事件
光芒Shine
关注
  • 10
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
LVGL---对象(lv_obj_t)
weixin_42162924的博客
11-22 836
LVGL---对象(lv_obj_t)
LVGL---基础对象(lv_obj)
weixin_42162924的博客
11-22 404
LVGL---基础对象(lv_obj)
二.LVGL学习——（lv_obj基础对象）
m0_46278925的博客
11-16 5642
二.LVGL学习——（lv_obj基础对象）1.介绍2.对象的工作机制3.对象的创建与删除4.Screen 屏幕对象5.实例代码 1.介绍 LVGL是以对象为概念的，而其最核心的基础对象是lv_obj控件，其他所有专用控件（如按钮，标签，列表）都是在lv_obj对象的基础上衍生出来的，所有的控件对象都具备一些共同属性，例如： 1. 位置 2. 大小 3. 父类 4. 是否可拖拽 5. 是否可点击 共同属性都是通过一套共同的API接口来设置的。 除了共同属性外,不同的控件都会有自己的专有属性。 2.对象的工作
【LVGL(3)】设置对象大小、位置、盒子模型、状态
热门推荐
知寒
06-12 1万+
【LVGL(3)】设置对象大小、位置、盒子模型、状态
LVGL之盒子模型
杨泽彬的神秘商店
01-19 351
遵循的是CSS样式设计中的border-box模型 将LVGL看作是一个个盒子去做UI设计 这样得出来的界面设计简单，且界面优美。 关注以下概念： 边界（bounding）： 元素的宽度、高度围起来的，实际的盒子外围。 边框（border) : 边框有大小和颜色等属性（相当于是盒子的厚度） 填充（padding):对象两侧与他的子对象的空间 内容（content)：盒子实际装有的东西 轮廓（outline): 不占据实际空间， 更像是word文档中设置好的规定间距。 有时利用轮廓线来突出对象。 理解以及记
LVGL (3) 盒子模型
StephenZhou
05-05 2136
LVGL 遵循 CSS 的 border-box 模型。 对象的“盒子”由以下部分构成： 边界(bounding)：元素的宽度/高度围起来的区域(整个盒子)。 边框(border)：边框有大小和颜色等属性(相当于盒子的厚度和它的颜色)。 填充(padding)：对象两侧与其子对象之间的空间(盒子的填充物)。 内容(content)：如果边界框按边框宽度和填充的大小缩小，则显示其大小的内容区域(盒子实际装东西的区域)。 轮廓(outline) ：LVGL中没有外边距(margin)的概念(盒子之间的
LVGL学习1--对象样式、盒子模型、事件
weixin_43634746的博客
04-08 414
lvgl基础学习1---对象样式、盒子模型、事件
LVGL core obj and obj_class 对象管理(lv_obj.c/lv_obj_class.c)
Bigan(安)的博客
08-29 1647
LVGL的虽然是用c语言实现的代码，却采用lv_obj_t和结构体来实现一些对象思想。相比与C++语言来讲，该套机制实现了继承关系，却没有支持重载关系（之所以说它只支持继承关系而不支持重载，就是因为这个结构体在使用时，多被定义为const修饰，这样对象的功能函数就没法修改了。如果有用到重载关系的，需要开发者自行处理）。对应C++中的类，而lv_obj_t对应着对象，对象lv_obj_t通过类来构造。对象使用中定义的接口来构造成lv_obj_t对象，lv_obj_t对象使用lv_obj.c。...
LVGL中 lv_obj_set_style_base_dir(struct _lv_obj_t * obj, lv_base_dir_t value, lv_style_selector_t selector)，selector是什么意思
05-05
在LVGL中，`lv_style_selector_t`是一个枚举类型，用于指定样式的选择器。样式选择器是一种用于选择要应用样式的元素的方式，类似于CSS中的选择器。在LVGL中，每个对象可以有多个样式，每个样式可以由多个属性组成。...
LVGL开发教程-objects对象
xuewenyu_的博客
06-19 773
在嵌入式 GUI 开发中，LVGL（Light and Versatile Graphics Library）是一个强大的工具，它提供了丰富的功能来创建和定制用户界面。其中，样式的应用是使界面看起来整洁和专业的关键。本文将重点介绍如何使用LVGL的样式系统，通过设置对象的尺寸、位置、对齐方式和外观等属性，来实现界面组件的定制化展示。例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
LVGL_基础控件label
weixin_50183638的博客
10-04 1712
把自己建立的字体加入工程中/* 创建一个基础对象 label */// 创建一个label部件(对象),他的父对象是活动屏幕对象// 声明外部字库lv_label_set_text(label, "百问网嵌入式abcd123.,<>';'[]ABCD");// 显示文字（注意当前文件文本的编码格式，要使用 utf-8 编码）
LVGL调整图像偏移的位置，以及旋转角度
weixin_41880709的博客
11-23 3070
LVGL配置屏幕偏移位置以及旋转角度的说明
LVGL库入门 02 - 布局
LearnLHC的博客
11-02 2095
一般情况下 flex-grow 和带 wrap 的 flex-flow 是冲突的，也就是说所有设置了 flex-grow 的控件都会在同一行布局，但它们的宽度可能变得很窄。调整一个控件的位置（或者使用类似的函数单独调整一个方向的坐标），将它放在相对父容器左上角的合适位置。这种对齐的方式对于控件不多的情况下来说是足够了，但是有些时候需要对很多并列的控件布局（例如，一个计算机界面的所有按钮）。按钮在创建时还可以指定按钮的图标，图标的本质就是 Unicode 中的特殊符号，在。如果一个控件被设置了冒泡事件标志。
【LVGL】笔记一，lv_obj基础对象
liarsup的博客
01-22 3354
lVGL基础用法笔记整理
Lvgl7 基础对象(lv_obj)
wasapp的博客
03-19 5258
Lvgl 基础对象(lv_obj)
littleVGL学习笔记5——lv_obj 基础对象
贾贾的博客
07-12 5803
1.介绍   littleVGL 是以对象为概念的,而其最核心的基础对象是 lv_obj 控件,其他的所有专用控件(比如按钮,标签,列表等)都是在此 lv_obj 对象的基础上衍生出来的,所有的控件对象都具有一些共同的属性,如下所示: 位置(Position) 大小(Size) 父类(Parent) 是否可拖拽(Drag enable) 是否可点击(Click enable)等等   你可以通过 lv_obj_set_…和 lv_obj_get_…这样的 API 接口对来读写这些属性。   下面我们来了
LVGL深色、浅色主题配置
qq_37211777的博客
04-09 743
【代码】LVGL深色、浅色主题配置。
LVGL_基础知识
weixin_50183638的博客
09-24 389
【代码】LVGL_基础知识。
LVGL学习笔记4 - 主题Themes
pq的博客
12-26 3921
目录1. 获取主题句柄2. 设置基础主题3. 设置主题的回调函数4. 使能主题5. 实例5.1 定义一个全局Style变量5.2 显示默认主题风格的矩形5.3 初始化新主题的样式 5.4 初始化新主题 5.5 回调函数的实现 5.6 设置新主题5.7 显示主题是风格的集合。对应的变量结构体是lv_theme_t。定义一个主题也必须是全局变量或者静态的。 参数含义：obj - 对象句柄，如果是NULL，则获取的是默认主题。为主题设置基础主题。基础主题中的样式将添加到当前主题的样式之前。通过设置基本主题，可
LVGL-清空lv_textarea
最新发布
06-27
LVGL是一个流行的开源GUI库，用于创建跨平台的嵌入式设备和Linux应用程序。LVGL提供了高度可定制的文本区域组件`lv_textarea`，用于显示和编辑文本。如果你想在LVGL中清空一个`lv_textarea`，你可以使用`lv_obj_set_text`函数来设置其内容为默认的空字符串。 以下是清空`lv_textarea`的步骤： ```c LV_OBJ_T *textarea = lv_textarea_create(lv_scr_act(), LV_POINT(0, 0)); // 创建文本区域对象 if (textarea != NULL) { // 清空文本区域 lv_obj_set_text(textarea, ""); // 设置文本为空字符串 } ``` 这里，`lv_scr_act()`获取当前活动的屏幕，`LV_POINT(0, 0)`指定文本区域的位置。如果`lv_textarea_create`返回非NULL，表示创建成功，然后调用`lv_obj_set_text(textarea, "")`将文本区域的内容设为空。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

光芒Shine

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值