LVGL8学习之Background Styles

这一篇学习一下Background Styles，还是通过codeblock来模拟代码的运行，代码如下：

void lv_background_style_test()
{static lv_style_t style;lv_style_init(&style);lv_style_reset(&style); // 重置样式lv_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_GREY, 1)); // 设置样式的背景色为淡灰色lv_style_set_bg_grad_color(&style, lv_palette_main(LV_PALETTE_RED)); // 设置样式的渐变色为红色lv_style_set_bg_grad_dir(&style, LV_GRAD_DIR_VER); // 设置样式的颜色渐变方向为垂直方向lv_style_set_bg_main_stop(&style, 128); // 设置主停止色为128lv_style_set_bg_grad_stop(&style, 192); // 设置渐变停止色为192lv_obj_t * obj = lv_obj_create(lv_scr_act());  // 基于屏幕创建一个对象if (obj != NULL){lv_obj_add_style(obj, &style, 0);  // 给对象添加样式lv_obj_set_pos(obj, 300, 100); // 设置对象的X和Y坐标lv_obj_set_size(obj, 200, 200); // 设置对象的宽度和高度}
}

运行效果：

实现水平和垂直方向的渐变

void lv_background_style_test()
{static lv_style_t bg_style1;lv_style_reset(&bg_style1); // 重置样式lv_style_init(&bg_style1); // 初始化样式lv_style_set_radius(&bg_style1, 10); // 设置圆角lv_style_set_border_color(&bg_style1, lv_palette_main(LV_PALETTE_GREY)); // 设置边框颜色lv_style_set_border_width(&bg_style1, 1); // 设置边框宽度lv_style_set_bg_opa(&bg_style1, LV_OPA_COVER); // 设置背景透明度lv_style_set_bg_color(&bg_style1, lv_palette_main(LV_PALETTE_BLUE)); //背景色设置为蓝色// 样式添加渐变lv_style_set_bg_grad_color(&bg_style1, lv_color_white()); // 渐变背景色为白色lv_style_set_bg_grad_dir(&bg_style1, LV_GRAD_DIR_VER); // 垂直方向渐变lv_style_set_bg_main_stop(&bg_style1, 40); // 主停止色40lv_style_set_bg_grad_stop(&bg_style1, 40); // 渐变停止色40// 创建对讲并添加样式lv_obj_t* obj1 = lv_obj_create(lv_scr_act());if (obj1 != NULL){lv_obj_add_style(obj1, &bg_style1, 0); // 给对象添加样式lv_obj_set_size(obj1, 200, 200); // 设置对象大小lv_obj_align(obj1, LV_ALIGN_TOP_LEFT, 20, 20);}static lv_style_t bg_style2;lv_style_reset(&bg_style2); // 重置样式lv_style_init(&bg_style2); // 初始化样式lv_style_set_radius(&bg_style2, 10); // 设置圆角lv_style_set_border_color(&bg_style2, lv_palette_main(LV_PALETTE_GREY)); // 设置边框颜色lv_style_set_border_width(&bg_style2, 1); // 设置边框宽度lv_style_set_bg_opa(&bg_style2, LV_OPA_COVER); // 设置背景透明度lv_style_set_bg_color(&bg_style2, lv_palette_main(LV_PALETTE_BLUE)); //背景色设置为蓝色// 样式添加渐变lv_style_set_bg_grad_color(&bg_style2, lv_color_white()); // 渐变背景色为白色lv_style_set_bg_grad_dir(&bg_style2, LV_GRAD_DIR_HOR); // 水平方向渐变lv_style_set_bg_main_stop(&bg_style2, 40); // 主停止色40lv_style_set_bg_grad_stop(&bg_style2, 40); // 渐变停止色40// 创建对讲并添加样式lv_obj_t* obj2 = lv_obj_create(lv_scr_act());if (obj1 != NULL){lv_obj_add_style(obj2, &bg_style2, 0); // 给对象添加样式lv_obj_set_size(obj2, 200, 200); // 设置对象大小lv_obj_align(obj2, LV_ALIGN_TOP_RIGHT, -300, 20);}static lv_style_t bg_style3;lv_style_reset(&bg_style3); // 重置样式lv_style_init(&bg_style3); // 初始化样式lv_style_set_radius(&bg_style3, 10); // 设置圆角lv_style_set_border_color(&bg_style3, lv_palette_main(LV_PALETTE_GREY)); // 设置边框颜色lv_style_set_border_width(&bg_style3, 1); // 设置边框宽度lv_style_set_bg_opa(&bg_style3, LV_OPA_COVER); // 设置背景透明度lv_style_set_bg_color(&bg_style3, lv_color_white()); //背景色设置为白色// 样式添加渐变lv_style_set_bg_grad_color(&bg_style3, lv_palette_main(LV_PALETTE_BLUE)); // 渐变背景色为蓝色lv_style_set_bg_grad_dir(&bg_style3, LV_GRAD_DIR_VER); // 垂直方向渐变lv_style_set_bg_main_stop(&bg_style3, 220); // 主停止色220lv_style_set_bg_grad_stop(&bg_style3, 220); // 渐变停止色220// 创建对讲并添加样式lv_obj_t* obj3 = lv_obj_create(lv_scr_act());if (obj1 != NULL){lv_obj_add_style(obj3, &bg_style3, 0); // 给对象添加样式lv_obj_set_size(obj3, 200, 200); // 设置对象大小lv_obj_align(obj3, LV_ALIGN_TOP_LEFT, 20, 240);}static lv_style_t bg_style4;lv_style_reset(&bg_style4); // 重置样式lv_style_init(&bg_style4); // 初始化样式lv_style_set_radius(&bg_style4, 10); // 设置圆角lv_style_set_border_color(&bg_style4, lv_palette_main(LV_PALETTE_GREY)); // 设置边框颜色lv_style_set_border_width(&bg_style4, 1); // 设置边框宽度lv_style_set_bg_opa(&bg_style4, LV_OPA_COVER); // 设置背景透明度lv_style_set_bg_color(&bg_style4, lv_color_white()); //背景色设置为蓝色// 样式添加渐变lv_style_set_bg_grad_color(&bg_style4, lv_palette_main(LV_PALETTE_BLUE)); // 渐变背景色为白色lv_style_set_bg_grad_dir(&bg_style4, LV_GRAD_DIR_HOR); // 水平方向渐变lv_style_set_bg_main_stop(&bg_style4, 220); // 主停止色220lv_style_set_bg_grad_stop(&bg_style4, 220); // 渐变停止色220// 创建对讲并添加样式lv_obj_t* obj4 = lv_obj_create(lv_scr_act());if (obj1 != NULL){lv_obj_add_style(obj4, &bg_style4, 0); // 给对象添加样式lv_obj_set_size(obj4, 200, 200); // 设置对象大小lv_obj_align(obj4, LV_ALIGN_TOP_RIGHT, -300, 240);}
}

