LVGL V8之buttons styles
style的创建
- 定义三个lv_style_t变量
static lv_style_t style_btn;
static lv_style_t style_btn_pressed;
static lv_style_t style_btn_red;
- 定义颜色过滤器回调函数
static lv_color_t darken(const lv_color_filter_dsc_t* dsc, lv_color_t color, lv_opa_t opa)
{LV_UNUSED(dsc);return lv_color_darken(color, opa);
}
style_btn的创建
- style_btn style初时化
lv_style_init(&style_btn);
- 设置radius倒角为10
lv_style_set_radius(&style_btn, 10);
- 设置背景透明度为LV_OPA_COVER
lv_style_set_bg_opa(&style_btn, LV_OPA_COVER);
- 设置背影颜色为淡灰色
lv_style_set_bg_color(&style_btn, lv_palette_lighten(LV_PALETTE_GREY, 3));
- 设置渐变色到灰色
lv_style_set_bg_grad_color(&style_btn, lv_palette_main(LV_PALETTE_GREY));
- 设置渐变色方向为LV_GRAD_DIR_VER
lv_style_set_bg_grad_dir(&style_btn, LV_GRAD_DIR_VER);
- 设置边框颜色为黑色
lv_style_set_border_color(&style_btn, lv_color_black());
- 设置边框颜色的透明度为百分之20
lv_style_set_border_opa(&style_btn, LV_OPA_20);
- 设置边框宽度为2
lv_style_set_border_width(&style_btn, 2);
- 设置文本颜色为黑色
lv_style_set_text_color(&style_btn, lv_color_black());
- 初时化一个简单的颜色过滤器
static lv_color_filter_dsc_t color_filter;lv_color_filter_dsc_init(&color_filter, darken);
- 初时化按键按下时的style
lv_style_init(&style_btn_pressed);
- 设置颜色过滤
lv_style_set_color_filter_dsc(&style_btn_pressed, &color_filter);
- 过滤颜色的透明度为百分之20
lv_style_set_color_filter_opa(&style_btn_pressed, LV_OPA_20);
- 创建红色的style
lv_style_init(&style_btn_red);lv_style_set_bg_color(&style_btn_red, lv_palette_main(LV_PALETTE_RED));lv_style_set_bg_grad_color(&style_btn_red, lv_palette_lighten(LV_PALETTE_RED, 3));
创建Button
- 在当前活动界面创建一个Button对象
lv_obj_t* btn = lv_btn_create(lv_scr_act());
- 重置Button中的style
lv_obj_remove_style_all(btn);
- 设置Button位置在当前界面的x=10,y=10处
lv_obj_set_pos(btn, 10, 10);
- lv_obj_set_size设置Button的大小,宽为120,高为50,也可以使用lv_obj_set_width设置宽度,lv_obj_set_height设置高度
lv_obj_set_size(btn, 120, 50);
- 添加Button默认状态下的 style
lv_obj_add_style(btn, &style_btn, 0);
- 添加Button按下状态的 style
lv_obj_add_style(btn, &style_btn_pressed, LV_STATE_PRESSED);
- 在Button上创建Label,并居中显示Button
lv_obj_t* label = lv_label_create(btn);lv_label_set_text(label, "Button");lv_obj_center(label);
创建Button 2
lv_obj_t* btn2 = lv_btn_create(lv_scr_act());lv_obj_remove_style_all(btn2); lv_obj_set_pos(btn2, 10, 80);lv_obj_set_size(btn2, 120, 50);
- 加入三个style,默认状态下加入了2个style
lv_obj_add_style(btn2, &style_btn, LV_STATE_DEFAULT);lv_obj_add_style(btn2, &style_btn_red, LV_STATE_DEFAULT);lv_obj_add_style(btn2, &style_btn_pressed, LV_STATE_PRESSED);
- 设置Button 2的倒角为圆形
lv_obj_set_style_radius(btn2, LV_RADIUS_CIRCLE, 0);
- 创建Label并居中显示Button 2
label = lv_label_create(btn2);lv_label_set_text(label, "Button 2");lv_obj_center(label);
完整代码,仅供参考
static lv_style_t style_btn;
static lv_style_t style_btn_pressed;
static lv_style_t style_btn_red;static lv_color_t darken(const lv_color_filter_dsc_t* dsc, lv_color_t color, lv_opa_t opa)
{LV_UNUSED(dsc);return lv_color_darken(color, opa);
}static void style_init(void)
{/*Create a simple button style*/lv_style_init(&style_btn);lv_style_set_radius(&style_btn, 10);lv_style_set_bg_opa(&style_btn, LV_OPA_COVER);lv_style_set_bg_color(&style_btn, lv_palette_lighten(LV_PALETTE_GREY, 3));lv_style_set_bg_grad_color(&style_btn, lv_palette_main(LV_PALETTE_GREY));lv_style_set_bg_grad_dir(&style_btn, LV_GRAD_DIR_VER);lv_style_set_border_color(&style_btn, lv_color_black());lv_style_set_border_opa(&style_btn, LV_OPA_20);lv_style_set_border_width(&style_btn, 2);lv_style_set_text_color(&style_btn, lv_color_black());/*Create a style for the pressed state.*Use a color filter to simply modify all colors in this state*/static lv_color_filter_dsc_t color_filter;lv_color_filter_dsc_init(&color_filter, darken);lv_style_init(&style_btn_pressed);lv_style_set_color_filter_dsc(&style_btn_pressed, &color_filter);lv_style_set_color_filter_opa(&style_btn_pressed, LV_OPA_20);/*Create a red style. Change only some colors.*/lv_style_init(&style_btn_red);lv_style_set_bg_color(&style_btn_red, lv_palette_main(LV_PALETTE_RED));lv_style_set_bg_grad_color(&style_btn_red, lv_palette_lighten(LV_PALETTE_RED, 3));
}/**
* Create styles from scratch for buttons.
*/
static void lv_example_get_started_2(void)
{/*Initialize the style*/style_init();/*Create a button and use the new styles*/lv_obj_t* btn = lv_btn_create(lv_scr_act());/* Remove the styles coming from the theme* Note that size and position are also stored as style properties* so lv_obj_remove_style_all will remove the set size and position too */lv_obj_remove_style_all(btn);lv_obj_set_pos(btn, 10, 10);lv_obj_set_size(btn, 120, 50);lv_obj_add_style(btn, &style_btn, LV_STATE_DEFAULT);lv_obj_add_style(btn, &style_btn_pressed, LV_STATE_PRESSED);/*Add a label to the button*/lv_obj_t* label = lv_label_create(btn);lv_label_set_text(label, "Button");lv_obj_center(label);/*Create an other button and use the red style too*/lv_obj_t* btn2 = lv_btn_create(lv_scr_act());lv_obj_remove_style_all(btn2); /*Remove the styles coming from the theme*/lv_obj_set_pos(btn2, 10, 80);lv_obj_set_size(btn2, 120, 50);lv_obj_add_style(btn2, &style_btn, LV_STATE_DEFAULT);lv_obj_add_style(btn2, &style_btn_red, LV_STATE_DEFAULT);lv_obj_add_style(btn2, &style_btn_pressed, LV_STATE_PRESSED);lv_obj_set_style_radius(btn2, LV_RADIUS_CIRCLE, 0); /*Add a local style too*/label = lv_label_create(btn2);lv_label_set_text(label, "Button 2");lv_obj_center(label);
}
调用lv_example_get_started_2,运行操作效果
LVGL V8之buttons styles相关推荐
- LVGL V8之border styles
创建style 初时化style static lv_style_t style;lv_style_init(&style); 设置倒角为10 lv_style_set_radius(& ...
- Ai-WB1系列驱动4.0寸电阻触摸屏运行LVGL v8.3
文章目录 @[TOC](文章目录) 前言 一.功能预览 1.滑动条和按钮 2. 页面切换 3.动画效果 4.RGB控制功能 1)红灯控制 2)绿灯控制 3)蓝灯控制 4)幻彩灯控制 二.接线 二.固件 ...
- STM32移植Littlevgl(LVGL)V8.0.2使用文件系统+BMP解码显示外部FLASH中图片
说明:选择BMP解码图片的方式,是因为此方式不需要占用太多的RAM 一.主要参数及版本 MCU:STM32F103ZET6 LCD:2.8寸ILI9341,使用FSMC驱动 SPI FLASH:W25 ...
- LVGL V8学习之colorwheel色轮
这一篇来研究下LVGL V8下colorwheel色轮的使用,这个色轮是HSV样式的,下面的代码通过创建色轮对象,然后添加对象事件处理,移动旋钮,显示对应的颜色和RGB值 还是通过codeblock来 ...
- 【分析笔记】LVGL v8.2.0 使用 freetype 概率性无显示的问题
使用目前最新的 Releases 版本 LVGL v8.2.0 ,移植好 freetype2 后测试,发现每次启动程序时会高概率出现屏幕显示全白色背景,无任何内容的问题. 打开日志开关,出现问题时会有 ...
- lvgl v8 line_meter
最近由于项目需要,想要完成如图的特效 网上查了很多关于line_meter的demo,大多基于v7以下的,无法使用.所以针对v8,想做这么一个界面. 这里我直接贴程序了 lv_obj_t* lmete ...
- LVGL v8学习笔记 | 01 - LVGL PC模拟器初体验
一.LVGL LVGL官网:https://lvgl.io/. LVGL全称Light and Versatile Graphics Library,轻量化和多功能的图形库,遵循MIT开源许可协议,具 ...
- ESP32在Arduino框架下使用LVGL(v8.3)
效果展示 小相机,按一下能拍照,并将照片保存在sd卡中. 开发环境 使用的时VSCode+PlatformIO进行开发(强力推荐,用了就回不去了),当然也可以使用ArduinoIDE进行开发. 具体怎 ...
- LVGL V8之显示中文
使用在线工具转换字体 在线转换工具 转换"长风破浪会有时\n直挂云帆济沧海" 转换好的文件内容 /***************************************** ...
最新文章
- 现代计算机基本工作原理,现代计算机的基本工作原理是
- 计算机基本知识培训稿,计算机基础知识培训稿.doc
- android 正则表达式3,含有至少3个字符类型的android正则表达式
- OpenStack 对接 Ceph 环境可以创建卷但不能挂载卷的问题
- 在记录实体log信息的时候,2个公司的区别
- 12c集群日志位置_Oracle 19C RAC 集群日志位置变化
- android 开关数据连接电脑,Android网络数据开关用法简单示例
- C# 对Ini文件操作(C# ini文件操作类)
- 2020-2021年中国购物中心消费者洞察报告
- java okhttp3 工具类,Retrofit+okhttp+Rxjava网络请求工具类
- 快速排序的两种实现方法(js)
- 安装依赖以及页面解析
- 商品翻牌效果(纯css)
- 开发Servlet的方法(2)
- Telegram纸飞机电报更改为设置为中文汉化教程
- 企业如何架设代理服务器联接互联网
- SDUT —— 计算组合数
- 一文搞定 JVM 面试,教你吊打面试官~
- 《图像超分辨率研究综述》笔记
- mysql笔试题18道
热门文章
- mysql 视图存在,但查询时报视图不存在
- 使用mina解析http协议的使用
- 小肚皮最新版本_小肚皮最新版apk下载-小肚皮最新版app安卓版下载 5.20.2-老铁下载网...
- 左手定则、右手定则、右手螺旋定则、楞次定律笔记
- 冬日娜刻薄提问雷哭史冬鹏 无厘头堪比韩乔生
- 新手学Python之学会查阅API文档
- UI设计中的标签设计规范
- DataFountain2021丨系统认证风险预测 TOP方案(附代码)
- Django 02 :部门管理 【面板设计(Bootstrap)+部门的增删改查(Django+MySQL)】
- dynamodb 数据迁移_亚马逊发布DynamoDB-用于弹性计算的快速,可扩展NoSQL数据库