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

文章目录

一、样式背景设置简介
二、Style Pad API
- 2.1背景颜色 bg_color
- 2.2背景颜色透明度 bg_opa
- 2.3背景的渐变颜色 bg_grad_color
- 2.4背景渐变的方向 bg_grad_dir
- 2.5前景颜色停止 bg_main_stop
- 2.6背景渐变颜色起始点 bg_grad_stop
- 2.7背景图片资源 bg_img_src
- 2.8背景图片透明度 bg_img_opa
- 2.9背景图片重着色 bg_img_recolor
- 2.10背景图片重着色透明度 bg_img_recolor_opa
- 2.11背景平铺 bg_img_tiled
三、示例
- 3.1、实现背景渐变

一、样式背景设置简介

本次主要讲述lvgl的样式背景，可以设置一个样式不同的背景颜色，另外还可以设置背景的渐变色，从而实现不同炫酷的效果。

二、Style Pad API

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

2.1背景颜色 bg_color

设置对象的背景颜色

2.2背景颜色透明度 bg_opa

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

2.3背景的渐变颜色 bg_grad_color

设置背景的渐变颜色。仅在grad_dir不是时使用LV_GRAD_DIR_NONE

2.4背景渐变的方向 bg_grad_dir

设置背景渐变的方向。可能的值为LV_GRAD_DIR_NONE/HOR/VER。

2.5前景颜色停止 bg_main_stop

设置渐变背景色的起点。0 表示顶部/左侧，255 表示底部/右侧，128 表示中心，依此类推

2.6背景渐变颜色起始点 bg_grad_stop

设置背景渐变颜色的起点。0 表示顶部/左侧，255 表示底部/右侧，128 表示中心，依此类推

2.7背景图片资源 bg_img_src

设置背景图像。可以是指向lv_img_dsc_t、文件路径或LV_SYMBOL_…

2.8背景图片透明度 bg_img_opa

设置背景图像的不透明度。值0，LV_OPA_0或LV_OPA_TRANSP表示完全透明，256，LV_OPA_100或
LV_OPA_COVER表示完全覆盖，其他值或LV_OPA_10、LV_OPA_20等表示半透明。

2.9背景图片重着色 bg_img_recolor

设置一种颜色以混合到背景图像。

2.10背景图片重着色透明度 bg_img_recolor_opa

设置背景图像重新着色的强度。值 0，LV_OPA_0或LV_OPA_TRANSP表示不混合，256，LV_OPA_100或LV_OPA_COVER表示完全重新着色，其他值或 LV_OPA_10、LV_OPA_20 等按比例解释。

2.11背景平铺 bg_img_tiled

如果启用，背景图像将被平铺。可能的值为true或false。

void lv_style_set_bg_color(lv_style_t * style, lv_color_t value);            //设置背景颜色
void lv_style_set_bg_color_filtered(lv_style_t * style, lv_color_t value);  //设置背景过滤颜色
void lv_style_set_bg_opa(lv_style_t * style, lv_opa_t value);               //设置背景透明度
void lv_style_set_bg_grad_color(lv_style_t * style, lv_color_t value);      //设置背景下半部颜色
void lv_style_set_bg_grad_color_filtered(lv_style_t * style, lv_color_t value);//设置背景下半部过滤颜色
void lv_style_set_bg_grad_dir(lv_style_t * style, lv_grad_dir_t value);     //设置背景下半部颜色填充方向
void lv_style_set_bg_main_stop(lv_style_t * style, lv_coord_t value);       //主色停止
void lv_style_set_bg_grad_stop(lv_style_t * style, lv_coord_t value);       //下半部色停止
void lv_style_set_bg_img_src(lv_style_t * style, const void * value);       //设置背景图片
void lv_style_set_bg_img_opa(lv_style_t * style, lv_opa_t value);           //设置背景图片透明度
void lv_style_set_bg_img_recolor(lv_style_t * style, lv_color_t value);     //设置背景图片重着色
void lv_style_set_bg_img_recolor_filtered(lv_style_t * style, lv_color_t value);//设置背景图片重着色过滤色
void lv_style_set_bg_img_recolor_opa(lv_style_t * style, lv_opa_t value);   //设置背景图片重着色透明度
void lv_style_set_bg_img_tiled(lv_style_t * style, bool value);             //设置背景图片平铺

用过上面的几个基函数lvgl封装了几个API

static inline void lv_style_set_pad_all(lv_style_t * style, lv_coord_t value);   //四边内边距
static inline void lv_style_set_pad_hor(lv_style_t * style, lv_coord_t value);  //水平内边距 左右相同
static inline void lv_style_set_pad_ver(lv_style_t * style, lv_coord_t value);  //竖直内边距 上下相同
static inline void lv_style_set_pad_gap(lv_style_t * style, lv_coord_t value);  //差距内边距 行列相同

三、示例

3.1、实现背景渐变

实现背景双色透明显示，值得注意的是
lv_palette_lighten(LV_PALETTE_RED,1)、
lv_palette_darken(LV_PALETTE_RED,1)、
lv_palette_main(LV_PALETTE_BLUE) 、
三个表示色彩程度不一样，lv_palette_lighten(LV_PALETTE_RED,1)、lv_palette_darken(LV_PALETTE_RED,1)可以表示一种颜色的深浅程度，根据第二个参数决定，数值最大5 值越大颜色越浅，lv_palette_main(LV_PALETTE_BLUE)只可以表示单色，当主色停止和渐变色停止的数值一样的时候就不会出现渐变显示。当lv_style_set_bg_main_stop 和 lv_style_set_bg_grad_stop不被设置的时候，表示默认的时候双色渐变的坐标更具渐变的方向从最小坐标值到坐标最大值的范围内变化。

