【LVGL- 基础对象(lv_obj_t)】

已于 2025-01-15 14:59:58 修改
阅读量2k 收藏 24
点赞数 12
分类专栏： # 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）Flag

enum {
    LV_OBJ_FLAG_HIDDEN          = (1L << 0),  /**< Make the object hidden. (Like it wasn't there at all)*/
    LV_OBJ_FLAG_CLICKABLE       = (1L << 1),  /**< Make the object clickable by the input devices*/
    LV_OBJ_FLAG_CLICK_FOCUSABLE = (1L << 2),  /**< Add focused state to the object when clicked*/
    LV_OBJ_FLAG_CHECKABLE       = (1L << 3),  /**< Toggle checked state when the object is clicked*/
    LV_OBJ_FLAG_SCROLLABLE      = (1L << 4),  /**< Make the object scrollable*/
    LV_OBJ_FLAG_SCROLL_ELASTIC  = (1L << 5),  /**< Allow scrolling inside but with slower speed*/
    LV_OBJ_FLAG_SCROLL_MOMENTUM = (1L << 6),  /**< Make the object scroll further when "thrown"*/
    LV_OBJ_FLAG_SCROLL_ONE      = (1L << 7),  /**< Allow scrolling only one snappable children*/
    LV_OBJ_FLAG_SCROLL_CHAIN_HOR = (1L << 8), /**< Allow propagating the horizontal scroll to a parent*/
    LV_OBJ_FLAG_SCROLL_CHAIN_VER = (1L << 9), /**< Allow propagating the vertical scroll to a parent*/
    LV_OBJ_FLAG_SCROLL_CHAIN     = (LV_OBJ_FLAG_SCROLL_CHAIN_HOR | LV_OBJ_FLAG_SCROLL_CHAIN_VER),
    LV_OBJ_FLAG_SCROLL_ON_FOCUS = (1L << 10),  /**< Automatically scroll object to make it visible when focused*/
    LV_OBJ_FLAG_SCROLL_WITH_ARROW  = (1L << 11), /**< Allow scrolling the focused object with arrow keys*/
    LV_OBJ_FLAG_SNAPPABLE       = (1L << 12), /**< If scroll snap is enabled on the parent it can snap to this object*/
    LV_OBJ_FLAG_PRESS_LOCK      = (1L << 13), /**< Keep the object pressed even if the press slid from the object*/
    LV_OBJ_FLAG_EVENT_BUBBLE    = (1L << 14), /**< Propagate the events to the parent too*/
    LV_OBJ_FLAG_GESTURE_BUBBLE  = (1L << 15), /**< Propagate the gestures to the parent*/
    LV_OBJ_FLAG_ADV_HITTEST     = (1L << 16), /**< Allow performing more accurate hit (click) test. E.g. consider rounded corners.*/
    LV_OBJ_FLAG_IGNORE_LAYOUT   = (1L << 17), /**< Make the object position-able by the layouts*/
    LV_OBJ_FLAG_FLOATING        = (1L << 18), /**< Do not scroll the object when the parent scrolls and ignore layout*/
    LV_OBJ_FLAG_OVERFLOW_VISIBLE = (1L << 19), /**< Do not clip the children's content to the parent's boundary*/

    LV_OBJ_FLAG_LAYOUT_1        = (1L << 23), /**< Custom flag, free to use by layouts*/
    LV_OBJ_FLAG_LAYOUT_2        = (1L << 24), /**< Custom flag, free to use by layouts*/

    LV_OBJ_FLAG_WIDGET_1        = (1L << 25), /**< Custom flag, free to use by widget*/
    LV_OBJ_FLAG_WIDGET_2        = (1L << 26), /**< Custom flag, free to use by widget*/
    LV_OBJ_FLAG_USER_1          = (1L << 27), /**< Custom flag, free to use by user*/
    LV_OBJ_FLAG_USER_2          = (1L << 28), /**< Custom flag, free to use by user*/
    LV_OBJ_FLAG_USER_3          = (1L << 29), /**< Custom flag, free to use by user*/
    LV_OBJ_FLAG_USER_4          = (1L << 30), /**< Custom flag, free to use by user*/

};

