属性有关的API - lightdong/LVGL_Study GitHub Wiki
/一些常见的API就是下面这些/
/设置部件大小/
lv_obj_set_width(obj0,50);//改变宽度
lv_obj_set_height(obj0,50);//改变高度
lv_obj_set_size(obj0,120,120);//改变尺寸,在这个API里面其实是调用的前两个函数.
/设置部件位置/
lv_obj_set_x(obj1,50);
lv_obj_set_y(obj1,50);
lv_obj_set_pos(btn1,100,100);
/设置部件对齐(父子类)/
lv_obj_set_align(obj2,LV_ALIGN_BOTTOM_MID);
lv_obj_set_align(obj3,LV_ALIGN_RIGHT_MID);
lv_obj_set_align(obj4,LV_ALIGN_LEFT_MID);
lv_obj_align(obj4,LV_ALIGN_BOTTOM_MID,40,40);//可以在对齐的基础上进行移动
/设置部件对齐(兄弟类)/
/*父子关系的部件对齐的方式有9种,兄弟关系的部件对齐的方式有18种*/
lv_obj_align_to(obj2,obj1,LV_ALIGN_OUT_BOTTOM_RIGHT,0,0);
lv_obj_align_to(obj2,obj1,LV_ALIGN_OUT_RIGHT_MID,0,0);
lv_obj_align_to(obj2,obj1,LV_ALIGN_OUT_RIGHT_MID,40,0);
lv_obj_align_to(obj2,obj1,LV_ALIGN_OUT_LEFT_MID,0,0);
lv_obj_align_to(obj2,obj1,LV_ALIGN_LEFT_MID,0,0);
/* 修改样式方式一:obj_add_style 方式二:obj_set_style 方式一的优点是全局存在,可以给不同的部件使用 方式二的优点是可以快速复制大量的相同样式的部件,用方式一的话还要再重新定义一个有关样式的静态变量
一般是两者配合使用,比如说可以obj_set_style后再obj_add_style给覆盖一下 */
/通过obj_add_style来改变部件样式/
static lv_style_t style1;//先定义一个静态变量(样式的)并初始化,因为静态变量函数周期内都存在
lv_style_init(&style1);
lv_style_set_bg_color(&style1,lv_color_hex(0x00ff00));//设置背景颜色,lv_color_hex这个API可以选择RGB888中的哪一个颜色
lv_style_set_bg_opa(&style1,LV_OPA_30);//设置背景透明度
lv_obj_add_style(obj1,&style1,LV_STATE_PRESSED);//选择在按下时会改变颜色
/*部件的删除,删除一般不常用,下面两个API没有研究清楚*/
lv_obj_remove_style_all(obj1);//这个把整个部件都删除了
lv_obj_remove_style(obj1,&style1,LV_STATE_DEFAULT);
lv_obj_remove_style(obj1,&style1,LV_OPA_30);
/通过obj_set_style来改变部件的样式/
lv_obj_set_style_bg_color(obj1,lv_color_hex(0x0000ff),LV_STATE_DEFAULT);
lv_obj_set_style_bg_opa(obj1,LV_OPA_30,LV_STATE_PRESSED);
lv_obj_set_style_bg_color(obj1,lv_color_hex(0xff00ff),LV_STATE_DEFAULT);
/样式的状态之间的关系/ lv_obj_set_style_bg_color(obj1,lv_color_hex(0x00ffff),LV_STATE_DEFAULT); lv_obj_set_style_bg_color(obj1,lv_color_hex(0x00ffff),LV_STATE_PRESSED); lv_obj_set_style_bg_color(obj1,lv_color_hex(0x00ffff),LV_STATE_FOCUSED);//foucsed这种状态,点一下就有,点别出就会没有,可以用鼠标的光标来理解
/再添加一个状态有专门的API/
lv_obj_add_state(obj1,LV_STATE_PRESSED); //LV_STATE_FOCUSED | LV_STATE_PRESSED
/*去除一个状态也有专门的API*/
//另外clean不能取消默认状态因为至少要有一个状态
lv_obj_clear_state(obj1,LV_STATE_PRESSED);
/*判断是否有一个状态也有API,返回值有bool值,可以被用于判断*/
bool ret = lv_obj_has_state(obj1,LV_STATE_FOCUSED);
/部件中的PART/
lv_obj_set_style_bg_color(slider1,lv_color_hex(0x00ffff),LV_STATE_DEFAULT | LV_PART_MAIN);//去单独修改
lv_obj_set_style_bg_opa(slider1,LV_OPA_100,LV_STATE_DEFAULT | LV_PART_MAIN);//部件创建时,主体部分有默认的透明 度,可以自己在这里修改
/*但是下面是没有办法同时修改两个PART的,因为在LVGL中没有使用掩码,0x020000 | 0x030000 = 0x030000所以说只修改了操作句柄的部分*/
// lv_obj_set_style_bg_color(slider1,lv_color_hex(0x00ffff),LV_STATE_DEFAULT | LV_PART_MAIN|LV_PART_KNOB);//去单独修改
/*如果想去修改操作句柄,必须再调用一下API*/
lv_obj_set_style_bg_color(slider1,lv_color_hex(0x00ffff),LV_STATE_DEFAULT | LV_PART_KNOB);
/*也可以去更改,状态*/
lv_obj_set_style_bg_color(slider1,lv_color_hex(0x00ffff),LV_STATE_PRESSED | LV_PART_KNOB);
/测试回调函数,以及对不同事件的响应,并在回调函数中获得哪一个obj触发以及哪一个事件触发/ /可以添加不同的事件,也样式的状态一样,也不能通过或的方式来实现/
//LV_EVENT_PRESSED
//LV_EVENT_PRESSING
//LV_EVENT_CLICKED
/*注意传参时要用全局变量,不要使用局部变量*/
lv_obj_add_event_cb(obj1,my_cb,LV_EVENT_CLICKED,&val);
//lv_obj_add_event_cb(obj1,my_cb,LV_EVENT_PRESSED,NULL);
//lv_obj_add_event_cb(obj1,my_cb,LV_EVENT_PRESSING,NULL);
/*不同的部件可以使用同一个事件影响的回响函数*/
lv_obj_add_event_cb(obj2,my_cb,LV_EVENT_CLICKED,NULL);
/以一个对象为user_data传入到回调函数中/
lv_obj_t *label1 = lv_label_create(lv_scr_act());
lv_label_set_text(label1,"hello,world!!!");
//lv_obj_add_event_cb(obj1,my_label,LV_EVENT_CLICKED,label1);
lv_obj_add_event_cb(obj2,my_label,LV_EVENT_PRESSED,label1);
lv_obj_add_event_cb(obj1,my_label,LV_EVENT_PRESSING,label1);
/回调函数的写法也是老演员了/
void my_cb(lv_event_t *e){
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t *target = lv_event_get_target(e);
/*如果事件发生后没有参数传递过来,判断一下不去做处理*/
/*空指针不太好,可能会让程序崩掉*/
int *temp = (int*)lv_event_get_user_data(e);
if(temp == NULL){
printf("wrong argument!!!\n");
return;
}
if(code == LV_EVENT_CLICKED){
if(target == obj1){
//temp = *(int*)lv_event_get_user_data(e);
printf("obj1 has LV_EVENT_CLICKED!!!\n");
printf("obj1 val is %d\n",*temp);
}else if(target ==obj2){
printf("obj2 has LV_EVENT_CLICKED!!!\n");
}
}else if(code == LV_EVENT_PRESSED){
printf("obj1 has LV_EVENT_PRESSED!!!\n");
}else if(code == LV_EVENT_PRESSING){
printf("obj1 has LV_EVENT_PRESSING!!!\n");
}
}
void my_label(lv_event_t *e){
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t *temp_obj = lv_event_get_target(e);
if(temp_obj == NULL){
printf("target obj pointer is NULL!!!\n");
return;
}
/*虽然label是一个函数内的局部变量,但是对象会存在在堆中(动态分配),可以把地址传递过来*/
lv_obj_t *temp_lable = (lv_obj_t *)lv_event_get_user_data(e);
if(temp_lable == NULL){
printf("user_data pointer is NULL!!!\n");
return;
}
switch (code){
case LV_EVENT_CLICKED:
if(temp_obj == obj1)
lv_label_set_text(temp_lable,"obj1 clicked!!!");
else if(temp_obj == obj2)
lv_label_set_text(temp_lable,"obj2 clicked!!!");
break;
case LV_EVENT_PRESSED:
if(temp_obj == obj2)
lv_label_set_text(temp_lable,"obj2 pressed!!!");
break;
case LV_EVENT_PRESSING:
if(temp_obj == obj1)
lv_label_set_text(temp_lable,"obj1 pressing!!!");
break;
default:
break;
}
}
/大小、位置,对齐等样式属性/
lv_obj_set_style_width(obj_1,100,LV_STATE_DEFAULT);
//lv_obj_set_style_width(obj_1,100,LV_STATE_PRESSED);//可以通过不同的状态进行触发
lv_obj_set_style_height(obj_1,100,LV_STATE_DEFAULT);
/*也可以将高度&宽度限定在一定的范围内*/
/*如何超出了范围的话,只会显示出最大值或最小值的那一个信息*/
lv_obj_set_style_min_width(obj_1,50,LV_STATE_DEFAULT);
lv_obj_set_style_max_width(obj_1,200,LV_STATE_DEFAULT);
/*对于设置样式的对齐与位置的话好像只能是默认的模式*/
/*而且对齐的话好像只能应用在父子关系之间*/
lv_obj_set_style_align(obj_2,LV_ALIGN_BOTTOM_MID,LV_STATE_DEFAULT);
// lv_obj_set_style_align(obj_2,LV_ALIGN_BOTTOM_MID,LV_STATE_PRESSED);
//lv_obj_set_style_x(obj_2,50,LV_STATE_PRESSED);
lv_obj_set_style_x(obj_2,-10,LV_STATE_DEFAULT);
/变化宽度与高度,x&y变换属性/
/*transform_height&transform_weight translate_x&translate_y*/
//lv_obj_set_style_transform_height(obj_1,20,LV_STATE_DEFAULT);
/*使用pressed作为状态的话可以看得更加清楚一点*/
//lv_obj_set_style_transform_height(obj_1,20,LV_STATE_PRESSED);
//lv_obj_set_style_transform_width(obj_1,20,LV_STATE_PRESSED);
/*也是一样的道理,可以用pressed看清楚现象*/
lv_obj_set_style_translate_x(obj_1,20,LV_STATE_PRESSED);
lv_obj_set_style_translate_y(obj_1,20,LV_STATE_PRESSED);
/translate_zoom & translate_angle/
/*目前v8.3版本只有图片控件具有缩放&旋转的功能,下面只是把API接口写下来*/
/*对于缩放,256 ->正常显示,128->一半显示,512->双倍显示*/
/*对于旋转,450 -> 45度,900->90度,150->15度*/
/*不过我发现好像下面两个API没有*/
// lv_obj_set_style_translate_zoom();
//lv_obj_set_style_translate_angle();
BORDER/测试边框相关的API/ //border_width //border_color //border_opa //border_side
lv_obj_set_style_border_width(obj_1,20,LV_STATE_DEFAULT|LV_PART_MAIN);
lv_obj_set_style_border_color(obj_1,lv_color_make(58,199,131),LV_STATE_DEFAULT|LV_PART_MAIN);
lv_obj_set_style_border_opa(obj_1,LV_OPA_50,LV_STATE_DEFAULT|LV_PART_MAIN);
//lv_border_side_t //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_obj_set_style_border_side(obj_2,LV_BORDER_SIDE_NONE,LV_STATE_DEFAULT|LV_PART_MAIN);
//lv_obj_set_style_border_side(obj_2,LV_BORDER_SIDE_BOTTOM,LV_STATE_DEFAULT|LV_PART_MAIN);
// lv_obj_set_style_border_side(obj_2,LV_BORDER_SIDE_INTERNAL,LV_STATE_DEFAULT|LV_PART_MAIN);
/*因为使用了掩码的操作,所以可以进行|运算*/
lv_obj_set_style_border_side(obj_2,LV_BORDER_SIDE_BOTTOM|LV_BORDER_SIDE_LEFT,LV_STATE_DEFAULT|LV_PART_MAIN);
PAD/测试填充物相关的API/
lv_obj_set_style_pad_top(obj_1,0,LV_STATE_DEFAULT|LV_PART_MAIN);
lv_obj_set_style_pad_left(obj_1,0,LV_STATE_DEFAULT|LV_PART_MAIN);
lv_obj_set_style_pad_bottom(obj_1,0,LV_STATE_DEFAULT|LV_PART_MAIN);
lv_obj_set_style_pad_right(obj_1,0,LV_STATE_DEFAULT|LV_PART_MAIN);
lv_obj_set_style_pad_all(obj_1,0,LV_STATE_DEFAULT|LV_PART_MAIN);
OUTLINE/测试轮廓的相关API/ //outline_width //outline_color //outline_opa //outline_pad
lv_obj_set_style_outline_width(obj_1,20,LV_STATE_DEFAULT|LV_PART_MAIN);
lv_obj_set_style_outline_color(obj_1,lv_color_hex(0x00ff00),LV_STATE_DEFAULT|LV_PART_MAIN);
lv_obj_set_style_outline_opa(obj_1,LV_OPA_50,LV_STATE_DEFAULT|LV_PART_MAIN);
lv_obj_set_style_outline_pad(obj_1,10,LV_STATE_DEFAULT|LV_PART_MAIN);
SHADOW/阴影就像是影子一样,有种渐变色的效果/
/要想有shadow的效果,必须要最先设置width/
//shadow_width //shadow_color //shadow_opa //shadow_ofs_x //shadow_ofs_y //shadow_spread
lv_obj_set_style_shadow_width(obj_1,20,LV_STATE_DEFAULT|LV_PART_MAIN);
lv_obj_set_style_shadow_color(obj_1,lv_color_hex(0x5DE3E0),LV_STATE_DEFAULT|LV_PART_MAIN);
//lv_obj_set_style_shadow_ofs_x(obj_1,50,LV_STATE_DEFAULT|LV_PART_MAIN);
//lv_obj_set_style_shadow_ofs_y(obj_1,50,LV_STATE_DEFAULT|LV_PART_MAIN);
lv_obj_set_style_shadow_opa(obj_1,LV_OPA_60,LV_STATE_DEFAULT|LV_PART_MAIN);
//lv_obj_set_style_shadow_spread(obj_1,30,LV_STATE_DEFAULT|LV_PART_MAIN);
BG/渐变色的设置/
//bg_color //bg_opa
/下面两个是与设置背景颜色的渐变色有关/
//bg_grad_dir //bg_grad_main_stop
/下面两个是与设置渐变色有关/
//bg_grad_color //bg_grad_stop
//与方向有关的几个宏定义枚举量
//LV_GRAD_DIR_NONE
//LV_GRAD_DIR_VER 垂直方向渐变,默认从左侧开始(对于背景色,对于渐变色反之)
//LV_GRAD_DIR_HOR 水平方向渐变,默认从上面开始(对于背景色,对于渐变色反之)
lv_obj_set_style_bg_grad_dir(obj_1,LV_GRAD_DIR_HOR,LV_STATE_DEFAULT|LV_PART_MAIN);
/*设置渐色的开始位置,0->左侧,128->中间,255->最边,但要注意区别背景色与渐变色的区别*/
lv_obj_set_style_bg_main_stop(obj_1,128,LV_STATE_DEFAULT|LV_PART_MAIN);
lv_obj_set_style_bg_grad_color(obj_2,lv_color_hex(0x00ff00),LV_STATE_DEFAULT|LV_PART_MAIN);
lv_obj_set_style_bg_grad_dir(obj_2,LV_GRAD_DIR_HOR,LV_STATE_DEFAULT|LV_PART_MAIN);
lv_obj_set_style_bg_grad_stop(obj_2,128,LV_STATE_DEFAULT|LV_PART_MAIN);
/*把背景与渐变色结合在一起*/
lv_obj_set_style_bg_color(obj_3,lv_color_hex(0xE6FF0C),LV_STATE_DEFAULT|LV_PART_MAIN);
lv_obj_set_style_bg_grad_dir(obj_3,LV_GRAD_DIR_HOR,LV_STATE_DEFAULT|LV_PART_MAIN);
lv_obj_set_style_bg_grad_color(obj_3,lv_color_hex(0x6FFBFF),LV_STATE_DEFAULT|LV_PART_MAIN);
lv_obj_set_style_bg_grad_dir(obj_3,LV_GRAD_DIR_HOR,LV_STATE_DEFAULT|LV_PART_MAIN);
OTHER/radius & opa/
/radius是弧度的意思,之前创建的部件四周都很圆润,想创建一个直角的/
/opa是部件的透明度/
lv_obj_set_style_radius(obj_1,0,LV_STATE_DEFAULT|LV_PART_MAIN);
lv_obj_set_style_opa(obj_1,LV_OPA_100,LV_STATE_DEFAULT|LV_PART_MAIN);
FLAG/验证flag的用法/
lv_obj_clear_flag(obj_1,LV_OBJ_FLAG_CLICKABLE);
/*obj1 已经没有了响应,但是obj3可以将所接收到的事件传给父类obj1(通过event_bubble)*/
lv_obj_add_flag(obj_3,LV_OBJ_FLAG_EVENT_BUBBLE);
lv_obj_add_event_cb(obj_1,flag_test,LV_EVENT_PRESSED,obj_2);
lv_obj_add_event_cb(obj_1,flag_test,LV_EVENT_CLICKED,obj_2);
lv_obj_add_flag(obj_1,LV_OBJ_FLAG_HIDDEN);
lv_obj_clear_flag(obj_1,LV_OBJ_FLAG_HIDDEN);
/*通常flag是与事件event一起使用的*/
static void flag_test(lv_event_t *e){
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t *user_data = (lv_obj_t *)lv_event_get_user_data(e);
if(code == LV_EVENT_PRESSED){
lv_obj_add_flag(user_data,LV_OBJ_FLAG_HIDDEN);
}else if(code == LV_EVENT_CLICKED){
lv_obj_clear_flag(user_data,LV_OBJ_FLAG_HIDDEN);
}
}