LITTLEVGL学习--样式+按钮
学习 -- 样式 按钮
2023-09-14 09:07:09 时间
样式API
样式DEMO
功能:绘制一个渐变,具有过渡效果的按钮控件,控制LED。
LVGL_TEST.C
#include "lvgl_test.h"
#include "led.h"
void lv_test(void)
{
lv_obj_t *btn;
static lv_style_t style_btn;
//样式设置
lv_style_init(&style_btn);
//默认状态
lv_style_set_radius(&style_btn, LV_STATE_DEFAULT, 10); //设置圆角
lv_style_set_shadow_opa(&style_btn, LV_STATE_DEFAULT, LV_OPA_30); //设置阴影透明度
lv_style_set_bg_opa(&style_btn, LV_STATE_DEFAULT, LV_OPA_COVER); //设置背景透明度
lv_style_set_bg_color(&style_btn, LV_STATE_DEFAULT, LV_COLOR_YELLOW); //设置背景颜色
lv_style_set_bg_grad_color(&style_btn, LV_STATE_DEFAULT, LV_COLOR_GREEN); //设置背景下半部分颜色
lv_style_set_bg_grad_dir(&style_btn, LV_STATE_DEFAULT, LV_GRAD_DIR_VER); //设置下半部分方向
//pressed状态
lv_style_set_shadow_opa(&style_btn, LV_STATE_PRESSED, LV_OPA_30); //设置阴影透明度
lv_style_set_bg_opa(&style_btn, LV_STATE_PRESSED, LV_OPA_COVER); //设置背景透明度
lv_style_set_bg_color(&style_btn, LV_STATE_PRESSED, LV_COLOR_GREEN); //设置背景颜色
lv_style_set_bg_grad_color(&style_btn, LV_STATE_PRESSED, LV_COLOR_YELLOW); //设置背景下半部分颜色
lv_style_set_bg_grad_dir(&style_btn, LV_STATE_PRESSED, LV_GRAD_DIR_VER); //设置下半部分方向
/*Add a border*/
lv_style_set_border_color(&style_btn, LV_STATE_DEFAULT, LV_COLOR_WHITE); //添加边界框
lv_style_set_border_opa(&style_btn, LV_STATE_DEFAULT, LV_OPA_30); //设置辩解框透明度
lv_style_set_border_width(&style_btn, LV_STATE_DEFAULT, 2); //设置边界框宽度
/*Different border color in focused state*/
lv_style_set_border_color(&style_btn, LV_STATE_FOCUSED, LV_COLOR_BLUE); //设置聚焦状态下边界框颜色
lv_style_set_border_color(&style_btn, LV_STATE_FOCUSED | LV_STATE_PRESSED, LV_COLOR_NAVY);//设置聚焦|按下时边界框颜色
//设置字体颜色
lv_style_set_text_color(&style_btn, LV_STATE_DEFAULT, LV_COLOR_WHITE);
lv_style_set_text_color(&style_btn, LV_STATE_PRESSED, LV_COLOR_BLACK);
/*Make the button smaller when pressed*/
lv_style_set_transform_height(&style_btn, LV_STATE_PRESSED, -5); //按下时高度缩减5
lv_style_set_transform_width(&style_btn, LV_STATE_PRESSED, -10); //按下时宽度缩减10
/*Add a transition to the size change*/
static lv_anim_path_t path;
lv_anim_path_init(&path);
lv_anim_path_set_cb(&path, lv_anim_path_overshoot);//设置过度函数
lv_style_set_transition_prop_1(&style_btn, LV_STATE_DEFAULT, LV_STYLE_TRANSFORM_HEIGHT); //设置过度阶梯 高度
lv_style_set_transition_prop_2(&style_btn, LV_STATE_DEFAULT, LV_STYLE_TRANSFORM_WIDTH); //设置过度阶梯 宽度
lv_style_set_transition_time(&style_btn, LV_STATE_DEFAULT, 300); //设置过度周期
lv_style_set_transition_path(&style_btn, LV_STATE_DEFAULT, &path); //添加过度到对象
btn = lv_btn_create(lv_scr_act(), NULL);
lv_obj_set_pos(btn, 10, 10); /*Set its position*/
lv_obj_set_size(btn, 120, 50); /*Set its size*/
lv_obj_reset_style_list(btn, LV_BTN_PART_MAIN); /*Remove the styles coming from the theme*/
lv_obj_add_style(btn, LV_BTN_PART_MAIN, &style_btn);
//添加txt
lv_obj_t * label = lv_label_create(btn, NULL); /*Add a label to the button*/
lv_label_set_text(label, "LED1");
lv_obj_set_event_cb(btn, handler_event_btn);
}
static void handler_event_btn(lv_obj_t * obj, lv_event_t event)
{
switch (event)
{
case LV_EVENT_PRESSED:
/* code */
LED1 = 0;// PBout(0) //LED1
break;
case LV_EVENT_SHORT_CLICKED:
/* code */
break;
case LV_EVENT_CLICKED:
/* code */
break;
case LV_EVENT_LONG_PRESSED:
/* code */
break;
case LV_EVENT_RELEASED:
/* code */
LED1 = 1;
break;
default:
break;
}
}
LVGL_TEST.H
#ifndef __LVGL_TEST_H
#define __LVGL_TEST_H
#include "lvgl.h"
void lv_test(void);
static void handler_event_btn(lv_obj_t * obj, lv_event_t event);
#endif
版权声明:本文为weixin_43482414原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43482414/article/details/107220782
相关文章
- Java JDBC学习实战(三): 事务管理
- Python学习--14 序列化
- Python学习--08函数式编程
- Python学习--07迭代器、生成器
- Python学习--06切片
- IOS开发--UI进阶之iCarousel学习(待翻译)
- UFLDL 教程学习笔记(一)
- Coursera台大机器学习课程笔记7 -- Noise and Error
- C#特性文章学习
- 雨痕 的《Python学习笔记》--附脑图(转)
- Java -- JDBC 学习--批量处理
- 前端学习 -- Css -- 文本样式
- 前端学习 -- Css -- 字体
- 前端学习 -- 颜色
- 前端学习 -- Css -- 定义列表
- Symfony学习--HttpKernel组件
- [Spring学习笔记 1 ] Spring 简介,初步知识--Ioc容器详解 基本原理。
- 前端学习 -- Css -- 默认样式
- 前端学习 -- Css -- 文本样式
- qa,review代码,这个事情很重要,高级的qa,的确都要会review代码,看来我还是要学习java,
- JavaScript ES6对Proxy的原生支持的一个例子:开发人员学习额外的编程语言
- 目标检测进阶:使用深度学习和 OpenCV 进行目标检测
- 迁移学习《Pseudo-Label : The Simple and Efficient Semi-Supervised Learning Method for Deep Neural Networks》
- 《ASP.NET4 从入门到精通》学习笔记4
- Linux 中断学习之前言篇---中断之原理篇
- AI学习之路(19)TensorFlow里的矩阵乘法
- git操作与原理学习
- autograd.grad 学习
- nohup用法学习
- cocos2dx游戏开发——微信打飞机学习笔记(九)——BulletLayer的搭建
- CrowdStrike的机器学习和threat graph 都是云端做的
- Python学习笔记十之Opencv图像处理:阈值、滤波、形态学、梯度、轮廓提取、FFT
- OpenCV-Python学习(9)—— OpenCV 通道的分离与合并(cv.split、cv.merge、cv.mixChannels、cv.inRange)