lv_obj_add_flag(obj, LV_OBJ_FLAG_HIDDEN);   //隐藏
lv_obj_clear_flag(obj, LV_OBJ_FLAG_HIDDEN);  //显示

■ LVGL-（lv_obj_t）位置 pos

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

lv_coord_t lv_obj_get_x2(const lv_obj_t * obj)


lv_area_t coords;
lv_obj_get_coords(obj,&coords);  // 获取obj位置
printf("%d,%d,%d,%d\n",coords.x1,coords.y1,coords.x2,coords.y2);



//获取输入设备坐标
lv_indev_t* indev = lv_indev_get_act(); //获取输入设备
if (indev == NULL)  return;
lv_point_t   lv_point;
lv_indev_get_point(indev, &lv_point);
printf("[%s]  lv_point.x = %d  lv_point.y = %d \n", __func__, lv_point.x, lv_point.y);

■ LVGL-（lv_obj_t）对齐 align

在这里插入图片描述

//对齐
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）样式 style

■ 设置样式函数

在这里插入图片描述
设置颜色后一定要设置_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);

■ 设置样式枚举

在这里插入图片描述

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

在这里插入图片描述

■ 设置样式- 背景颜色 bg_color
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);				//设置背景透明度
			设置背景的不透明度。值0，
			LV_OPA_0或LV_OPA_TRANSP 表示完全透明，
			256，LV_OPA_100 或 LV_OPA_COVER 表示完全覆盖，其他值或
			LV_OPA_10、LV_OPA_20 等表示半透明。
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);		//下半部色停止
■ 设置样式- 背景图片 bg_img
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);				//设置背景图片平铺
■ 设置样式- 内边距 pad_top，left，right

本地

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);  //设置本地顶部内边距
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);   //设置本地右边内边距

static inline void lv_obj_set_style_pad_hor(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);//水平方向- 左右两边相等
static inline void lv_obj_set_style_pad_ver(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);//垂直方向
static inline void lv_obj_set_style_pad_gap(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);//间隔
static inline void lv_obj_set_style_pad_all(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);//全部

样式

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);	//差距内边距 行列相同

void lv_style_set_pad_top(lv_style_t * style, lv_coord_t value);		//设置样式顶部内边距
void lv_style_set_pad_bottom(lv_style_t * style, lv_coord_t value);		//设置样式底部内边距
void lv_style_set_pad_left(lv_style_t * style, lv_coord_t value);		//设置样式左边内边距
void lv_style_set_pad_right(lv_style_t * style, lv_coord_t value);		//设置样式右边内边距
void lv_style_set_pad_row(lv_style_t * style, lv_coord_t value);		//设置样式内部对象之间的行间距由布局使用
void lv_style_set_pad_column(lv_style_t * style, lv_coord_t value);		//设置样式内部对象之间的列间距由布局使用

演示：

/*************************************************
 *  函数名称 :  lv_style_pad 样式设置边距
 *  参    数 ： 无
 *  函数功能 ： 设置样式圆角、尺寸、内边距、位置
 *************************************************/
void lv_style_pad(void)
{
   static lv_style_t style;         //创建样式
   lv_style_init(&style);           //初始化样式
   lv_style_set_radius(&style,5);   //设置样式的圆角

   lv_style_set_width(&style,150);  //设置样式的宽度
   lv_style_set_height(&style, LV_SIZE_CONTENT); //设置样式的高度 我的理解是自适应高度

   lv_style_set_pad_ver(&style,20); //设置样式的上下内边距
   lv_style_set_pad_left(&style,5); //设置左边距

   lv_style_set_x(&style,lv_pct(50));  //设置样式的x位置 ，基准点左上角
   lv_style_set_y(&style,80);       //设置样式的y位置

   lv_obj_t * obj = lv_obj_create(lv_scr_act());   //创建对象
   lv_obj_add_style(obj,&style,0);                 //设置对象的样式 默认模式

   lv_obj_t * label = lv_label_create(obj);        //创建Label obj 为父对象
   lv_label_set_text(label,"Hello ESP32");         //设置Label显示
}

在这里插入图片描述

