当前位置：首页 > news >正文

2、在LVGL模拟器中了解部件的基础属性

news 来源：原创 2024/9/27 1:05:11

1、基础部件

void my_gui(void)
{lv_obj_t *obj=lv_obj_create(lv_scr_act());
}

3、部件的基础属性

3.1 大小(size)

设置宽度：lv_obj_set_width(obj,new_width);

设置高度：lv_obj_set_height(obj,new_height);

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

3.2 位置(position)

设置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.3 对齐(alignment)

对齐的模式如图所示，其中参照父对象对齐时使用OUT_XXX_XXX无效，因为子对象无法跑到父对象外面。

1、参照父对象对齐

lv_obj_set_align(obj,LV_ALIGN_XXX);

lv_obj_align(obj,LV_ALIGN_XXX,x,y);

void my_gui(void)
{lv_obj_t *obj=lv_obj_create(lv_scr_act());// lv_obj_set_align(obj,LV_ALIGN_BOTTOM_LEFT);lv_obj_align(obj,LV_ALIGN_BOTTOM_LEFT,100,0);
}

参照

2、参照其他对象对齐

void my_gui(void)
{lv_obj_t *obj=lv_obj_create(lv_scr_act());//对象1lv_obj_set_size(obj,200,200);lv_obj_t *obj2=lv_obj_create(lv_scr_act());//对象2lv_obj_align_to(obj2,obj,LV_ALIGN_OUT_RIGHT_MID,0,0);
}

3.4 样式(styles)（颜色的HEX值可通过截图工具获取）

1、添加普通样式（好处是可共享，即定义的style）

void my_gui(void)
{static lv_style_t style; 									/* 定义样式变量 */lv_style_init(&style); 									/* 初始化样式 */lv_style_set_bg_color(&style, lv_color_hex(0x89d961)); 				/* 设置背景颜色 */lv_obj_t * obj = lv_obj_create(lv_scr_act()); lv_obj_add_style(obj,&style,LV_STATE_DEFAULT);
}

注意：static lv_style_t style;必须定义为静态的

运行效果如图

2、添加本地样式

void my_gui(void)
{lv_obj_t *obj=lv_obj_create(lv_scr_act());lv_obj_set_style_bg_color(obj,lv_color_hex(0x65a8fa),LV_STATE_DEFAULT);
}

运行效果

边框

void my_gui(void)
{lv_obj_t *obj=lv_obj_create(lv_scr_act());lv_obj_align(obj,LV_ALIGN_CENTER,0,0);lv_obj_set_style_border_color(obj,lv_color_hex(0x04ff50),LV_STATE_DEFAULT);//绿色lv_obj_set_style_border_width(obj,10,LV_STATE_DEFAULT);//边宽lv_obj_set_style_border_opa(obj,100,LV_STATE_DEFAULT);//边框透明度，最大值255lv_obj_set_style_bg_color(obj,lv_color_hex(0x65a8fa),LV_STATE_PRESSED);//蓝色
}

鼠标按下时的效果

轮廓

void my_gui(void)
{//边框lv_obj_t *obj=lv_obj_create(lv_scr_act());lv_obj_align(obj,LV_ALIGN_CENTER,0,0);lv_obj_set_style_border_color(obj,lv_color_hex(0x04ff50),LV_STATE_DEFAULT);//绿色lv_obj_set_style_border_width(obj,10,LV_STATE_DEFAULT);//边宽lv_obj_set_style_border_opa(obj,100,LV_STATE_DEFAULT);//边框透明度，最大值255lv_obj_set_style_bg_color(obj,lv_color_hex(0x65a8fa),LV_STATE_PRESSED);//蓝色//轮廓lv_obj_set_style_outline_color(obj,lv_color_hex(0xfefe00),LV_STATE_DEFAULT);//黄色lv_obj_set_style_outline_width(obj,10,LV_STATE_DEFAULT);//轮廓lv_obj_set_style_outline_opa(obj,100,LV_STATE_DEFAULT);//轮廓透明度，最大值255
}

默认及按下鼠标的效果

进度条

void my_gui(void)
{lv_obj_t *slider=lv_slider_create(lv_scr_act());lv_obj_set_align(slider,LV_ALIGN_CENTER);lv_obj_set_style_bg_color(slider,lv_color_hex(0xfa3e0c),LV_STATE_PRESSED);//红色lv_obj_set_style_bg_color(slider,lv_color_hex(0xfa3e0c),LV_STATE_DEFAULT|LV_PART_INDICATOR);//红色
}

3.5 事件(events)

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

static void my_event_cb(lv_event_cb_t *e);void my_gui(void)
{lv_obj_t *obj=lv_obj_create(lv_scr_act());lv_obj_add_event_cb(obj,my_event_cb,LV_EVENT_CLICKED,NULL);lv_obj_add_event_cb(obj,my_event_cb,LV_EVENT_LONG_PRESSED,NULL);
}static void my_event_cb(lv_event_cb_t *e)
{lv_event_code_t code=lv_event_get_code(e);if(code==LV_EVENT_CLICKED){printf("LV_EVENT_CLICKED\n");}else if(code==LV_EVENT_LONG_PRESSED){printf("LV_EVENT_LONG_PRESSED\n");}
}

效果如图

2、不同的部件共用一个事件回调函数

//部件需要定义在全局，回调函数才能使用
lv_obj_t *obj;
lv_obj_t *obj2;static void my_event_cb(lv_event_cb_t *e);void my_gui(void)
{obj=lv_obj_create(lv_scr_act());lv_obj_set_align(obj,LV_ALIGN_CENTER);//obj部件在中间obj2=lv_obj_create(lv_scr_act());//obj2默认处于左上角lv_obj_add_event_cb(obj,my_event_cb,LV_EVENT_CLICKED,NULL);lv_obj_add_event_cb(obj2,my_event_cb,LV_EVENT_LONG_PRESSED,NULL);
}static void my_event_cb(lv_event_cb_t *e)
{lv_obj_t *target=lv_event_get_target(e);if(target==obj){printf("obj\n");}else if(target==obj2){printf("obj2\n");}
}

效果如下