在前端css中可以针对控件的4个角设置不同的radius圆角大小,但是在lvgl的8.x版本中并没有相关的api。其只能同时设置4个角有圆角效果以及4个角都没圆角效果。
为了实现单个角设置圆角效果可以通过设置一个与背景色相似的矩形来遮挡对应的角度,如下图:
通过设置整个控件4个角都有圆角,然后新建一个基于控件的矩形设置它的位置为底部这样就可以把底部两个角给遮挡住。
源码如下:
lv_obj_t* ui_main = lv_obj_create(ui_page);
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);