LVGL学习笔记10 - 按钮Button

news2024/12/24 3:57:39

目录

1. Check型按钮

2.  修改样式

2.1 设置背景

2.1.1 颜色

2.1.2 透明度

2.1.3 渐变色

2.1.4 渐变色起始位置设置

2.2 修改边界

2.2.1 宽度

2.2.2 颜色

2.2.3 透明度 

2.2.4 指定边

 2.3 修改边框

2.4 修改阴影

2.4.1 宽度

2.4.2 透明度

2.4.3 偏移坐标

2.3.4 颜色

 2.3.5 延伸

 2.5 设置圆角弧度

2.6 修改其他状态下的显示

 3. 状态

4. 布局

按钮有点类似矩形框，更多的是具有事件属性。通过lv_btn_create创建。

lv_obj_t * lv_btn_create(lv_obj_t * parent)

按钮的Parts只有LV_PART_MAIN。 

1. Check型按钮

通过lv_obj_add_flag将button设置成Check型按钮。

void lv_obj_add_flag(lv_obj_t * obj, lv_obj_flag_t f)

验证代码：

    btn1 = lv_btn_create(lv_scr_act());
    lv_obj_set_size(btn1, LV_PCT(20), LV_PCT(20));
    lv_obj_align(btn1, LV_ALIGN_TOP_LEFT, 10, 40);
    lv_obj_add_flag(btn1, LV_OBJ_FLAG_CHECKABLE);

2.  修改样式

所有的样式可以通过直接的API或者Style改变，主要介绍API的方式，Style的方式类似。

2.1 设置背景

2.1.1 颜色

通过API函数lv_obj_set_style_bg_color

lv_obj_set_style_bg_color(btn1, lv_color_hex(0xafafaf), LV_PART_MAIN);

或者通过Style设置

static lv_style_t style;
lv_style_init(&style);
lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_GREY));
lv_obj_add_style(btn1, &style, LV_STATE_DEFAULT);

2.1.2 透明度

改成50%的透明度

lv_obj_set_style_bg_opa(btn1, LV_OPA_50, LV_PART_MAIN);

 

背景是白色，所以可以看到颜色明显变浅了。 

2.1.3 渐变色

背景可以使用渐变色的方式。用到2个API函数，lv_obj_set_style_bg_grad_color设置渐变色的颜色，lv_obj_set_style_bg_grad_dir设置的是渐变方向。

垂直方向LV_GRAD_DIR_VER

lv_obj_set_style_bg_grad_color(btn1, lv_color_make(252, 144, 181), LV_PART_MAIN);
lv_obj_set_style_bg_grad_dir(btn1, LV_GRAD_DIR_VER, LV_PART_MAIN);

水平方向LV_GRAD_DIR_HOR

颜色是从背景色过渡到设置的渐变色。

2.1.4 渐变色起始位置设置

设置开始位置API

void lv_obj_set_style_bg_main_stop(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector)

设置结束位置API

void lv_obj_set_style_bg_grad_stop(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector)

参数value表示起始位置，0：最左/最上位置，255：最右/最下位置。开始默认值是0，结束默认值为255。

接上面的例子，将渐变色的开始位置改为中间。

lv_obj_set_style_bg_main_stop(btn1, 127, LV_PART_MAIN);
lv_obj_set_style_bg_grad_stop(btn1, 255, LV_PART_MAIN);

2.2 修改边界

2.2.1 宽度

边界的宽度一般默认是0，所以需要先设置宽度。

lv_obj_set_style_border_width(btn1, 4, LV_PART_MAIN);

 

可以看到边界并不是蓝色那一圈，而是黑色那一圈。

2.2.2 颜色

lv_obj_set_style_border_color(btn1, lv_color_make(246, 174, 49), LV_PART_MAIN);

2.2.3 透明度 

默认是不透明。

lv_obj_set_style_border_opa(btn1, LV_OPA_50, LV_PART_MAIN);

 

从上图可以看出来，边界是和底部黑色重合的。

2.2.4 指定边

4个边通过lv_obj_set_style_border_side指定修改哪几个边，可以通过OR的方式组合多个边

enum {
    LV_BORDER_SIDE_NONE     = 0x00,
    LV_BORDER_SIDE_BOTTOM   = 0x01,
    LV_BORDER_SIDE_TOP      = 0x02,
    LV_BORDER_SIDE_LEFT     = 0x04,
    LV_BORDER_SIDE_RIGHT    = 0x08,
    LV_BORDER_SIDE_FULL     = 0x0F,
    LV_BORDER_SIDE_INTERNAL = 0x10, /**< FOR matrix-like objects (e.g. Button matrix)*/
};
lv_obj_set_style_border_side(btn1, LV_BORDER_SIDE_BOTTOM | LV_BORDER_SIDE_RIGHT, LV_PART_MAIN);

  

 2.3 修改边框

