lvgl 笔记 按钮部件 (lv_btn) 和 开关部件 (lv_switch)

第四节 LVGL部件使用 LVGL部件使用 阅读详情
AI摘要

本文介绍了LVGL图形库中按钮和开关的基础用法,包括创建、设置大小位置、添加样式、响应事件以及状态检查。还展示了如何通过事件回调实现互斥锁功能,确保同一时间只有一个开关处于选中状态。

按钮基础使用方法:

lv_btn 和 lb_obj 使用方法一样,只是外表并不相同,基础创建方法只需一行代码。

lv_obj_t* btn = lv_btn_create(lv_scr_act());

添加大小和位置: 

lv_obj_t* btn = lv_btn_create(lv_scr_act());
lv_obj_set_size(btn, 100, 50);
lv_obj_set_align(btn, LV_ALIGN_CENTER);

添加触发样式: 

在 lv_obj_set_style_bg_color() 配置为,LV_STATE_PRESSED 即可配置为按下改变颜色。

其中和 lv_obj 一样,共有以下可供选择的参数:

lv_obj_t* btn = lv_btn_create(lv_scr_act());
lv_obj_set_size(btn, 100, 50);
lv_obj_set_align(btn, LV_ALIGN_CENTER);
lv_obj_set_style_bg_color(btn, lv_color_hex(0xffe1d4), LV_STATE_PRESSED);

添加事件:

lv_obj_add_event_cb(); 可以添加事件。

static void event_cb(lv_event_cb_t* e) {
    lv_event_code_t code = lv_event_get_code(e);
    if (code == LV_EVENT_VALUE_CHANGED) {
        printf("LV_EVENT_VALUE_CHANGED\n");
    }
}

