LVGL 控件之按钮（lv_button）

news2024/9/20 18:43:53

目录

  • 一、按钮
    • 1、概述
    • 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.4.4 颜色
        • 2.4.5 延伸
      • 2.5 设置圆角弧度
      • 2.6 修改其他状态下的显示
  • 二、例程

一、按钮

1、概述

按钮部件（lv_btn）仅有一个组成部分：主体背景，示意图如下：

与 Base object（见：LVGL 控件之基础对象（lv_obj）） 相比，按钮没有新功能。 它们可用于语义目的，并且默认设置略有不同。

默认情况下，按钮在以下方面与基础对象不同：

  • 不可滚动
  • 添加到默认组
  • 默认高度和宽度设置为 LV_SIZE_CONTENT

button 对象通过 lv_btn_create 创建。

lv_obj_t * lv_btn_create(lv_obj_t * parent)

因此，这里不再过多叙述 button 的一些东西，这里主要讲一下样式的设置。

2、样式

2.1 设置背景

2.1.1 颜色

通过函数 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 透明度

这里是改成了 20% 的透明度：

lv_obj_set_style_bg_opa(btn, LV_OPA_20, LV_PART_MAIN);

修改透明度只需要修改中间的 LV_OPA_XX 即可。

2.1.3 渐变色

背景可以使用渐变色的方式。用到了下面两个个 API 函数：

函数含义
lv_obj_set_style_bg_grad_color设置渐变色的颜色
lv_obj_set_style_bg_grad_dir设置渐变方向
  • 水平方向：LV_GRAD_DIR_HOR
  • 垂直方向：LV_GRAD_DIR_VER
lv_obj_set_style_bg_grad_color(btn, lv_color_make(252, 144, 181), LV_PART_MAIN);
lv_obj_set_style_bg_grad_dir(btn, LV_GRAD_DIR_VER, LV_PART_MAIN);

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

在这里插入图片描述

2.1.4 渐变色起始位置设置
函数含义
lv_obj_set_style_bg_main_stop(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector)设置开始位置
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(btn, 127, LV_PART_MAIN);
lv_obj_set_style_bg_grad_stop(btn, 255, LV_PART_MAIN);

2.2 修改边界

2.2.1 宽度

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

lv_obj_set_style_border_width(btn, 4, LV_PART_MAIN);

可以看到边界就是黑色那一圈。

2.2.2 颜色
lv_obj_set_style_border_color(btn, lv_color_make(246, 174, 49), LV_PART_MAIN);

在这里插入图片描述

2.2.3 透明度

默认是不透明。

lv_obj_set_style_border_opa(btn, LV_OPA_50, LV_PART_MAIN);

在这里插入图片描述

2.2.4 指定边

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

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(btn, LV_BORDER_SIDE_BOTTOM | LV_BORDER_SIDE_RIGHT, LV_PART_MAIN);

2.3 修改边框

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

2.4 修改阴影

2.4.1 宽度

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

lv_obj_set_style_shadow_width(btn, 4, LV_PART_MAIN);

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

2.4.2 透明度

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

lv_obj_set_style_shadow_opa(btn, LV_OPA_80, LV_PART_MAIN);

此时也看不太明显。

2.4.3 偏移坐标

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

  1. 改变 x 轴方向上的偏移：
lv_obj_set_style_shadow_ofs_x(btn, 10, LV_PART_MAIN);

这样看起来就非常明显了。

  1. 改变 y 轴方向上的偏移：
lv_obj_set_style_shadow_ofs_y(btn, 10, LV_PART_MAIN);

2.4.4 颜色
lv_obj_set_style_shadow_ofs_x(btn, 10, LV_PART_MAIN);
lv_obj_set_style_shadow_ofs_y(btn, 10, LV_PART_MAIN);
lv_obj_set_style_shadow_color(btn, lv_color_make(252, 144, 181), LV_PART_MAIN);

2.4.5 延伸

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

lv_obj_set_style_shadow_spread(btn, 4, LV_PART_MAIN);

2.5 设置圆角弧度

通过 lv_style_set_radius 设置圆角弧度。

lv_obj_set_style_radius(btn, 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);

为了简化按钮的使用，可以使用 lv_btn_get_state(btn) 来获取按钮的状态。它返回以下值之一：

  • LV_BTN_STATE_RELEASED 松开
  • LV_BTN_STATE_PRESSED 被点击
  • LV_BTN_STATE_CHECKED_RELEASED 点击后松开
  • LV_BTN_STATE_CHECKED_PRESSED 重复点击
  • LV_BTN_STATE_DISABLED 禁用
  • LV_BTN_STATE_CHECKED_DISABLED 禁止点击

使用 lv_btn_set_state(btn, LV_BTN_STATE_...) 可以手动更改按钮状态。

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);

