LVGL 控件之矩阵按钮（lv_buttonmatrix）

于 2024-09-01 09:37:14 发布
阅读量709 收藏 4
点赞数 26
分类专栏： LVGl 文章标签： 嵌入式 LVGL
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Teminator_/article/details/141773310
版权

目录

一、矩阵按键

1、组成

按钮矩阵部件由两个部分组成：主体背景和按钮，示意图如下：

  • LV_PART_MAIN：对应按钮矩阵的背景
  • LV_PART_ITEMS：对应按钮矩阵的按钮
lv_obj_set_style_bg_color(btnM, lv_color_make(152, 244, 123), LV_PART_MAIN);


lv_obj_set_style_bg_color(btnM, lv_color_make(152, 244, 123), LV_PART_ITEMS);

2、创建矩阵

按钮矩阵部件中的每个按钮都可以设置文本，如果用户想设置这些按钮文本，则需要定义一个字符串数组（指针），并在该数组中传入所需的文本内容，最后通过 lv_btnmatrix_set_map 函数设置按钮文本，示例代码如下：

注意：该数组最后一个元素必须为空

lv_obj_t *btnM = lv_btnmatrix_create(lv_scr_act());
static const char* btnMap[] = {
    ",", "ABC", "DEF", "\n",
    "GHI", "JKL", "MNO", "\n",
    "PQRS", "TUV", "WXYX", ""
};
lv_btnmatrix_set_map(btnM, btnMap);
lv_obj_align(btnM, LV_ALIGN_CENTER, 0, 0);

此外，每个按钮还有个索引，索引对于按钮的属性设置非常重要。实际上索引的顺序就是我们添加按键的顺序：

3、按钮宽度

在默认情况下，按钮矩阵每一行按钮的宽度都是自动计算的，如果用户想改变按钮的宽度，可以调用 lv_btnmatrix_set_btn_width 函数来进行设置。值得注意的是，在按钮矩阵部件中，按钮只能设置相对宽度。

现在在上例的基础上添加：

lv_btnmatrix_set_btn_width(btnM, 1, 10);

4、按键属性

用户可以调用 lv_btnmatrix_set_btn_ctrl 函数，为按钮添加、清除指定的属性，这些属性的相关枚举如下：

  • LV_BTNMATRIX_CTRL_HIDDEN：将按钮隐藏；
  • LV_BTNMATRIX_CTRL_NO_REPEAT：禁用长按；
  • LV_BTNMATRIX_CTRL_DISABLED：禁用按钮；
  • LV_BTNMATRIX_CTRL_CHECKABLE：启用按钮状态切换；
  • LV_BTNMATRIX_CTRL_CHECKED：选中按钮；
  • LV_BTNMATRIX_CTRL_POPOVER：按下此按钮时在弹出窗口中显示按钮标签；
  • LV_BTNMATRIX_CTRL_RECOLOR：启用按钮文本的重新着色功能。

例：

lv_btnmatrix_set_btn_ctrl(btnM, 0, LV_BTNMATRIX_CTRL_HIDDEN);
lv_btnmatrix_set_btn_ctrl(btnM, 1, LV_BTNMATRIX_CTRL_DISABLED);
lv_btnmatrix_set_btn_ctrl(btnM, 2, LV_BTNMATRIX_CTRL_CHECKABLE);


如果用户想要清除按钮的指定属性，可以调用 lv_btnmatrix_clear_btn_ctrl 函数。

5、按钮互斥

按钮互斥是指：在某一时刻，只允许有一个按钮处于按下不弹起状态（被选中），当我们选中一个按钮之后，其他的按钮将会自动清除选中属性，示意图如下：

lv_btnmatrix_set_btn_ctrl(btnM, 0, LV_BTNMATRIX_CTRL_CHECKABLE);
lv_btnmatrix_set_btn_ctrl(btnM, 1, LV_BTNMATRIX_CTRL_CHECKABLE);
lv_btnmatrix_set_btn_ctrl(btnM, 2, LV_BTNMATRIX_CTRL_CHECKABLE);