/**************************************************  函数名称 :  lv_style_bg 设置样式背景*  参    数 ： 无*  函数功能 ： 设置样式圆角、两个背景色的时候对应透明度*************************************************/
void lv_style_bg(void)
{static lv_style_t style;                        //创建stylelv_style_init(&style);                          //初始化stylelv_style_set_radius(&style,5);                  //设置样式的圆角lv_style_set_bg_opa(&style,LV_OPA_COVER);       //设置样式透明度lv_style_set_bg_color(&style,lv_palette_lighten(LV_PALETTE_RED,1));  //设置主背景颜色 调色板减轻，后面参数越高则也淡lv_style_set_bg_grad_color(&style,lv_palette_main(LV_PALETTE_BLUE)); //设置下半部背景颜色 主调色板lv_style_set_bg_grad_dir(&style,LV_GRAD_DIR_VER);                    //下半部背景颜色填充方向lv_style_set_bg_main_stop(&style,160);          //主色停止 作为渐变线的分界线          lv_style_set_bg_grad_stop(&style,190);          //渐变色停止 渐变值必须大于主色值，否则会被覆盖不能实现渐变lv_obj_t * obj = lv_obj_create(lv_scr_act());   //创建对象lv_obj_add_style(obj,&style,0);                 //将样式添加到对象中lv_obj_center(obj);                             //居中对象
}

实现背景图片的显示，这个只是背景的图片设置，还可以在引用图片对象实现前景的图片显示，实现背景图套前景图的效果，还可以通过下面这两个API设置背景的颜色。
lv_style_set_bg_color(&style,lv_palette_lighten(LV_PALETTE_BLUE,1));
lv_style_set_bg_opa(&style,LV_OPA_50);

void lv_example_style_2_1(void)
{static lv_style_t style;                        //创建样式         lv_style_init(&style);                          //初始化样式lv_style_set_radius(&style, 5);                 //设置圆角半径LV_IMG_DECLARE(animimg001);                     //加载图片声明 .c文件的图片lv_style_set_bg_img_src(&style, &animimg001);    //设置背景图片lv_style_set_bg_img_opa(&style, LV_OPA_80);     //设置背景图片透明度lv_style_set_bg_img_recolor(&style, lv_palette_main(LV_PALETTE_RED));//设置背景图片重着色lv_style_set_bg_img_recolor_opa(&style, LV_OPA_80);  //设置背景图片重着色透明度lv_style_set_bg_img_tiled(&style, false);         //设置背景图片平铺/*Create an object with the new style*/lv_obj_t* obj = lv_obj_create(lv_scr_act());   //创建对象lv_obj_add_style(obj, &style, 0);              //设置对象的样式lv_obj_set_size(obj,200,200);                   //设置对象的尺寸lv_obj_center(obj);                            //居中对象
}

4.2实现背景图片的显示

ESP32 LVGL8.1 ——Style bg 设置样式背景 (Style 2)相关推荐

UIElements开发人员指南9 样式(Style)和Unity样式表(style sheets)
样式(Style)和Unity样式表(style sheets) 每个VisualElement都包含样式属性,用于设置元素的尺寸以及元素在屏幕上的绘制方式,例如backgroundColor或bor ...
在style中设置图片背景
<view :style="{backgroundImage:'url('+ calendar +')'}" class="bgimg" @click=& ...
PHPExcel 锁定表头设置样式,背景颜色,居中,宽,单元格合并
//实例化类库 $objectPHPExcel = new \PHPExcel(); //选择指定的sheet $objectPHPExcel->setActiveSheetIndex(0); ...
ESP32 LVGL8.1 ——btn 按钮 (btn 15)
提示:本博客作为学习笔记,有错误的地方希望指正文章目录一.btn 简介 1.1概述 Overview 1.2部分和风格 Parts and Styles 1.3使用 Usage 1.4事件 Eve ...
【使用 DOM】为DOM元素设置样式
1. 使用样式表可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表都由一个CSSStyleS ...
原生js获取元素并设置样式
下面我是通过class获取元素 <!DOCTYPE html> <html lang="en"><head><meta charset=& ...
【温故而知新-Javascript】为DOM元素设置样式
1. 使用样式表可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表都由一个CSSStyleS ...
ESP32 LVGL8.1 ——Style local style 样式当地的风格 (Style 11)
提示:本博客作为学习笔记,有错误的地方希望指正文章目录一.样式当地的风格简介二.Style Line API 三.示例一.样式当地的风格简介本次主要讲述lvgl的样式当地的风格,我们前面 ...
ESP32 LVGL8.1 ——Style multiple styles 多种风格样式 (Style 12)
提示:本博客作为学习笔记,有错误的地方希望指正文章目录一.多种风格样式简介二.多种风格样式 API 三.示例一.多种风格样式简介本次主要讲述lvgl的多种风格样式,多种样式风格和前面的L ...

ESP32 LVGL8.1 ——Style bg 设置样式背景 (Style 2)