二、例程

代码比较简单，主要是样式的设置和事件的添加，运行效果和源码见下：

lv_obj_t *btn_speed_up;
lv_obj_t *btn_speed_down;
lv_obj_t *btn_stop;
lv_font_t *font = &lv_font_montserrat_16;
lv_obj_t *label_speed;
uint32_t speed_val;

static void lv_example_label(void) {
    label_speed = lv_label_create(lv_scr_act());
    /* 创建速度显示标签 */
    lv_obj_set_style_text_font(label_speed, font, LV_PART_MAIN); /* 设置字体 */
    lv_label_set_text(label_speed, "Speed : 0 RPM"); /* 设置文本 */
    /* 设置标签位置 */
    lv_obj_align(label_speed, LV_ALIGN_TOP_MID, 0, 100);
}

static void btn_event_cb(lv_event_t * e) {
    lv_obj_t *target = lv_event_get_target(e); /* 获取触发源 */
    if(target == btn_speed_up) { /* 加速按钮 */
        speed_val += 30;
    } else if(target == btn_speed_down) { /* 减速按钮 */
        speed_val -= 30;
    } else if(target == btn_stop) { /* 急停按钮 */
        speed_val = 0;
    }

    lv_label_set_text_fmt(label_speed, "Speed : %d RPM", speed_val);  /* 更新速度值 */
}

static void lv_example_btn_up(void) {
    btn_speed_up = lv_btn_create(lv_scr_act());  /* 创建加速按钮 */
    lv_obj_set_size(btn_speed_up, 200, 100);     /* 设置按钮大小 */
    lv_obj_align(btn_speed_up, LV_ALIGN_CENTER, -250, 0);  /* 设置按钮位置 */
    lv_obj_add_event_cb(btn_speed_up, btn_event_cb, LV_EVENT_CLICKED, NULL);  /* 设置按钮事件 */

    lv_obj_t* label = lv_label_create(btn_speed_up);       /* 创建加速按钮标签 */
    lv_obj_set_style_text_font(label, font, LV_PART_MAIN); /* 设置字体 */
    lv_label_set_text(label, "Speed +");                   /* 设置标签文本 */
    lv_obj_set_align(label,LV_ALIGN_CENTER);               /* 设置标签位置 */
}

static void lv_example_btn_down(void) {
    btn_speed_down = lv_btn_create(lv_scr_act());  /* 创建加速按钮 */
    lv_obj_set_size(btn_speed_down, 200, 100);  /* 设置按钮大小 */
    lv_obj_align(btn_speed_down, LV_ALIGN_CENTER, 0, 0);  /* 设置按钮位置 */
    lv_obj_add_event_cb(btn_speed_down, btn_event_cb, LV_EVENT_CLICKED, NULL);  /* 设置按钮事件 */

    lv_obj_t* label = lv_label_create(btn_speed_down);      /* 创建减速按钮标签 */
    lv_obj_set_style_text_font(label, font, LV_PART_MAIN);  /* 设置字体 */
    lv_label_set_text(label, "Speed -");                    /* 设置标签文本 */
    lv_obj_set_align(label,LV_ALIGN_CENTER);                /* 设置标签位置 */
}

static void lv_example_btn_stop(void) {
    btn_stop = lv_btn_create(lv_scr_act());  /* 创建急停按钮 */
    lv_obj_set_size(btn_stop, 200, 100);     /* 设置按钮大小 */
    lv_obj_align(btn_stop, LV_ALIGN_CENTER, 250, 0);  /* 设置按钮位置 */

    lv_obj_set_style_bg_color(btn_stop, lv_color_hex(0xef5f60),  /* 设置按钮背景颜色（默认） */
                              LV_STATE_DEFAULT);

    lv_obj_set_style_bg_color(btn_stop, lv_color_hex(0xff0000),  /* 设置按钮背景颜色（按下） */
                              LV_STATE_PRESSED);

    lv_obj_add_event_cb(btn_stop, btn_event_cb, LV_EVENT_CLICKED, NULL);  /* 设置按钮事件 */

    lv_obj_t* label = lv_label_create(btn_stop);            /* 创建急停按钮标签 */
    lv_obj_set_style_text_font(label, font, LV_PART_MAIN);  /* 设置字体 */
    lv_label_set_text(label, "Stop");                       /* 设置标签文本 */
    lv_obj_set_align(label,LV_ALIGN_CENTER);                /* 设置标签位置 */
}

void my_gui(void) {
    lv_example_label();    /* 速度提示标签 */
    lv_example_btn_up();   /* 加速按钮 */
    lv_example_btn_down(); /* 减速按钮 */
    lv_example_btn_stop(); /* 急停按钮 */
}

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

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

相关文章

C++STL~~list

C++STL~~list