运行效果：

LVGL8学习之Background Styles相关推荐

LVGL8学习之Shadow Styles
这一篇来学习一下Shadow Style的使用,还是通过codeblock来模拟代码的运行,代码如下: void lv_shadow_style_test() {static lv_style_t s ...
LVGL8学习之multiple styles
这一篇来学一下multiple styles,多种样式的组合使用,还是通过codeblock来模拟代码的运行,代码如下: void lv_multiple_style_test() {static l ...
LVGL8学习之row and a column layout with flexbox
这一篇来学习一下基于flexbox(柔性盒子)简单行和列布局,还是通过codeblock来模拟代码的运行,可设置layout对象内部的水平和竖直填充,以及布局内各item之间的间隔填充代码如下: v ...
ESP32 LVGL8.1 ——Style multiple styles 多种风格样式 (Style 12)
提示:本博客作为学习笔记,有错误的地方希望指正文章目录一.多种风格样式简介二.多种风格样式 API 三.示例一.多种风格样式简介本次主要讲述lvgl的多种风格样式,多种样式风格和前面的L ...
LVGL8学习之slider
这一篇学习一下slider对象的使用,还是通过codeblock来模拟代码的运行可通过lv_slider_set_range设置滑块的变化范围可通过lv_slider_get_min_value获 ...
QT学习笔记(摘抄)
QT学习笔记-1.QT主要的对象说来惭愧学习c++很长时间了一直没有使用c++开发过软件界面所以现在想认认真真的学习一个c++图形界面框架库本来想学习Xwidget但是这个资料不大好找有啥问题 ...
微软office认证课程
感谢阅读非原创声明,根据微软课程学习理解而已 Get started with Microsoft 365 Work Smarter with Microsoft Word 与 Microsoft ...
jquery API
jQuery API Documentation详细的API和例子说明,请参考文档:http://docs.jquery.com/Main_Page百度百科的解析:http://baike.baidu ...
BottomNavigationBar使用详解
gitHub地址:https://github.com/Ashok-Varma/BottomNavigation 一.基本使用 1.在AndroidStudio下添加依赖: compile 'com ...

LVGL8学习之Background Styles

LVGL8学习之Background Styles相关推荐

最新文章

热门文章