ESP32 LVGL8.1 ——Style border 设置样式边框 (Style 3)

提示：本博客作为学习笔记，有错误的地方希望指正

一、样式边框设置简介

  本次主要讲述lvgl的样式边框，设置样式边框可以实现一个样式不同的显示风格，从而实现不同显示效果。

1.1边框颜色 border_color

  设置边框颜色

1.2边框透明度 border_opa

  设置边框的 opcitiy。值0，LV_OPA_0或LV_OPA_TRANSP表示完全透明，256，LV_OPA_100或LV_OPA_COVER表示完全覆盖，其他值或LV_OPA_10、LV_OPA_20等表示半透明。

1.3边框宽度 border_width

  设置边框的宽度。只能使用像素值。

1.4边框位置 border_side

  设置应绘制边框的任何一侧。可能的值为
LV_BORDER_SIDE_NONE/TOP/BOTTOM/LEFT/RIGHT/INTERNAL。OR-ed calues 也可以使用，例如。LV_BORDER_SIDE_TOP | LV_BORDER_SIDE_LEFT

1.5边框投递 border_post

  设置是在绘制子项之前还是之后绘制边框。true: 子类之后, false: 子类之前

二、Style border API

  用于设置样式边框的API可以在lv_style_gen.h文件中找到，主要有以下几个API

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     //边境一侧内部

3.1边框的基本显示

  运行示例

/*************************************************
 *  函数名称 :  lv_style_border 样式设置边框
 *  参    数 ： 无
 *  函数功能 ： 设置样式边框
 *************************************************/
void lv_style_border(void)
{
   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);                            //居中对象
}