■ 设置样式- 内边距 pad_row ,pad_column
static void lv_example_flex_5(void)
{
    lv_obj_t* cont = lv_obj_create(lv_scr_act()); //当前活动界面创建obj对象
    lv_obj_set_size(cont, 300, 220); // 设置大小
    lv_obj_center(cont); // 居中显示
    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP); //LV_FLEX_FLOW_ROW_WRAP方式排列
    uint32_t i;
    for (i = 0; i < 9; i++) {
        lv_obj_t* obj = lv_obj_create(cont); //在cont对象上创建obj对象
        lv_obj_set_size(obj, 70, LV_SIZE_CONTENT); // 设置大小
        lv_obj_t* label = lv_label_create(obj); //在obj对象上创建label
        lv_label_set_text_fmt(label, "%d", i); //设置显示内容
        lv_obj_center(label); // 居中显示
    }
    lv_anim_t a;
    lv_anim_init(&a); //初时化动画变量
    lv_anim_set_var(&a, cont); // 设置动画操作对象
    lv_anim_set_values(&a, 0, 10);　// 设置动画start,end值
    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);// 设置重复次数为无限重复
    lv_anim_set_exec_cb(&a, row_gap_anim); // 注册动画执行回调函数
    lv_anim_set_time(&a, 500);　//  设置动画持续时间
    lv_anim_set_playback_time(&a, 500);　// 设置动画回播时间
    lv_anim_start(&a);　　// 启动动画
    lv_anim_set_exec_cb(&a, column_gap_anim);　// 注册动画执行回调函数
    lv_anim_set_time(&a, 3000);　　// 设置动画持续时间
    lv_anim_set_playback_time(&a, 3000);　// 设置动画回播时间
    lv_anim_start(&a);　　　// 启动动画
}

在这里插入图片描述

■ 设置样式- 边框 pad_all

设置lv_list前
在这里插入图片描述

设置lv_list后

    lv_obj_set_style_pad_all(sowye_my_dev_list, 0, LV_PART_MAIN);//全部

在这里插入图片描述

■ 设置样式- 边框 border_XXX

本地

 lv_obj_set_style_border_color(ebook_btn[i], lv_color_hex(0xFF0000), 0);
 lv_obj_set_style_border_width(ebook_btn[i],6,0);
 lv_obj_set_style_border_side(ebook_btn[i],LV_BORDER_SIDE_BOTTOM | LV_BORDER_SIDE_RIGHT,0);
 lv_obj_set_style_border_opa(ebook_btn[i],255,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));
■ 设置样式- 阴影 shadow_xxx
lv_obj_set_style_shadow_ofs_x(ui_prev_page, 6, LV_PART_MAIN);
lv_obj_set_style_shadow_ofs_y(ui_prev_page, 6, LV_PART_MAIN);
lv_obj_set_style_shadow_color(ui_prev_page, lv_color_hex(0x3d89ad), LV_PART_MAIN);
lv_obj_set_style_shadow_opa(ui_prev_page, 177, LV_PART_MAIN);

在这里插入图片描述

参考

■ 设置样式- outline

可以用遥控器和按键 改变焦点，有效。

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_border_color(obj, lv_color_white(), LV_PART_MAIN | LV_STATE_FOCUS_KEY);
lv_obj_set_style_border_width(obj, 5, LV_PART_MAIN | LV_STATE_FOCUS_KEY);
lv_obj_set_style_border_opa(obj, 255, LV_PART_MAIN | LV_STATE_FOCUS_KEY);

lv_obj_set_style_outline_color(obj, lv_color_white(), LV_PART_MAIN | LV_STATE_FOCUS_KEY);
lv_obj_set_style_outline_width(obj, 5, LV_PART_MAIN | LV_STATE_FOCUS_KEY);
lv_obj_set_style_outline_opa(obj, 255, LV_PART_MAIN | LV_STATE_FOCUS_KEY);

实例一 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-弹性增长值

注意事项：

  • 弹性增长属性仅在父容器使用弹性布局时有效。
  • 弹性增长值为0时表示不参与额外空间的分配。
  • 当多个子对象具有弹性增长属性时，它们之间的空间分配是按照各自的弹性增长值比例进行的。
lv_obj_t * obj;
obj = lv_obj_create(cont); // 在容器上创建对象
lv_obj_set_size(obj, 40, 40); // 设置对象大小

obj = lv_obj_create(cont); // 再次创建对象
lv_obj_set_flex_grow(obj, 1); // 设置弹性增长值为1

