lvgl 8.x版本实现圆角的单独设置

在前端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);

  • 11
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值