void my_gui(void){
    lv_obj_t* btn = lv_btn_create(lv_scr_act());
    lv_obj_add_flag(btn, LV_OBJ_FLAG_CHECKABLE);
    lv_obj_add_event_cb(btn, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
}

开关基础使用方法:

lv_obj_t* switch1 = lv_switch_create(lv_scr_act());

为开关部件配置颜色:

开关部件共有三个部分可以单独配置颜色,主体是指未被选中状态(下图中灰色),手柄指的是圆球部分,指示器则是选中部分(下图中蓝色)。

    lv_obj_t* switch1 = lv_switch_create(lv_scr_act());
    lv_obj_set_style_bg_color(switch1, lv_color_hex(0xea1b1b), LV_PART_MAIN);
    lv_obj_set_pos(switch1, 0, 0);

    lv_obj_t* switch2 = lv_switch_create(lv_scr_act());
    lv_obj_set_style_bg_color(switch2, lv_color_hex(0xea1b1b),LV_PART_KNOB);
    lv_obj_set_pos(switch2, 0, 50);

    lv_obj_t* switch3 = lv_switch_create(lv_scr_act());
    lv_obj_set_style_bg_color(switch3, lv_color_hex(0xea1b1b), LV_STATE_CHECKED|LV_PART_INDICATOR);
    lv_obj_set_pos(switch3, 0, 100);

 

 值得注意的是,在设置 LV_PART_INDICATOR 指示器时,完整的写法应与上 LV_STATE_CHECKED,不然配置的样式就会被覆盖,导致不生效。

 lv_obj_set_style_bg_color(switch3, lv_color_hex(0xea1b1b), LV_STATE_CHECKED|LV_PART_INDICATOR);

修改开关状态:

按钮状态默认是关闭的,如果我们使用 lv_obj_add_state() 函数即可为按钮添加一个选中的状态,这样他在第一次运行时就是打开状态。

lv_obj_t* switch1 = lv_switch_create(lv_scr_act());
lv_obj_set_pos(switch1, 0, 0);

lv_obj_t* switch2 = lv_switch_create(lv_scr_act());
lv_obj_add_state(switch2, LV_STATE_CHECKED);
lv_obj_set_pos(switch2, 0, 50);

 如果要让按钮不被选中,我们可以再移除这个状态:lv_obj_clear_state() 即可做到

lv_obj_clear_state(switch2, LV_STATE_CHECKED);

 除了修改 LV_STATE_CHECKED 状态外,另一个 LV_STATE_DISABLED 状态也经常使用,他的作用的使得按钮不能被修改。

捕捉按钮状态:

lv_obj_has_state() 函数可以返回当前组件的状态。在以下代码中,我们使用了:

lv_obj_has_state(switch1, LV_STATE_CHECKED)

来返回选中状态。其原理是检查 LV_STATE_CHECKED 的状态判断的。

static void event_cb(lv_event_t* e) {
    lv_event_code_t code = lv_event_get_code(e);
    if (lv_obj_has_state(switch1, LV_STATE_CHECKED)) {
        printf("LED ON \n");
    }
    else {
        printf("LED OFF \n");
    }
}

void my_gui(void) {
    switch1 = lv_switch_create(lv_scr_act());
    lv_obj_add_event_cb(switch1, event_cb, LV_EVENT_VALUE_CHANGED, NULL); //对象的值改变即触发回调
}

效果如下: 

互斥锁案例:

static void event_cb(lv_event_t* e) {
    lv_obj_t* target = lv_event_get_target(e); //获得触发的基本对象

    if (target == switch1) {
        if (lv_obj_has_state(switch1, LV_STATE_CHECKED)) 
            lv_obj_clear_state(switch2, LV_STATE_CHECKED);
        else 
            lv_obj_add_state(switch2, LV_STATE_CHECKED);
    }

    if (target == switch2) {
        if (lv_obj_has_state(switch2, LV_STATE_CHECKED)) 
            lv_obj_clear_state(switch1, LV_STATE_CHECKED);
        else 
            lv_obj_add_state(switch1, LV_STATE_CHECKED);
    }
}

void my_gui(void) {
    switch1 = lv_switch_create(lv_scr_act());
    lv_obj_add_event_cb(switch1, event_cb, LV_EVENT_VALUE_CHANGED, NULL);

    switch2 = lv_switch_create(lv_scr_act());
    lv_obj_add_state(switch2, LV_STATE_CHECKED);
    lv_obj_set_pos(switch2, 0, 50);
    lv_obj_add_event_cb(switch2, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
}

 原理是当设置了一个按钮之后,就对另一个按钮通过配置 lv_obj_add_state() 和 lv_obj_clear_state() 做出与之相反的动作。

 

LVGL V8学习之键盘按键样式重绘(二) 这一篇继续研究一下基于btnmatrix的键盘按键重绘,是对上一篇LVGL V8学习之键盘按键样式重绘(一)的代码的优化,还是通过codeblock来模拟代码的运行,代码如下: // 按键矩阵的事件回调函数 static void btnmatrix_event_callback(lv_event_t * event) { if (event == NULL) { printf("[%s:%d] event is NULL\n", __FUNCTION__, __LINE 阅读详情

相关推荐

LVGL -按键基本操作-创建、风格和回调 上

创建// 创建一个按钮设定大小 lv_obj_set_size()// 设置按钮大小为 100x50`对齐 lv_obj_align()// 将按钮居中为按钮(或其他对象)添加事件回调函数。

huanghongqi11的博客 1473

LVGL学习笔记10 - 按钮Button

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

pq的博客 1万+

LVGL界面美化指南:别再只用默认样式了!教你深度定制lv_switch和lv_btn的炫酷皮肤

本文深入探讨了LVGL界面美化技巧,重点介绍了如何深度定制`lv_btn`和`lv_switch`等控件的炫酷皮肤。通过理解LVGL的样式系统设计哲学,开发者可以创建具有品牌特色的渐变按钮、立体感阴影和交互微动画,同时实现Material Design和iOS风格的开关控件。文章还提供了设计工作流、性能优化策略及高级技巧,帮助开发者提升嵌入式设备界面的视觉效果和用户体验。

weixin_30443813的博客 472

LVGL学习笔记16 - 进度条Bar

进度条有一个背景和一个指示器组成,通过lv_bar_create创建对象。进度条默认的范围是 0..100。

pq的博客 5315

LVGL实战:用lv_btn和lv_switch打造一个智能家居控制面板(ESP32+Arduino)

本文详细介绍了如何使用LVGL的lv_btn和lv_switch组件在ESP32+Arduino平台上构建智能家居控制面板。从环境搭建、LVGL基础配置到界面设计和高级功能实现,逐步指导开发者完成一个功能完整的控制面板原型,适用于物联网设备的用户界面开发。

weixin_30292843的博客 376

LVGL样式进阶:别再只改颜色了!手把手教你定制lv_switch的动画和lv_btn的按压反馈

本文深入探讨LVGL样式系统的进阶应用,教你如何为lv_switch定制丝滑滑块动画和lv_btn的物理按压反馈。通过详细的代码示例和优化策略,帮助开发者突破基础样式配置,打造专业级嵌入式UI交互体验。

weixin_33743248的博客 319

LVGL学习之按钮,开关部件(基于正点原子)

lv_obj_has_state(switch1, LV_STATE_CHECKED) /* 返回值:bool类型,开 :1;/* 清除开关的状态 */注意,开关的主体部分是当开关 关闭的 的时候才能看到。

weixin_43408345的博客 835

3张RTX 4090就能跑!BAGEL-7B多模态模型本地部署避坑指南(附Flash Attention安装技巧)

本文详细介绍了如何在3张RTX 4090显卡上本地部署BAGEL-7B多模态模型,包括硬件配置、环境设置、多卡并行优化及常见问题解决方案。特别提供了Flash Attention安装技巧和显存优化策略,帮助开发者高效运行这一开源多模态模型,实现文本与图像生成任务。

1a2s3d4f5g的博客 653

lvgl 实战笔记:按钮(lv_btn)与开关(lv_switch)的交互设计与状态管理

本文深入探讨了LVGL中按钮(lv_btn)与开关(lv_switch)的交互设计与状态管理实践。通过实例代码展示了如何创建和定制这两种控件,包括样式设置、事件处理和状态同步等核心功能。文章还分享了性能优化技巧和常见问题解决方案,帮助开发者在嵌入式设备上实现高效的UI交互。

weixin_29196613的博客 371

【2021最新版】Dubbo面试题总结(40道题含答案解析)

文章目录1、为什么要用Dubbo?2、Dubbo的整体架构设计有哪些分层?3、默认使用的是什么通信框架,还有别的选择吗?4、服务调用是阻塞的吗?5、一般使用什么注册中心?还有别的选择吗?6、默认使用什么序列化框架,你知道的还有哪些?7、服务提供者能实现失效踢出是什么原理?8、服务上线怎么不影响旧版本?9、如何解决服务调用链过长的问题?10、说说核心的配置有哪些?11、Dubbo推荐用什么协议?12、同一个服务多个注册的情况下可以直连某一个服务吗?13、画一画服务注册与发现的流程图?14、Dubbo集群容错有

程序媛小琬的博客 1万+

Win10安装Nek5000

1 安装wsl 2 2 安装Nek5000 3 安装依赖项 4 安装openmpi 5 配置Nek5000 6 编译Nek5000 7 运行Nek5000算例 8 安装paraview并查看结果

weixin_43176703的博客 3451

LVGL实战笔记:按钮(lv_btn)与开关(lv_switch)的交互设计与状态管理

本文详细介绍了LVGL中按钮(lv_btn)与开关(lv_switch)的交互设计与状态管理,包括基础创建、样式定制、事件处理和高级应用技巧。通过智能家居控制面板的实战案例,展示了如何实现按压效果、状态管理和互斥逻辑,帮助开发者快速掌握LVGL控件的核心功能。

weixin_30326741的博客 376

服务器安装Ubuntu 18.04.2 LTS超详细步骤(小白图文详解)

服务器安装Ubuntu 18.04.2 LTS超详细步骤(小白图文详解) 本文不包括启动盘制作步骤,相关内容可自行百度 华为服务器 1 插入u盘,关机重启 2 初始化界面后进入到系统的BIOS设置界面 (华为服务器按Del键,不同品牌方法不同) 3 进入的时候,华为的服务器默认设置了BIOS密码,因此需要输入之前预设的密码。 注意密码大小写问题,若密码输错三次,则需重启 4 密码输入以后,进入...

crystalbang的博客 2万+

LVGL样式进阶:别再只改颜色了!手把手教你自定义lv_btn和lv_switch的动画与过渡效果

本文深入探讨了LVGL中lv_btn和lv_switch的高级样式定制技巧,重点介绍了如何通过动画和过渡效果提升用户界面交互体验。从基础缩放动画到组合阴影效果,再到基于物理的弹性动画,详细讲解了实现方法,并提供了优化性能的实用建议,帮助开发者打造更现代、流畅的嵌入式GUI应用。

weixin_33736048的博客 437

瑞芯微RK3568与RK3566芯片选型指南:从接口差异到应用场景深度解析

在嵌入式系统与边缘计算领域,芯片选型是决定产品成败的关键一步。其核心在于理解芯片的架构、接口扩展能力与系统可靠性之间的平衡。以瑞芯微(Rockchip)的RK3568和RK3566为例,这两款同为四核A55架构的芯片,在基础算力上相近,但其面向的应用赛道却因接口配置而截然不同。RK3568凭借其双千兆网口、PCIe 3.0高速接口以及全链路ECC内存支持,在技术价值上更侧重于构建高可靠、高扩展性的系统,如边缘计算网关、工业控制器和网络视频录像机(NVR)。相比之下,RK3566则以其精简的接口配置,精准服务

weixin_33314040的博客 480

SAP PCC成本收集器实战:从配置到结算的完整流程解析

本文详细解析了SAP PCC成本收集器从配置到结算的完整流程,特别适用于重复制造行业。通过实战案例和配置要点,帮助用户掌握物料分类账管理、成本中心费用归集及差异分析等核心功能,提升企业生产成本控制效率。

weixin_29251567的博客 896

HoloCubic 之 LVGL 按钮组件实战:从 Simple Buttons 到过渡动画的 lv_btn 示例全解析

本文聚焦 HoloCubic 项目中 LVGL 模拟器(LvglSimulator,基于 Visual Studio 2019 与 SDL2)自带的按钮组件官方示例——`lv_ex_btn` 系列,完整拆解 `lv_ex_btn_1.c`(简单按钮:事件回调、可切换状态与尺寸自适应)与 `lv_ex_btn_2.c`(高级按钮:Gum/Halo/Ripple 三类过渡动画)的每一行代码,并结合 [

gitblog_00084的博客 217

英飞凌TC3xx之一起认识GTM(八)如何使用DTM实现死区时间配置

本文简要介绍英飞凌TC3xx系列芯片的DTM模块结构,以及有哪些相关寄存器可用于实现相关配置。

无所适从的我的博客 4650

LVGL部件应用笔记(基于正点原子教程,持续更新)

本文是基于正点原子教程的LVGL部件使用笔记,原视频链接如下因为本文是针对部件层,想对于每个部件留下一点记录,不涉及具体芯片的移植,关于移植,其实很看具体情况,首先配置显示,触摸可选,然后提供时基。然后看项目是否要上RTOS,是否有外部RAM,是否有自研的管理算法…本文使用Windows模拟器开发,使用版本为LVGL8.3,具体模拟器配置可看这篇文章同时这里也可以使用Trae和Qcode,直接问AI,问题解决更快。

2302_80176546的博客 710

Qt | linux+openCV+Qt6.5.3环境搭建成功版(带例子)

opencv安装 Qt 实战举例

Qt历险记,专注Qt技术,三年医疗设备研发经验,1年机器视觉研发经验,半年柔性传感研发经验。 1885

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

LVGL学习笔记

* 创建一个部件 */ lv_obj_set_style_bg_color(obj, lv_color_hex(0xf4b183),LV_STATE_DEFAULT);/* 设置圆角 */lv_obj_set_style_arc_color( spinner, lv_color_hex(0x83bd55), LV_PART_INDICATOR );

2401_83362126的博客 303

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

告别单调!用LVGL的lv_btn和lv_switch打造你的嵌入式UI交互(附状态管理实战代码)

本文详细介绍了如何利用LVGL的lv_btn和lv_switch部件打造嵌入式UI交互,包括状态管理、样式定制和事件处理等核心技巧。通过实战代码演示,帮助开发者掌握高级交互模式,提升嵌入式设备的用户体验。

weixin_27032989的博客 232

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

HoloCubic 的 LVGL 列表控件实战:基于 lv_ex_list_1 示例的创建、事件响应与模拟器运行全解析

本篇技术指南围绕 HoloCubic 开源仓库中 LvglSimulator 模拟器自带的 LVGL 列表控件示例(`lv_ex_list_1`)展开,完整讲解 LVGL(LittlevGL 7.6.1)列表控件 `lv_list` 的创建流程、按钮项添加、点击事件绑定与响应获取,并结合仓库中 [lv_list.c](https://link.gitcode.com/i/1080ca3171ecd

gitblog_00291的博客 361

LVGL部件

1.如何创建标签部件以及设置文本!

m0_73731708的博客 544

闭门造轮(LVGL_2)

这段代码主要是介绍了,各种添加文字的方法,甚至有通过点击文字来进入回调事件的方法。,比较简单就不介绍了。

qq_33001335的博客 1544
上一篇: lvgl 笔记 标签部件 (lv_label)
下一篇: 蓝桥杯嵌入式组 历年客观题解析
崔佳宇_
崔佳宇_ 优质创作者: 嵌入式与硬件开发技术领域 优质创作者: 嵌入式与硬件开发技术领域
博客等级 码龄10年 1万+粉丝 173原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值