obj = lv_obj_create(cont); // 再次创建对象
lv_obj_set_flex_grow(obj, 2); // 设置弹性增长值为2

lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW); // 设置容器为行布局

■ LVGL-弹性增长值- 实例一：

lv_obj_t * cont = lv_obj_create(lv_scr_act()); // 基于屏幕创建一个cont容器对象
lv_obj_set_size(cont, 400, 220); // 设置对象大小
lv_obj_center(cont); // 对象显示在屏幕中央
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW); // 设置对象弹性布局的排列方式，把子对象排成一行，而不需要包裹

lv_obj_t * obj = NULL;
obj = lv_obj_create(cont);
lv_obj_set_size(obj, 20, 40); // 设置对象大小

obj = lv_obj_create(cont);
lv_obj_set_height(obj, 40); // 设置对象高度
lv_obj_set_flex_grow(obj, 1);  // 宽度弹性增长，使用一份的剩余空间

obj = lv_obj_create(cont);
lv_obj_set_height(obj, 40);
lv_obj_set_flex_grow(obj, 2);   // 宽度弹性增长，使用2份的剩余空间

obj = lv_obj_create(cont);
lv_obj_set_height(obj, 40);
lv_obj_set_flex_grow(obj, 3);   // 宽度弹性增长，使用3份的剩余空间

obj = lv_obj_create(cont);
lv_obj_set_size(obj, 40, 40);

在这里插入图片描述

■ LVGL-扩展点击区域

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

默认情况下，只能在对象的坐标上单击对象，
可以使用 lv_obj_set_ext_click_area(obj, left, right, top, bottom) 扩展该区域。
左侧(left)/右侧(right)/顶部(top)/底部(bottom) 描述了可点击区域应在每个方向上超出默认范围的程度。

前提是要在 lv_conf.h 使能 LV_USE_EXT_CLICK_AREA 启用此功能。可能的值为：
LV_EXT_CLICK_AREA_FULL 将所有 4 个坐标存储为 lv_coord_t
LV_EXT_CLICK_AREA_TINY 仅将水平和垂直坐标(使用 左/右和上/下 的较大值)存储为 uint8_t
LV_EXT_CLICK_AREA_OFF 禁用此功能

■ LVGL-父和子对象的关系

在这里插入图片描述

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

■ LVGL-图层设到前台(foreground)展示

属性描述
lv_obj_set_top(obj，true)如果 obj 或它的任何子对象被点击，那么 LVGL 将自动将该对象带到前台。
lv_obj_move_foreground(obj)显式地告诉库将对象带到前台。类似地，
lv_obj_move_background(obj)将对象 obj 移动到背台。
lv_obj_set_parent(obj，new_parent)obj 将在 new_parent 的前面。
lv_obj_set_top(obj，true) 。如果 obj 或它的任何子对象被点击，那么 LVGL 将自动将该对象带到前台。它的工作原理类似于PC机上典型的GUI，当点击背景中的窗口时，它会在前台展示。
lv_obj_move_foreground(obj) 显式地告诉库将对象带到前台。类似地，使用
lv_obj_move_background(obj) 将对象 obj 移动到背台。
lv_obj_set_parent(obj，new_parent) 时， obj 将在 new_parent 的前面。

■ foreground循环更替处理

   static lv_style_t style1, style2;
 
    rect1 = lv_obj_create(lv_scr_act());
    rect2 = lv_obj_create(lv_scr_act());
    rect3 = lv_obj_create(lv_scr_act());
 
    lv_obj_set_size(rect1, LV_PCT(20), LV_PCT(20));
    lv_obj_align(rect1, LV_ALIGN_TOP_LEFT, 20, 20);
    
    lv_style_init(&style1);
    lv_style_set_bg_color(&style1, lv_palette_lighten(LV_PALETTE_GREY, 1));
    lv_obj_add_style(rect2, &style1, LV_STATE_DEFAULT);
    lv_obj_set_size(rect2, LV_PCT(20), LV_PCT(20));
    lv_obj_align(rect2, LV_ALIGN_TOP_LEFT, 70, 20);
 
    lv_style_init(&style2);
    lv_style_set_bg_color(&style2, lv_palette_lighten(LV_PALETTE_GREEN, 1));
    lv_obj_add_style(rect3, &style2, LV_STATE_DEFAULT);
    lv_obj_set_size(rect3, LV_PCT(20), LV_PCT(20));
    lv_obj_align(rect3, LV_ALIGN_TOP_LEFT, 120, 20);
 
    label = lv_label_create(lv_scr_act());
    lv_obj_set_size(label, LV_PCT(20), LV_PCT(20));
    lv_obj_align(label, LV_ALIGN_TOP_LEFT, 120, 120);