lv_btnmatrix_set_one_checked(btnm1, true);

点击第一个键后，其处于被选中状态；


现在再点击第三个键，其处于被选中状态，不过第一个键的状态被清除了：

在这里插入图片描述

6、按钮文本重着色

在默认情况下，按钮矩阵中的按钮文本都是黑色的，如果用户需要设置文本为其他的颜色，则必须先调用 lv_btnmatrix_set_btn_ctrl 函数，为按钮添加文本重着色的属性。

设置如下：

void my_gui(void)
{
    lv_obj_t *btnM = lv_btnmatrix_create(lv_scr_act());
    static const char* btnMap[] = {
        ",", "#FF0000 ABC#", "DEF", "\n",
        "GHI", "JKL", "MNO", "\n",
        "PQRS", "TUV", "WXYX", ""
    };
    lv_btnmatrix_set_map(btnM, btnMap);
    lv_obj_align(btnM, LV_ALIGN_CENTER, 0, 0);

    lv_btnmatrix_set_btn_ctrl(btnM, 1, LV_BTNMATRIX_CTRL_RECOLOR);
}


注意看，颜色设置格式为：# + 16 进制颜色 + 按钮文本 + #，在设置完文本颜色之后，我们还需要为按钮添加文本重着色的属性，其相关的枚举为 LV_BTNMATRIX_CTRL_RECOLOR。

7、按钮矩阵部件的事件

  1. LV_EVENT_VALUE_CHANGED：当一个按钮被按下、释放或长按时发送。
  2. LV_EVENT_DRAW_PART_BEGIN：开始绘制按钮。

8、API 函数

函数含义
lv_btnmatrix_create()创建按钮矩阵部件
lv_btnmatrix_set_map()设置按钮
lv_btnmatrix_set_ctrl_map()设置多个按钮属性
lv_btnmatrix_set_selected_btn()设置选中的按钮
lv_btnmatrix_set_btn_ctrl()设置一个按钮的属性
lv_btnmatrix_clear_btn_ctrl()清除某个按钮的属性
lv_btnmatrix_set_btn_ctrl_all()设置所有按钮的属性
lv_btnmatrix_clear_btn_ctrl_all()清除所有按钮的属性
lv_btnmatrix_set_btn_width()设置单个按钮的相对宽度
lv_btnmatrix_set_one_checked()设置按钮互斥
lv_btnmatrix_get_map()获取按钮相关映射
lv_btnmatrix_get_selected_btn()获取用户最后点击的按钮的索引
lv_btnmatrix_get_btn_text()获取按钮的文本
lv_btnmatrix_has_btn_ctrl()获取按钮的状态
lv_btnmatrix_get_one_checked()判断按钮互斥是否开启

二、例程