边框修改没看出来哪里有变动。

lv_obj_set_style_outline_pad(btn1, 20, LV_PART_MAIN);
lv_obj_set_style_outline_width(btn1, 4, LV_PART_MAIN);
lv_obj_set_style_outline_color(btn1, lv_color_make(252, 144, 181), LV_PART_MAIN);

左边是按钮，右边是对象，可以看到右边的设置有起作用。

2.4 修改阴影

2.4.1 宽度

阴影的宽度默认是0，改为4验证

lv_obj_set_style_shadow_width(btn1, 4, LV_PART_MAIN);

由于默认透明度是透明，所以只改这个参数无法看到效果。

2.4.2 透明度

阴影的透明度通过lv_obj_set_style_shadow_opa改变。

lv_obj_set_style_shadow_opa(btn1, LV_OPA_80, LV_PART_MAIN);

此时也看不太明显。

2.4.3 偏移坐标

这里的偏移坐标是基于对象左顶点的偏移。 

lv_obj_set_style_shadow_ofs_x(btn1, 10, LV_PART_MAIN);

lv_obj_set_style_shadow_ofs_y(btn1, 10, LV_PART_MAIN);

 

2.3.4 颜色

lv_obj_set_style_shadow_ofs_x(btn1, 10, LV_PART_MAIN);
lv_obj_set_style_shadow_ofs_y(btn1, 10, LV_PART_MAIN);
lv_obj_set_style_shadow_color(btn1, lv_color_make(252, 144, 181), LV_PART_MAIN);

 2.3.5 延伸

设置在每个方向上的延伸值。

lv_obj_set_style_shadow_spread(btn1, 10, LV_PART_MAIN);

 2.5 设置圆角弧度

通过lv_style_set_radius设置圆角弧度。

lv_obj_set_style_radius(btn1, LV_PCT(20), LV_PART_MAIN);

2.6 修改其他状态下的显示

需要通过Style修改其他状态下的显示。例如如果采用Check Button，选中后的颜色是红色，改为灰色。

static lv_style_t style;
lv_style_init(&style);
lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_GREY));
lv_obj_add_style(btn1, &style, LV_STATE_CHECKED);

 3. 状态

按钮支持的状态有LV_STATE_DEFAULT、LV_STATE_CHECKED、LV_STATE_FOCUSED和LV_STATE_PRESSED。

static lv_style_t style;
lv_style_init(&style);
lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_GREY));
lv_obj_add_style(btn1, &style, LV_STATE_PRESSED);
lv_obj_add_style(btn2, &style, LV_STATE_FOCUSED);

左边的按钮在Press时会显示灰色，松开会恢复为蓝色。右边的按钮处于Focused状态时会变成蓝色。

LV_STATE_CHECKED是按钮为Check型时才有意义。

4. 布局

一般情况下，按钮Button会和标签Label组合使用，验证代码如下：

obj1 = lv_btn_create(lv_scr_act());
obj2 = lv_label_create(obj1);

lv_obj_set_size(obj1, LV_PCT(20), LV_PCT(20));
lv_obj_align(obj1, LV_ALIGN_CENTER, 0, 0);

lv_obj_set_size(obj2, LV_PCT(100), LV_PCT(100));
lv_obj_align(obj2, LV_ALIGN_DEFAULT, 0, 0);
lv_obj_set_style_text_align(obj2, LV_TEXT_ALIGN_AUTO, LV_PART_MAIN);

LV_TEXT_ALIGN_AUTO：

LV_TEXT_ALIGN_LEFT：

LV_TEXT_ALIGN_CENTER：

LV_TEXT_ALIGN_RIGHT：

可以看出lv_obj_set_style_text_align影响的只是X方向上的对齐方式。

现在Label的Size设置成了100%和Button一样大小，所以lv_obj_align的设置没有起作用。

lv_obj_set_size(obj2, LV_PCT(50), LV_PCT(20));
lv_obj_align(obj2, LV_ALIGN_BOTTOM_LEFT, 0, 0);
lv_obj_set_style_text_align(obj2, LV_TEXT_ALIGN_RIGHT, LV_PART_MAIN);

       

红色框是Label的大概位置和大小，所以Label位于Button的LV_ALIGN_BOTTOM_LEFT，而字符串在Label的LV_TEXT_ALIGN_RIGHT。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/133217.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

PHP代码审计系列（五）

PHP代码审计系列（五）