void testLayerLoop(void)
{
    static uint32_t loopCnt = 0;
    static uint8_t loopFlag = 0;
 
    if (((++loopCnt) % 1000) == 0)
    {
        switch (loopFlag)
        {
            case 0:
                lv_obj_move_foreground(rect1);
                lv_label_set_text(label, "0");
                break;
            case 1:
                lv_obj_move_foreground(rect2);
                lv_label_set_text(label, "1");
                break;
            case 2:
                lv_obj_move_foreground(rect3);
                lv_label_set_text(label, "2");
                break;
            case 3:
                lv_obj_move_background(rect3);
                lv_label_set_text(label, "3");
                break;
            case 4:
                lv_obj_move_background(rect2);
                lv_label_set_text(label, "4");
                break;
            case 5:
                lv_obj_move_background(rect1);
                lv_label_set_text(label, "5");
                loopFlag = (uint8_t)-1;
                break;
 
        }
        loopFlag++;
    }
}

■ LVGL-清除滚动条

LV_SCROLLBAR_MODE_OFF     	表示关闭滚动条。
LV_SCROLLBAR_MODE_ON 		表示始终显示滚动条。
LV_SCROLLBAR_MODE_AUTO 		表示自动显示滚动条（当内容超出容器时显示）。
LV_SCROLLBAR_MODE_DRAG	 	表示拖动内容时显示滚动条。

// 清除垂直滚动条
lv_obj_set_scrollbar_mode(obj, LV_SCROLLBAR_MODE_OFF);

// 清除水平滚动条
lv_obj_set_scrollbar_mode(obj, LV_SCROLLBAR_MODE_OFF);

// 如果你同时想清除垂直和水平滚动条，可以这样做：
lv_obj_set_scrollbar_mode(obj, LV_SCROLLBAR_MODE_OFF);

■ 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)用户必须要在区域边界内点击对象，这样才能成功触发事件

■ 参考博主链接

参考博主链接