文章目录 一、list的概念二、list的使用三、list的练习四、与vector的对比五、总结 一、list的概念 list 是一种容器&#xff0c;实现了双向链表结构 它具有以下特点&#xff1a; 动态大小&#xff0c;可按需增减元素数量。高效的插入和删除操作&#xff0c;在任意位置插入和…
阅读更多...
(四)进入MySQL 【事务】

(四)进入MySQL 【事务】

一、MySQL事务的概念 MySQL 事务主要用于处理操作量大&#xff0c;复杂度高的数据。比如说&#xff0c;在人员管理系统中&#xff0c; 要删除一个人员&#xff0c;即需要删除人员的基本资料&#xff0c;又需要删除和该人员相关的信息&#xff0c;如信箱&#xff0c; 文章等等。…
阅读更多...
unity中的InstanceID详解 即Object.GetInstanceID

unity中的InstanceID详解 即Object.GetInstanceID

GetInstanceID 是 Unity 中 Object 类的一个方法，它用于获取一个对象的唯一实例标识符。每个 Unity 对象（如游戏对象、组件、资源等）都有一个唯一的实例 ID，这个 ID 在对象的生命周期内是唯一的。 对于它的生命周期是不确定的。网上说在切换场景或者编辑器关闭重启后会变。…
阅读更多...
红黑树刨析（删除部分）

红黑树刨析（删除部分）

文章目录 红黑树删除节点情景分析情景1&#xff1a;删除节点左右子树都为空情景1.1&#xff1a;删除节点为红色情景1.2&#xff1a;删除节点为黑色情况1.2.1&#xff1a;删除节点的兄弟节点是红色情景1.2.2&#xff1a;删除节点的兄弟节点是黑色情景1.2.2.1&#xff1a;删除节点…
阅读更多...
计算机毕业设计选题推荐-大学生竞赛管理系统-Java/Python项目实战

计算机毕业设计选题推荐-大学生竞赛管理系统-Java/Python项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…
阅读更多...
初识Arduino

初识Arduino

什么是Arduino Arduino是一款便捷灵活、方便上手的开源电子原型平台。它包含硬件部分&#xff08;即各种型号的Arduino板&#xff09;、软件部分&#xff08;即Arduino IDE&#xff09;&#xff0c;以及其Arduino社区平台。 Arduino由一个欧洲开发团队于2005年冬季开发&#…
阅读更多...
56基于SpringBoot+Vue+uniapp的教学资源库的详细设计和实现(源码+lw+部署文档+讲解等)

56基于SpringBoot+Vue+uniapp的教学资源库的详细设计和实现(源码+lw+部署文档+讲解等)

文章目录 前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus 系统测试系统测试目的系统功能测试系统测试结论 为什么选择我代码参考数据库参考源码获取源码获取 前言 &#x1f31e;博主介绍 &#xff1a;✌全网粉丝15W,CSDN特邀作者、21…
阅读更多...
信息学奥赛初赛天天练-80-NOIP2015普及组-基础题5-错位排列、二叉树、完全二叉树、叶子节点、完全二叉树叶子节点

信息学奥赛初赛天天练-80-NOIP2015普及组-基础题5-错位排列、二叉树、完全二叉树、叶子节点、完全二叉树叶子节点

NOIP 2015 普及组 基础题5 21 重新排列 1234使得每一个数字都不在原来的位置上&#xff0c;一共有( )种排法 22 一棵结点数为 2015的二叉树最多有( )个叶子结点 2 相关知识点 1) 错位排列 考虑一个有n个元素的排列&#xff0c;若一个排列中所有的元素都不在自己原来的位置…
阅读更多...
建模杂谈系列250 Hello2Pymc

建模杂谈系列250 Hello2Pymc

说明 pymc算是多年的老朋友了&#xff0c;中间失联了好几年。 内容 1 安装 安装更加麻烦了&#xff0c;不能很好的和其他的环境兼容。在官网上&#xff0c;也是建议用conda的方式安装。 conda create -c conda-forge -n pymc_env "pymc>5" conda activate p…
阅读更多...
SQL基础——MySQL的优化

SQL基础——MySQL的优化

简介&#xff1a;个人学习分享&#xff0c;如有错误&#xff0c;欢迎批评指正。 概述 在应用的的开发过程中&#xff0c;由于初期数据量小&#xff0c;开发人员写 SQL 语句时更重视功能上的实现&#xff0c;但是当应用系统正式上线后&#xff0c;随着生产数据量的急剧增长&…
阅读更多...
安卓15发布日期确定,安卓15 谷歌GMS认证截止日期有重大变化!安卓版本GMS认证截止时间更新，谷歌GMS认证之MADA/EDLA设备认证截止时间介绍

安卓15发布日期确定,安卓15 谷歌GMS认证截止日期有重大变化!安卓版本GMS认证截止时间更新，谷歌GMS认证之MADA/EDLA设备认证截止时间介绍