// 按键矩阵的事件回调函数
static void btnmatrix_event_callback(lv_event_t * event)
{
    if (event == NULL)
    {
        printf("[%s:%d] event is NULL\n", __FUNCTION__, __LINE__);
        return ;
    }

    lv_event_code_t code = lv_event_get_code(event); // 获取当前event的code
    lv_obj_t * obj = lv_event_get_target(event);     // 获取当前事件的触发对象

    if (code == LV_EVENT_DRAW_PART_BEGIN) // 开始绘制一个区域的事件，这个事件的参数是lv_obj_draw_part_dsc_t *
    {
        lv_obj_draw_part_dsc_t * dsc = (lv_obj_draw_part_dsc_t *)lv_event_get_param(event);
        if (dsc != NULL)
        {
            switch (dsc->id)
            {
                case 0:
                case 1:
                case 2:
                case 3:
                case 4:
                case 5:
                case 6:
                case 7:
                case 8:
                case 9:
                case 10:
                case 11:
                    {
                        if (lv_btnmatrix_get_selected_btn(obj) == dsc->id)
                        {
                            if (dsc->rect_dsc != NULL)
                            {
                                // 设置目标绘制区域的背景颜色
                                dsc->rect_dsc->bg_color = lv_color_hex(0xFF6008); // 橙色
                            }
                        }
                        else
                        {
                            if (dsc->rect_dsc != NULL)
                            {
                                dsc->rect_dsc->bg_color = lv_color_hex(0xF98E2D);
                            }
                        }

                        if (dsc->rect_dsc != NULL)
                        {
                            dsc->rect_dsc->radius = 5; // 设置目标绘制区域的圆角
                            dsc->rect_dsc->border_width = 0; // 设置目标绘制区域的边框宽度
                            dsc->rect_dsc->shadow_ofs_x = 0; // 在X方向的像素上设置阴影的偏移量
                            dsc->rect_dsc->shadow_ofs_y = 0; // 在Y方向的像素上设置阴影的偏移量
                         }

                         if (dsc->label_dsc != NULL)
                         {
                            dsc->label_dsc->color = lv_color_hex(0xFFFFFF);
                         }
                    }
                    break;

                default:
                    break;
            }
        }
    }
    else if(code == LV_EVENT_VALUE_CHANGED) // 当一个按钮被按下、释放或长按时
    {
        lv_obj_t * text_area = (lv_obj_t *)lv_event_get_user_data(event); // 获取事件的user_data
        uint16_t btn_id = lv_btnmatrix_get_selected_btn(obj);             // 获取当前选中的按键的id
        const char * txt = lv_btnmatrix_get_btn_text(obj, btn_id);        // 获取当前按键的文本

        if (txt != NULL)
        {
            if (strcmp(txt, LV_SYMBOL_BACKSPACE) == 0)
            {
                if (text_area != NULL)
                {
                    lv_textarea_del_char(text_area); // 删除文本框的字符
                }
            }
            else
            {
                if (text_area != NULL)
                {
                    lv_textarea_add_text(text_area, txt); // 文本框追加字符
                }
            }
        }
    }
}