PHP代码审计系列&#xff08;五&#xff09; 本系列将收集多个PHP代码安全审计项目从易到难&#xff0c;并加入个人详细的源码解读。此系列将进行持续更新。 数字验证正则绕过 源码如下 <?phperror_reporting(0); $flag flag{test}; if ("POST" $_SERVER[…
阅读更多...
数值优化之凸集

数值优化之凸集

本文ppt来自深蓝学院《机器人中的数值优化》 目录 1 凸集的定义 2 凸集的运算 1 凸集的定义 集合中任意两点连线形成的线段属于这个集合&#xff0c;这个集合是凸集。 注意&#xff1a;是否是凸集&#xff0c;集合的边界是否属于这个集合很重要 这涉及到构造最小凸包的问题…
阅读更多...
行锁功过：怎么减少行锁对性能的影响？

行锁功过：怎么减少行锁对性能的影响？

在上一篇文章中，我跟你介绍了 MySQL 的全局锁和表级锁，今天我们就来讲讲 MySQL 的行锁。 MySQL 的行锁是在引擎层由各个引擎自己实现的。但并不是所有的引擎都支持行锁，比如 MyISAM 引擎就不支持行锁。不支持行锁意味着并发控制只能使用表锁，对于这种引擎的表，同一张表上…
阅读更多...
Java中的四种引用类型

Java中的四种引用类型

1.对象引用介绍 从 JDK1.2 版本开始&#xff0c;把对象的引用分为四种级别&#xff0c;从而使程序更加灵活的控制对象的生命周期。这四种级别由高到低依次为&#xff1a;强引用、软引用、弱引用和虚引用。 用表格整理之后&#xff0c;各个引用类型的区别如下&#xff1a; 2.强…
阅读更多...
BOM编程：location对象

BOM编程：location对象

document 对象和window对象的location的区别 document对象的位置获取步骤是返回这个相关的全局对象的位置对象&#xff0c;如果这是完全活动的&#xff0c;否则为空。 Window对象的位置获取步骤是返回它的位置对象。每个Window对象都与创建Window对象时分配的Location对象的唯…
阅读更多...
Spark01：Spark工作原理

Spark01：Spark工作原理

1. Spark执行数据计算的整个流程 首先通过Spark客户端提交任务到Spark集群&#xff0c;然后Spark任务在执行的时候会读取数据源HDFS中的数据&#xff0c;将数据加载到内存中&#xff0c;转化为RDD&#xff0c;然后针对RDD调用一些高阶函数对数据进行处理&#xff0c;中间可以调…
阅读更多...
ElementUI——案例1用户管理（基于SpringBoot）

ElementUI——案例1用户管理（基于SpringBoot）

1.前期准备 备注&#xff1a;主要涉及组件container组件&#xff0c;导航菜单组件&#xff0c;router路由组件&#xff0c;carousel 走马灯组件&#xff0c;Image组件&#xff0c;Table表格组件 #1.在项目开发目录使用脚手架新建vue项目&#xff08;需要提前安装好node和webp…
阅读更多...
无字母数字webshell提高

无字母数字webshell提高

前言 元旦快乐 -- 转眼就到了2023年 新的一年继续努力 在p神博客中看到一个 通过上传临时文件进行rce&#xff0c;便想着写一篇文章&#xff0c;记录一下这个小trick。太强了 比如给你下面这么一串代码。正如文章标题 无字母数字&#xff0c;如果匹配到字母和数字&#xf…
阅读更多...
【Vuex快速入门】vuex基础知识与安装配置

【Vuex快速入门】vuex基础知识与安装配置

vuex快速入门——什么是vuex&#xff1f;创作背景vuex基础知识一、vuex是什么&#xff1f;二、vuex的组成三、为什么使用vuex&#xff1f;四、什么时候使用vuex&#xff1f;vuex的安装配置一、直接下载 / CDN引用二、npm安装vuex三、yarn安装四、自己构建更多内容可参考Vuex官方…
阅读更多...
[从零开始]用python制作识图翻译器·二

[从零开始]用python制作识图翻译器·二

AlsoEasy-RecognitionTranslator需求分析系统分析功能拆解工程语言选择技术可行性分析具体实现需求分析 见上篇[从零开始]用python制作识图翻译器一 上篇分析了该产品的需求以及市场上的可行性&#xff08;没有被吊打的竞品&#xff09;。而本篇将着重于分析如何实现。 系统分析…
阅读更多...
gateway基本配置

gateway基本配置

目录 1、gateway简介 2、gateway核心概念 3、路由 4、断言 5、过滤器 5.1、过滤器介绍 5.2、内置局部过滤器与使用 5.3、内置全局过滤器 5.4、自定义全局过滤器 5.4.1、黑名单校验 5.4.2、模拟登录校验 6、一个简单的gateway配置实例 1、gateway简介 路由转发 执行…
阅读更多...
Linear Regression with PyTorch 用PyTorch实现线性回归