谷歌正式公布安卓15发布日期&#xff0c;即9月3号&#xff0c;到时&#xff0c;安卓版本的认证时间将会有改变&#xff01;以下是深光标准整理的最新安卓版本的到期时间 详细讲解如何看懂这个图 第一列&#xff1a;OS version (API level) 指安卓版本 第二列&#xff1a;AOS…
阅读更多...
软件测试工程师必备的技术能力

软件测试工程师必备的技术能力

今年是我从事软件测试工作的第十年&#xff0c;从功能测试进阶到自动化测试&#xff0c;然后负责稳定性测试团队&#xff0c;进而兼任整个质量团队的技术专项治理&#xff0c;再到基础架构团队的测试专家角色&#xff0c;负责多个技术项目的产品/运营和质量保障工作。可以说绝大…
阅读更多...
GNU 汇编语法基础

GNU 汇编语法基础

目录 一、引言 二、GNU 汇编基本结构 1.指令格式 2.注释 3. 段 三、寄存器和寻址方式 1.寄存器命名 2.寻址方式 四、指令集 1.数据传送指令 2.算术运算指令 3.逻辑运算指令 4.控制流指令 五、宏和函数 1.宏定义 2. 函数定义 六、总结 一、引言 在嵌入式系统…
阅读更多...
南京观海微电子----VCC、 VDD、VSS、VEE 电压符号解释

南京观海微电子----VCC、 VDD、VSS、VEE 电压符号解释

一般在数据手册或者是说原理图中你会看到VCC、 VDD、VEE、VSS等不同的符号&#xff0c;那它们有什么区别&#xff0c;并且该怎么记住它们呢。 解释一&#xff1a; VCC&#xff1a;电源电压&#xff08;双极器件&#xff09;&#xff1b;电源电压&#xff08;74系列数字电路&a…
阅读更多...
机会约束转化为确定性约束-- 样本均值法

机会约束转化为确定性约束-- 样本均值法

当涉及到新能源消纳的机会约束规划时&#xff0c;我们需要深入理解其背后的原理和采用的方法。以下是对上文内容的更详细且更贴切的展开解释&#xff1a; 机会约束转化为确定性约束-- 样本均值法代码获取戳此处代码获取戳此处代码获取戳此处 新能源消纳的机会约束 新能源&…
阅读更多...
计量校准中溯源方法会有哪些不足之处？

计量校准中溯源方法会有哪些不足之处？

随着新型计量器具的不断涌现&#xff0c;现有的计量检定规程或计量校准规范已不能满足计量溯源的需要。特别是一体化大型设备所配备的传感器&#xff0c;如产业生产线之上的压力传感器、流量计、在线电导率仪、在线酸度计为代表的对传感器的检测目前多依据国家检定规程或计量校…
阅读更多...
自制深度学习推理框架之表达式层的设计与实现

自制深度学习推理框架之表达式层的设计与实现

文章目录 一、表达式Expression二、词法解析2.1 词法定义2.2 词法解析 三、语法解析3.1 语法树的定义3.2 语法树构建3.3 语法树的转换(逆波兰式) 四、表达式层4.1 ExpressionLayer和ExpressionParser类4.2 表达式层的注册4.3 表达式层的输入处理4.4 表达式层的计算过程 五、计算…
阅读更多...
分布式计算架构详解以及任务调度方式

分布式计算架构详解以及任务调度方式

信息技术领域重要分支—分布式计算。分布式计算通过将任务分配到多个物理的计算资源上进行处理&#xff0c;以来提高计算效率和资源利用率。今天主讲分布式计算架构的关键组成以及在云服务器背景下任务调度的不同方式&#xff0c;然后再综合来看这些调度策略是怎样适应云环境的…
阅读更多...
使用 nuxi build-module 命令构建 Nuxt 模块

使用 nuxi build-module 命令构建 Nuxt 模块

title: 使用 nuxi build-module 命令构建 Nuxt 模块 date: 2024/8/31 updated: 2024/8/31 author: cmdragon excerpt: nuxi build-module 命令是构建 Nuxt 模块的核心工具，它将你的模块打包成适合生产环境的格式。通过使用 --stub 选项，你可以在开发过程中加快模块构建速度…
阅读更多...
Linux学习——ubuntu安装qt

Linux学习——ubuntu安装qt

安装VM的教程就不过多叙述了&#xff0c;这个简单&#xff0c;大家直接下载VM然后创建虚拟机就可以了&#xff0c;那我们今天来讲讲怎么在ubuntu中安装qtcreator. 如果我们的虚拟机是连接网络的&#xff0c;我们可以直接在Ubuntu上的浏览器中直接下载Qt,我们搜索Qt.io就可以&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023