一. LVGL GUI按键矩阵控件的概念

Button Matrix 控件可以在行和列中显示多个按钮。
希望使用按钮矩阵而不是容器和单个按钮对象的主要原因是：

• 对于基于网格的按钮布局，按钮矩阵更易于使用。
• 每个按钮矩阵消耗的内存少得多。

二. LVGL GUI按键矩阵小部件和样式

Button 矩阵的主要部分称为 LV_BTNMATRIX_PART_BG 。它使用典型的背景样式属性绘制背景。
LV_BTNMATRIX_PART_BTN 是虚拟部分，它指的是按钮矩阵上的按钮。它还使用所有典型的背景属性。背景中的顶部/底部/左侧/右侧填充值用于在侧面保留一些空间。在按钮之间应用内部填充。

三. LVGL GU按键矩阵控件的使用

1. 按键的文本(Button's text)

按键矩阵上每个按键有文本，用这个函数设置lv_btnmatrix_set_map(btnm, my_map)，其中第二个参数就是字符串数组，可以定义为如下模样：

const char * map[] = {"btn1", "btn2", "\n", "btn3", ""}

需要注意三点：

• 结尾比如以空字符串结束""
• 在按键矩阵中换行，需要字符串"\n"
• 按键的编号跟数组一样，是从0开始，所以以上数组有3个按键，分别编号是0,1,2

搞一个程序来测试下：

void lvgl_button_matrix_text_test(void)
{
    static const char* btnm_text[] = { "TEST1", "TEST2", "TEST3", "\n",
                                   "TEST4", "TEST5","TEST6","" };
    lv_obj_t* btnm1 = lv_btnmatrix_create(lv_scr_act(), NULL);
    lv_btnmatrix_set_map(btnm1, btnm_text);
    lv_obj_align(btnm1, NULL, LV_ALIGN_CENTER, 0, 0);
}

看下效果

2. 控制按键(Control buttons)

按钮宽度可以相对于与同一行被设置为其他按钮 中的线例如具有两个按钮：btnA，宽度= 1 和，btnB 宽度= 2，btnA 将有 33％的宽度和 btnB 将有 66％的宽度。用这个函数设置：lv_btnmatrix_set_btn_width(btnm, btn_id, width)

另外，还可以通过函数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_CHECK_STATE-设置切换状态
• LV_BTNMATRIX_CTRL_CLICK_TRIG-如果为 0，按钮将在按下时起作用，如果为1，则在释放时起作用

我们直接上一段代码：

/********************************************************************************************/
void lvgl_button_matrix_control_test(void)
{
    static const char* btnm_text[] = { "ID0", "ID1", "ID2", "\n",
                                   "ID3", "ID4","ID5","" };
    lv_obj_t* btnm1 = lv_btnmatrix_create(lv_scr_act(), NULL);
    lv_btnmatrix_set_map(btnm1, btnm_text);
    lv_btnmatrix_set_btn_width(btnm1, 0, 2);
    lv_btnmatrix_set_btn_ctrl(btnm1,3, LV_BTNMATRIX_CTRL_HIDDEN);
    lv_btnmatrix_set_btn_ctrl(btnm1, 4, LV_BTNMATRIX_CTRL_DISABLED);
    lv_btnmatrix_set_btn_ctrl(btnm1, 5, LV_BTNMATRIX_CTRL_CHECKABLE);
    lv_obj_align(btnm1, NULL, LV_ALIGN_CENTER, 0, 0);
}

效果如下：其中看代码就能看出来宽度ID0是占比50%，ID3隐藏，ID4禁用，ID5是可以按下不弹起(Toggle)

3. 单次点击(One check)

只允许同一时间只有一个按键处于按下不弹起状态（Toggle）,用这个函数来设置lv_btnmatrix_set_one_check(btnm, true)

我们来写代码看下效果，代码如下：

void lvgl_button_matrix_one_check_test(void)
{
    static const char* btnm_text[] = { "ID0", "ID1", "ID2", "\n",
                                    "ID3", "ID4","ID5","" };
    lv_obj_t* btnm1 = lv_btnmatrix_create(lv_scr_act(), NULL);
    lv_btnmatrix_set_map(btnm1, btnm_text);
    lv_obj_align(btnm1, NULL, LV_ALIGN_CENTER, 0, 0);

    lv_btnmatrix_set_btn_ctrl(btnm1, 0, LV_BTNMATRIX_CTRL_CHECKABLE);
    lv_btnmatrix_set_btn_ctrl(btnm1, 1, LV_BTNMATRIX_CTRL_CHECKABLE);
    lv_btnmatrix_set_btn_ctrl(btnm1, 2, LV_BTNMATRIX_CTRL_CHECKABLE);
    lv_btnmatrix_set_btn_ctrl(btnm1, 3, LV_BTNMATRIX_CTRL_CHECKABLE);
    lv_btnmatrix_set_btn_ctrl(btnm1, 4, LV_BTNMATRIX_CTRL_CHECKABLE);
    lv_btnmatrix_set_btn_ctrl(btnm1, 5, LV_BTNMATRIX_CTRL_CHECKABLE);
    lv_btnmatrix_set_one_check(btnm1, true);  
}

效果如下：

4. 重新着色(Recolor)

在文本上的按钮可以重新着色类似的重新着色功能标签的对象。要启用它，用这个函数lv_btnmatrix_set_recolor(btnm, true)

5. 对齐Button文本(Aligning the button's text)

要使按钮上的文本对齐，用这个函数lv_btnmatrix_set_align(roller, LV_LABEL_ALIGN_LEFT/CENTER/RIGHT)

6. 事件(Events)

除了通用事件外，按钮矩阵还发送以下特殊事件：
 LV_EVENT_VALUE_CHANGED-在按下/释放按钮时或在长按之后重复时发送。事件数据设置为按下/释放按钮的 ID。

我们来写一个测试程序来看下效果：

static void buttonm_event_handler(lv_obj_t* obj, lv_event_t event)
{
    if (event == LV_EVENT_VALUE_CHANGED) {
        uint16_t id = lv_btnmatrix_get_active_btn(obj);
        const char* txt = lv_btnmatrix_get_active_btn_text(obj);

        printf("ID:%d press,text:%s\n", id,txt);
    }
}
void lvgl_button_matrix_event_test(void)
{
    static const char* btnm_text[] = { "ID0", "ID1", "ID2", "\n",
                                    "ID3", "ID4","ID5","" };
    lv_obj_t* btnm1 = lv_btnmatrix_create(lv_scr_act(), NULL);
    lv_btnmatrix_set_map(btnm1, btnm_text);
    lv_obj_align(btnm1, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_obj_set_event_cb(btnm1, buttonm_event_handler);
}

效果如下：

好了，完结了，更多精彩继续戳↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