Linear Regression with PyTorch 用PyTorch实现线性回归

文章目录4、Linear Regression with PyTorch 用PyTorch实现线性回归4.1 Prepare dataset 准备数据集4.2 Design Model 设计模型4.2.1 __call__() 作用4.3 Construct Loss and Optimizer 构造损失和优化器4.4 Training Cycle 训练周期4.5 Test Model 测试模型4.6 Different Opti…
阅读更多...
redis缓存淘汰策略

redis缓存淘汰策略

定时删除 Redis不可能时时刻刻遍历所有被设置了生存时间的key&#xff0c;来检测数据是否已经到达过期时间&#xff0c;然后对它进行删除。 立即删除能保证内存中数据的最大新鲜度&#xff0c;因为它保证过期键值会在过期后马上被删除&#xff0c;其所占用的内存也会随之释放。…
阅读更多...
zookeeper学习笔记2（小D课堂）

zookeeper学习笔记2（小D课堂）

zookeeper数据模型&#xff1a; 我们的zookeeper是以节点的形式存在的&#xff0c;这样的形式和数据结构中的树的形式很像。同时也很像我们的linux的结构&#xff0c;例如linux的/user/local目录下可以有我们的/usr/local/tomcat目录。这样的节点形式。 我们的zookeeper中的每…
阅读更多...
算法练习-常用查找算法复现

算法练习-常用查找算法复现

一个不知名大学生&#xff0c;江湖人称菜狗 original author: jacky Li Email : 3435673055qq.com Time of completion&#xff1a;2023.1.1 Last edited: 2023.1.1 目录 算法练习-常用查找算法复现&#xff08;PS&#xff1a;1 -- 3自己写的&#xff0c;4、5懒得写了&#xf…
阅读更多...
PHP开发者之路

PHP开发者之路

我们经常会发现&#xff0c;历时四年软件专业的大学生毕业居然找不到工作&#xff0c;即便找到了工作也只能是做一些简单的辅助性工作。 那么我们不禁要问&#xff0c;究竟是什么原因让我们可爱的大学生们学而无用&#xff0c;或者用而不学呢&#xff1f; 我认为主要是因为现…
阅读更多...
三角形年份aabb3n+1近似计算阶乘之和数据统计水仙花数韩信点兵倒三角形子序列的和分数化小数排列蛇形填数sprintf竖式问题

三角形年份aabb3n+1近似计算阶乘之和数据统计水仙花数韩信点兵倒三角形子序列的和分数化小数排列蛇形填数sprintf竖式问题

目录 P16_习题1-6_三角形 P16_习题1-7_年份 P20_eg2-1_aabb 为什么是int n a*1100 b*11 为什么要将向下取整&#xff1f; P22_eg2-2_3n1问题 P24_eg2-3_近似计算 P25_eg2-4_阶乘之和 P27_eg2-5_数据统计 P34_习题2-1_水仙花数 P34_习题2-2_韩信点兵 P34_习题2-3_倒…
阅读更多...
Fragment全文详解(由浅入深_源码分析)

Fragment全文详解(由浅入深_源码分析)

相信android开发者们一定或多或少的用过Fragment&#xff0c;但是对于其更深层次的原理我猜可能大部分应该都没有了解过&#xff0c;今天这里就由浅入深&#xff0c;整体对Fragment做一个全面解析。 基础介绍 Fragment是什么以及为什么要有Fragment呢&#xff1f; Fragment直…
阅读更多...
长沙烟火气回来了，颐而康客流回暖为什么这么快？

长沙烟火气回来了，颐而康客流回暖为什么这么快？

随着一大批阳康的人们走出家门&#xff0c;长沙这座消费之城也逐步恢复了往日的活力。车多起来了、路堵起来了、线下店铺恢复营业了、长沙的烟火气息又回来了。 在颐而康万家丽西子店的大厅里&#xff0c;等候休息区已经坐满了顾客&#xff0c;他们有的在等待&#xff0c;有的…
阅读更多...
Centos6从零开始安装mysql和tomcat后台环境，并成功部署Tomcat项目

Centos6从零开始安装mysql和tomcat后台环境，并成功部署Tomcat项目

最近因为搞定了一些环境的搭建因为项目过于老旧的缘故我从centosstream9一直改换7一直到6都没有成功一直到改成6.5的32位版本才算是成功搭建完成所以特地来写一篇文章记录一下。 首先我的liunx使用版本是 centos6.5 32位 java版本&#xff1a;jdkCentos6从零开始安装mysql和tom…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023