LVGL---对象(lv_obj_t)
weixin_42162924的博客
11-22 1052
LVGL---对象(lv_obj_t)
LVGL---基础对象(lv_obj)
weixin_42162924的博客
11-22 516
LVGL---基础对象(lv_obj)
【随笔记】Littlevgl 8.x 踩过的坑
lovemengx的博客
04-14 5099
在多线程并发使用的时候，总是在运行过程中莫名其妙的 crash，后面才意识到 LVGL 本身不支持并发，加了互斥锁解决了。 在引入矢量字库时（freetype），又有启动时会概率性 crash 的问题，每次 crash 的地方还不一样，这个坑爬了好久，甚至都怀疑是不是 freetype 有问题，还好总算找到方法解决了，不过还不清楚具体原因，先记录。 以下以 linux 平台下 C++ 语言的方式举例说明，理解方法即可。 一、多线程并发使用 多线程并发使用时，需要在以下两种情况加上互斥锁： 1. .
lvgl 效果实现
最新发布
qq_48798329的博客
03-18 112
lvgl实现动画效果
LVGL 控件之基础对象（lv_obj）
热门推荐
Projectsauron 的博客
08-30 3万+
管理其他部件的基本属性；作为背景装饰；辅助布局；界面切换。坐标父对象基于父对象的后代包含样式诸如ClickableScrollable等属性。在面向对象的思想中，基础对象就是LVGL 中所有其他对象都继承自的基类。基础对象的功能可以与其他控件一起使用。例如基础对象可以直接用作一个简单的控件：它只不过是一个矩形。在 HTML 术语中，将其视为 。
屏幕对象（lv_obj_t）的应用
Doyoung的专栏
04-24 2012
说明 lv_obj_t对象本质上为根容器（container），用来放入一些控件，使用lv_obj_create（）进行创建，对于更复杂的控件，则需使用lv_xx_create（）实现。 效果一：创建新屏幕（背景为黄色） 程序中创建的按钮为默认界面的按钮，由于加载了新的界面，会覆盖默认界面。 代码实现 void lv_100ask_demo_course_2_1_1(void) { //为默认界面创建按钮 lv_obj_t *btn = lv_btn_cr...
调试 lvgl 的一个例子
weixin_34208185的博客
08-22 9135
发现一个新的 vector graphic 的库，用 C 写的，效果丰富，接口简单，而且是 MIT License，所以想试一试。因为它支持 framebuffer，所以，在 linux 上先走一个。 项目主页：https://littlevgl.com/   1. 文件准备 项目组织还不是很好，所以需要手动配置项目，需要的文件包括： - lvgl 主项目  - lv_driver 目...
【LVGL】笔记一，lv_obj基础对象
liarsup的博客
01-22 3809
lVGL基础用法笔记整理
【全csdn最前沿LVGL9】基础对象lv_obj
m0_62599305的博客
01-31 2252
LVGL（LittlevGL）是一个开源的嵌入式图形库，用于在嵌入式系统中创建用户界面。LVGL提供了一系列丰富而灵活的功能，使得开发者能够轻松创建漂亮、交互性强的用户界面。其中，lv_obj是LVGL中的基础对象，为整个图形库的构建提供了坚实的基础。本文将深入探讨LVGL的基础对象lv_obj，解释其在嵌入式界面开发中的关键作用。我们将介绍lv_obj的基本概念、用法和一些常见的应用场景，以帮助开发者更好地理解和利用LVGL进行嵌入式图形界面开发。基础要素定义：'基础对象’的属性。
1、LVGL基础对象（lv_obj）
weixin_68094467的博客
08-27 637
例如，可以根据当前连接的传感器创建仪表、图表、条形图和滑块所需的UI再进行创建（比如之前需要图标，突然传感器去掉了，那么可以选择不创建该ui控件）。每个对象都必须会有且仅有一个父对象（屏幕除外），但一个父对象可以有任意数量的子对象。所有控件的API在它们各自的文档中有描述，但也可以查看相应的头文件（例如， widgets/lv_slider.h）。小实验演示二：子对象的位置超出父对象的范围，则超出的部分不显示。2、子对象的位置超出父对象的范围，则超出的部分不显示。♦♦♦♦♦♦♦♦ 2.2 创建和删除对象。
lvgl：对象 obj
caesura_k
08-24 713
1 对象 object   1.1 对象 lv_obj_t     对象object：构建用户界面的基本单位，也称之为控件widgets；对于button,label,image,list等组件都可称之为对象； //lv_obj.h 对象结构体； typedef struct _lv_obj_t { const lv_obj_class_t *class_p; struct ...
lv_examples：LVGL嵌入式GUI库的示例，教程和应用程序
02-12
LVGL的例子 在这里，您可以找到LVGL嵌入式GUI库的示例和演示。 将示例添加到您的项目中 克隆此存储库： git clone https://github.com/lvgl/lv_examples.git 。 lv_examples目录应位于项目中lvgl目录的旁边。 与lv_conf.h类似， lv_conf.h也有一个配置文件。 它称为lv_ex_conf.h 。 将lv_examples/lv_ex_conf_templ.h复制到lv_examples目录旁边 将其重命名为lv_ex_conf.h 将第一个#if 0更改为#if 1以启用文件的内容 启用或禁用模块 例子 开始吧 如果您不熟悉LVGL，请首先检查以下示例。 他们展示了图书馆的基本机制。 请参阅文件夹。 您也可以查看LVGL的Quich以了解基础知识。 款式 LVGL具有功能强大且用途广泛的样式系统。 这些
1.基础对象lv_obj_t
qq_35139677的博客
07-23 182
123。
项目经验分享：LVGL编程举例
Donald_Shallwing的博客
05-31 1万+
与绝大多数GUI组件相似，LVGL的GUI组件主要包括Lable（标签）、Button（按键）、Image（图片）、Image Button（图片按钮）、Keyboard（键盘）、Calendar（日历表）、Chart（数据表）等。LVGL中所有的组件对象都是由lv_obj_t来定义的，并通过对应的组件创建函数lv_XXX_create来创建相关的对象。lv_scr_act()表示对组件赋予显示功能。
LVGL学习笔记及使用案例
嵌入式C
05-12 1282
LVGL
《ESP32-Arduino》LVGL之输入设备详解及实例(触摸屏,实体按键,编码器,多功能按键)
MGodmonkey的专属博客
03-01 1万+
LVGL之输入设备详解及实例(触摸屏,实体按键,编码器,多功能按键)
【LVGL】对象
yaolcc的博客
10-15 2203
在现实生活中，我们所说的原点，一般是指“笛卡尔坐标系”，也叫做直角坐标系，就是我们数学中使用的坐标系，它的原点在左下角，y轴自下而上，x轴自左向右。而在屏幕中我们使用的是“lcd坐标系”，它的原点是在左上角，y轴是自上而下的，x轴自左向右。lvgl提供了对齐的表示方式。(注意：设置的x或者y支持设置负值，显示效果会是超过屏幕的边界，只显示可显示的区域)样式就是用名称保存下来的，对修饰对象进行修饰所使用的一组修饰参数。只要确定了原点，我们就可以按照坐标系，确定部件的位置。在lvgl中位置是相对屏幕的位置。
LVGL开发教程-objects对象
xuewenyu_的博客
06-19 1178
在嵌入式 GUI 开发中，LVGL（Light and Versatile Graphics Library）是一个强大的工具，它提供了丰富的功能来创建和定制用户界面。其中，样式的应用是使界面看起来整洁和专业的关键。本文将重点介绍如何使用LVGL的样式系统，通过设置对象的尺寸、位置、对齐方式和外观等属性，来实现界面组件的定制化展示。例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
LVGL (8) 绘制流程
李白
05-14 7817
目录 Preview LVGL Tick Timer Handler lv_timer_exec 显式刷屏任务 _lv_disp_refr_timer 小结 Preview 整个 LVGL Framework 的运转，都是基于 LVGL 中定义的所谓的 ”Timer“ 定时器的，系统需要给 LVGL 一个 ”心跳“，LVGL Framework 才可以正常的运转起来； 基于这样的一个框架，LVGL 定义了两个函数，需要与系统进行对接： lv_tick_inc：用于系统告知 LVGL 时间； lv_tim
lvgl没有LV_OBJ_FLAG_DISABLED
01-04
### 关于 `LV_OBJ_FLAG_DISABLED` 的替代方法 在 LVGL 中，当不再希望使用 `LV_OBJ_FLAG_DISABLED` 来控制对象的状态时，可以考虑其他机制来模拟禁用效果。一种常见的方式是通过修改对象的样式和响应行为。 #### 使用自定义属性代替 `LV_OBJ_FLAG_DISABLED` 可以通过设置特定样式的透明度或颜色变化以及阻止事件传递的方式来模仿禁用的效果： ```c // 创建一个按钮并应用初始样式 lv_obj_t *button = lv_btn_create(lv_scr_act()); // 定义一个新的样式用于表示“禁用” static lv_style_t style_disabled; lv_style_init(&style_disabled); lv_style_set_bg_opa(&style_disabled, LV_OPA_50); // 半透明背景 lv_style_set_text_opa(&style_disabled, LV_OPA_50); // 文本半透明 // 应用该样式到目标控件上以达到视觉上的禁用效果 lv_obj_add_style(button, &style_disabled, LV_PART_MAIN); // 阻止点击事件到达此控件 lv_group_remove_all_objs(); ``` 另一种做法是在处理输入事件之前先判断当前状态是否允许交互操作，在不允许的情况下忽略这些事件: ```c void button_event_cb(lv_event_t *e) { lv_event_code_t code = lv_event_get_code(e); lv_obj_t *obj = lv_event_get_target(e); if (code == LV_EVENT_CLICKED && !is_enabled(obj)) { // 假设有一个 is_enabled 函数用来检测启用/禁用情况 return; // 如果处于禁用状态下，则不执行任何动作 } // 继续正常逻辑... } ``` 以上两种方法都可以有效地替换掉直接依赖 `LV_OBJ_FLAG_DISABLED` 的场景[^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

光芒Shine

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

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

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

打赏作者

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

抵扣说明：

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

余额充值