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

这篇具有很好参考价值的文章主要介绍了lvgl 笔记 按钮部件 (lv_btn) 和 开关部件 (lv_switch)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

按钮基础使用方法:

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

lv_obj_t* btn = lv_btn_create(lv_scr_act());

lv_btn_create,硬件,# lvgl,stm32,单片机,嵌入式硬件

添加大小和位置: 

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_btn_create,硬件,# lvgl,stm32,单片机,嵌入式硬件

添加触发样式: 

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

其中和 lv_obj 一样,共有以下可供选择的参数:lv_btn_create,硬件,# lvgl,stm32,单片机,嵌入式硬件

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_btn_create,硬件,# lvgl,stm32,单片机,嵌入式硬件

添加事件:

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_btn_create,硬件,# lvgl,stm32,单片机,嵌入式硬件

开关基础使用方法:

lv_obj_t* switch1 = lv_switch_create(lv_scr_act());

lv_btn_create,硬件,# lvgl,stm32,单片机,嵌入式硬件

为开关部件配置颜色:

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

lv_btn_create,硬件,# lvgl,stm32,单片机,嵌入式硬件

    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_btn_create,硬件,# lvgl,stm32,单片机,嵌入式硬件

 值得注意的是,在设置 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_btn_create,硬件,# lvgl,stm32,单片机,嵌入式硬件

 如果要让按钮不被选中,我们可以再移除这个状态: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); //对象的值改变即触发回调
}

效果如下: 

lv_btn_create,硬件,# lvgl,stm32,单片机,嵌入式硬件

互斥锁案例:

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() 做出与之相反的动作。

lv_btn_create,硬件,# lvgl,stm32,单片机,嵌入式硬件

 文章来源地址https://www.toymoban.com/news/detail-811488.html

到了这里,关于lvgl 笔记 按钮部件 (lv_btn) 和 开关部件 (lv_switch)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp-vue3-微信小程序-按钮组wo-btn-group

    采用uniapp-vue3实现, 是一款支持高度自定义的按钮组组件,支持H5、微信小程序(其他小程序未测试过,可自行尝试) 可到插件市场下载尝试: https://ext.dcloud.net.cn/plugin?id=15012 使用示例

    2024年02月07日
    浏览(32)
  • lvgl lv_indev_t (一)之 _lv_indev_drv_t 解读

    输入设备驱动句柄,由lv_indev_add()接口注册 lv_indev_type_t type 输入设备类型 *read_cb 获取输入设备数据回调接口 这个回调在输入设备定时任务中周期调用,用来获取输入设备的状态和数据 *feedback_cb 反馈回调接口 这个回调在输入设备有动作时触发事件发送时调用,反馈事件信息

    2024年02月08日
    浏览(35)
  • LVGL源码分析(1):lv_ll链表的实现

    在LVGL中难免需要用到链表:group中的对象需要用链表来存储,这样可以切换对象的焦点;再比如LVGL内部的定时器,多个定时器也是用链表进行存储的。这篇文章就来分析一下LVGL中链表的源码。 对于链表来说,肯定有一个头指针和一个尾指针,在LVGL中,链表的数据结构如下:

    2024年02月13日
    浏览(36)
  • LVGL core group焦点分组管理(lv_group.c)

    更多源码分析请访问: LVGL 源码分析大全

    2024年02月09日
    浏览(35)
  • LVGL misc area 方块区域通用函数(lv_area.c)

    更多源码分析请访问: LVGL 源码分析大全

    2024年02月07日
    浏览(30)
  • RustGUI学习(iced)之小部件(一):如何使用按钮和文本标签部件

    前言 本专栏是学习Rust的GUI库iced的合集,将介绍iced涉及的各个小部件分别介绍,最后会汇总为一个总的程序。 iced是RustGUI中比较强大的一个,目前处于发展中(即版本可能会改变),本专栏基于版本0.12.1. 概述 这是本专栏的第一篇,主要讲述按钮(button)和文本标签(text)

    2024年04月25日
    浏览(25)
  • [esp32 + LVGL]物理按键控制屏幕上开关和LED闪烁

    IO0 对应按键 控制 IO2LED闪烁,同时当LED亮的时候开关闭合,当LED灭的时候LED闪烁。 为什么这么做,因为手里没有触摸屏。 首先我们要明白开关闭合的原理,对于触摸屏来说,当你触摸开关的时候会触发点击事件,同时给开关控件添加点击事件。 添加点击事件,也就是开关闭

    2024年02月13日
    浏览(30)
  • Android 之开关按钮 ToggleButton 和开关 Switch

    本节给大家介绍的Android基本UI控件是:开关按钮ToggleButton和开关Switch,可能大家对着两个组件 并不熟悉,突然想起笔者的第一间外包公司,是否在wifi下联网的开关,竟然用的TextView,然后叫美工 且两个切换前后的图,然后代码中进行设置,当然点击TextView的时候判断状态,然

    2024年02月07日
    浏览(34)
  • LVGL实现按钮菜单无限滚动的效果

    lvgl版本:8.1.1 视频演示:哔哩哔哩 项目地址:Simple Monitor

    2024年02月11日
    浏览(29)
  • 纯 CSS 开关切换按钮

     

    2024年02月11日
    浏览(27)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包