void my_gui()
{
    static const char * btnm_map[] = {"1", "2", "3", "\n",
                                       "4", "5", "6", "\n",
                                       "7", "8", "9", "\n",
                                       ".", "0", LV_SYMBOL_BACKSPACE, ""};

    lv_obj_t * obj_text_area = lv_textarea_create(lv_scr_act()); // 创建文本框控件
    if (obj_text_area == NULL)
    {
        printf("[%s:%d] obj_text_area is NULL\n", __FUNCTION__, __LINE__);
        return ;
    }

    lv_textarea_set_one_line(obj_text_area, true);        // 将文本区域配置为一行
    lv_textarea_set_password_mode(obj_text_area, true);   // 将文本区域配置为密码模式
    lv_textarea_set_max_length(obj_text_area, 15);        // 设置文本区域可输入的字符长度最大值
    lv_obj_add_state(obj_text_area, LV_STATE_FOCUSED);    // 显示光标
    lv_obj_set_style_radius(obj_text_area, 5, 0);         // 设置样式的圆角弧度
    lv_obj_set_style_border_width(obj_text_area, 1, 0);   //设置边框宽度
    lv_obj_set_size(obj_text_area, 255, 40);              // 设置对象大小
    lv_obj_align(obj_text_area, LV_ALIGN_TOP_MID, 0, 50);

    lv_obj_t * obj_btnm = lv_btnmatrix_create(lv_scr_act()); // 创建一个按钮矩阵对象
    if (obj_btnm == NULL)
    {
        printf("[%s:%d] obj_btnm is NULL\n", __FUNCTION__, __LINE__);
        return ;
    }

    lv_btnmatrix_set_one_checked(obj_btnm, true);  // 启用“一次检查”功能，允许一次只检查一个按钮。
    lv_obj_set_size(obj_btnm, 260, 245);           // 设置控件大小
    lv_obj_align(obj_btnm, LV_ALIGN_CENTER, 0, 0);
    lv_obj_clear_flag(obj_btnm, LV_OBJ_FLAG_CLICK_FOCUSABLE); // 按钮按下的是时候焦点才聚集到该控件，确保按钮按下后焦点聚集到文本框
    lv_btnmatrix_set_map(obj_btnm, btnm_map);                 // 给按钮矩阵添加键盘映射

    int i = 0;
    for (i = 0; i < 12; i++)
    {
        lv_btnmatrix_set_btn_ctrl(obj_btnm, i, LV_BTNMATRIX_CTRL_NO_REPEAT); // 长按按钮时禁用重复
    }

    lv_obj_set_style_radius(obj_btnm, 0, 0);                                                       // 设置样式的圆角弧度
    lv_obj_set_style_border_width(obj_btnm, 0, 0);                                                 //设置边框宽度
    lv_obj_set_style_bg_color(obj_btnm, lv_color_hex(0xFFFFFF), 0);                                // 设置背景颜色
    lv_obj_set_style_bg_opa(obj_btnm, LV_OPA_0, 0);                                                // 设置样式背景的不透明度
    lv_obj_set_style_text_font(obj_btnm, &lv_font_montserrat_20, 0);                               //设置字体
    lv_obj_add_event_cb(obj_btnm, btnmatrix_event_callback, LV_EVENT_ALL, (void *)obj_text_area);  // 按钮矩阵添加事件回调函数
}
Projectsauron
关注
  • 26
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
LVGL---对象(lv_obj_t)
weixin_42162924的博客
11-22 860
LVGL---对象(lv_obj_t)
LVGL---按钮(lv_btn)
weixin_42162924的博客
11-26 695
LVGL---按钮(lv_btn)
LVGL--按钮矩阵部件(lv_btnmatrix)
m0_63472758的博客
02-26 860
【代码】LVGL--按钮矩阵部件(lv_btnmatrix)
ESP32 开发笔记(四）LVGL控件学习 ButtonMatrix 按钮矩阵控件
cnicfhnui的博客
12-03 5305
先看效果，使用按钮矩阵控件创建一个计算器界面 此文章为盖楼文章，为组织目录链接用，未写教程，教程更新后会删除此行 开发板购买链接https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111deb2Ij1As&ft=t&id=626366733674 一、开发板简介 二、开发环境搭建 windows ESP32例程为C语言开发，并非Python/Arduino/AT指令开发，基于ESP-IDF_V4.2框架库，采用.
ESP32 开发笔记(四）LVGL控件学习 Button 按钮控件
cnicfhnui的博客
12-03 8246
先看效果，最高33帧，第一个按钮为果冻效果，第二个扩展，第三个扩散，第四个正常，第五个翻转效果 123使用了效果风格，类似css，45是纯按钮成员函数实现 此文章为盖楼文章，为组织目录链接用，未写教程，教程更新后会删除此行 开发板购买链接https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111deb2Ij1As&ft=t&id=626366733674 一、开发板简介 二、开发环境搭建 windows ..
LVGL lv_btnmatrix矩阵按键（18）
jiang_2018的博客
03-17 3007
lv_btnmatrix lv_btnmatrix不是真正的lv_btn按钮对象，但是有和lv_btn一样的点击效果，绘出相同按钮下比lv_btn占用内存小。
LVGL基本控件介绍
damon:月影星魔
08-18 2399
lvgl基本控件的使用和效果图
lvgl_v8_sim_codeblocks_win-master.zip
08-25
1. **丰富的UI组件**：LVGL提供了大量的预定义控件，如按钮、滑块、进度条、文本框、图像、图表等，这些控件可以方便地组合创建出复杂的GUI界面。 2. **响应式设计**：LVGL支持触摸屏输入，并能够自动适应不同分辨率...
LVGL---开关(lv_switch)
weixin_42162924的博客
11-26 1285
LVGL---开关(lv_switch)
浅析STM32外部中断易死机解决
brotherwyz的专栏
08-28 166
本案例stm32死机或程序跑飞是实际产品中出现的，初步怀疑是外部中断口，有极强的干扰所致，于是拿着信号发生器实测，当信号发生器产生300KHz的信号，甚至到12MHz的信号时，期间，程序跑飞或死机。2、IO中断时，在ISR里先关闭相应的管脚的中断，处理完成后，再开启相应管脚的中 断。解决点：1、初始化时，先关闭总中断，初始化完成后，再开启总中断。笔记记之，以防将来的项目类似故障查询。
Linux内核编程（十四）IIC总线驱动FT5X06触摸屏
qq_1033275663的博客
08-30 177
答：首先我们确定使用哪个I2C控制器，每个控制器都在设备树通用文件中对应一个节点（内核以有）。假设我们使用i2c控制器1。这部分相当于平台总线的设备层代码，即用于描述硬件。当然可以使用设备树来替代。那么我们在使用设备树描述时该怎么写呢？对于IIC的基础知识，这里不做过多的介绍，详细情况查看下面的两篇文章。这里是一个简单示例，为了演示如何匹配。i2c_client设备树节点。
基于STM32校车安全监控系统的设计（论文+源码+实物）
最新发布
08-31 434
本课题基于stm32的校车安全防控系统的总体架构设计如图2.1所示。
Task-Embedded Control Networks for Few-Shot Imitation Learning
s_m_c的博客
08-28 587
TecNets 对可以学习的任务数量没有严格的限制，并且在训练期间不容易忘记先前学习的任务（因为每个任务的s都是保存好的），或者之后。：就像人类一样，机器人应该能够利用来自先前学习任务的知识，以便在新的和不熟悉的环境中快速学习新任务。然后将来自任务嵌入网络的sentence平铺并逐通道连接到控制网络的输入（如图 2 所示），从而产生（宽度、高度、3+N）的输入图像，其中 N 表示sentence向量的长度。：演示的图像被嵌入到任务的紧凑表示中，可以组合起来创建一个句子sentence。
RTX5源码全家桶集成emWin6.40, Modbus主从，含FreeRTOS版, 探讨一种移植第3方组件通用方法以及使用注意事项2024-08-30
Simon223的博客
08-31 205
RTX5源码全家桶集成emWin6.40, Modbus主从，含FreeRTOS版, 探讨一种移植第3方组件的通用方法以及多任务使用注意事项。2、RTX5/FreeRTOS全家桶首期视频，框架设计。3、CMSSIS-RTOS V2封装层教程。6、emWin和全家桶中间件的兼容问题。
【AWTK最新动态】AWTK 1.8版本发布
ZLG_zhiyuan的博客
08-30 581
AWTK是一套基于C语言开发的跨平台GUI框架，目前正式推出1.8版本。本次更新不仅对许多细节进行了优化，还增添了众多重要特性和文档资料。此外，还引入了三款创新控件和两个与AWTK相关项目。
嵌入式学习day35
weixin_70572180的博客
08-28 581
IO多路复用（IO多路转接）1.多个IO复用一个进程selectpollepoll1.创建文件描述符集合2.添加文件描述符到集合中3.通知内核开始检测4.根据返回的结果做对应的操作（对IO读、写操作）特点：1.多个IO复用一个进程，不创建新的进程和线程，效率高2.不适合处理比较耗时的任务应用场景：1.构建并发服务器，使用IO多路复用监测多个客户端套接字2.使用IO多路复用监测多个IO所对应的通信（如：网络、串口、can...）3.在阻塞IO中，进行超时监测。
面试题（12）
qq_60098634的博客
08-28 621
第四个意思a是一个指向整型数的常指针（也就是说，指针指向的整型数是可以修改的，但指针是不可修改的）。最后一个意味着a是一个指向常整型数的常指针（也就是说，指针指向的整型数是不可修改的，同时指针也是不可修改的）。Bit fields是被扔到C语言死角的东西，它保证你的代码在不同编译器之间是不可移植的，同时也保证了的你的代码是不可重用的。这是很重要的，因为直到嵌入(inline)操作符变为标准C的一部分，宏是方便产生嵌入代码的唯一方法，对于嵌入式系统来说，为了能达到要求的性能，嵌入代码经常是必须的方法。
stm32-SD卡实验
长路漫漫亦灿灿
08-24 1427
SD卡，，称为安全数字卡（安全数码卡）。SD卡系列主要有三种：SD卡MiniSD卡和MicroSD卡（原名 TF卡）。特点：容量大、高安全性、体积小、传输速度快接口简单2. SD分类存储等级SD卡速度等级分为：UHS和分为V6V10V30V60V90对应不同视频格式​​​​​​3. SD卡的驱动方式微处理器对SD卡进行操作，可通过SPI接口SDIO接口。不同接口，SD卡引脚功能不一样。SDIO接口通信线：：时钟线，由。
lvgl v7提供一个lv_textarea控件的示例代码，带按键响应处理，关闭控件
06-09
下面是一个基于LVGL V7的`lv_textarea`控件的示例代码，它包括按键响应处理和关闭控件功能。你可以将这段代码添加到你的项目中，然后根据需要进行修改。 ```c #include "lvgl/lvgl.h" /* 定义一个lv_textarea控件 */ static lv_obj_t * textarea; /* 按键事件回调函数 */ static lv_res_t btn_click_action(lv_obj_t * btn) { /* 获取按钮的标签 */ const char * btn_label = lv_btn_get_state_text(btn, LV_BTN_STATE_RELEASED); /* 检查按钮标签 */ if(strcmp(btn_label, "关闭") == 0) { /* 隐藏lv_textarea控件 */ lv_obj_set_hidden(textarea, true); } else if(strcmp(btn_label, "保存") == 0) { /* 获取lv_textarea控件的文本 */ const char * text = lv_textarea_get_text(textarea); /* 打印文本 */ printf("textarea text: %s\r\n", text); } return LV_RES_OK; } void lv_textarea_example(void) { /* 创建一个容器 */ lv_obj_t * container = lv_cont_create(lv_scr_act(), NULL); lv_cont_set_fit(container, LV_FIT_TIGHT); /* 创建一个lv_textarea控件 */ textarea = lv_textarea_create(container, NULL); lv_obj_set_size(textarea, 200, 100); lv_textarea_set_text(textarea, "Hello, LVGL!"); lv_textarea_set_cursor_hidden(textarea, true); /* 创建一个关闭按钮 */ lv_obj_t * close_btn = lv_btn_create(container, NULL); lv_btn_set_state_text(close_btn, LV_BTN_STATE_RELEASED, "关闭"); lv_obj_set_event_cb(close_btn, btn_click_action); /* 创建一个保存按钮 */ lv_obj_t * save_btn = lv_btn_create(container, NULL); lv_btn_set_state_text(save_btn, LV_BTN_STATE_RELEASED, "保存"); lv_obj_set_event_cb(save_btn, btn_click_action); /* 设置容器布局 */ lv_cont_set_layout(container, LV_LAYOUT_COLUMN_MID); /* 设置关闭按钮和保存按钮的位置 */ lv_cont_set_fit2(close_btn, LV_FIT_NONE, LV_FIT_TIGHT); lv_cont_set_fit2(save_btn, LV_FIT_NONE, LV_FIT_TIGHT); /* 设置关闭按钮和保存按钮之间的间隔 */ lv_obj_set_style_pad_right(close_btn, 10, 0); } ``` 在这个示例代码中，我们创建了一个容器，并在其中创建了一个`lv_textarea`控件和两个按钮。在关闭按钮被点击时，我们将隐藏`lv_textarea`控件；在保存按钮被点击时，我们将获取`lv_textarea`控件的文本，并将其打印出来。 需要注意的是，这个示例代码中的按钮事件回调函数`btn_click_action`仅用于演示。在实际应用中，你需要根据需要修改按钮事件回调函数的实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值