LVGL 8.3 Tabview控件使用Keypad导航

一、Tabview

tabview实际上由如下基础部件组成

• 主容器

  • tab buttons 即lv_btnmatrix 就是矩阵键盘

  • tabs container 即子容器，一个子容器对应一个tab

    • tabs content 即tab内容，此处可以任意放置控件

再看lvgl官方文档对tabview控件中Keys 按键的描述

Keys have effect only on the tab buttons (Button matrix). Add manually to a group if required.

按键只对tabview空间中的矩阵键盘有效果，换句话说就是在LVGL内部 矩阵键盘对象才能懂你keypad发送过来的如下消息是什么意思

🚩还是得多看官方文档，之前都被网上说的教程整乱了说的是什么先聚焦到tabview对象上，然后触发ENTER进入才能导航，其实第一步就整错了，只有矩阵键盘才能对按键有用

enum {
    LV_KEY_UP        = 17,  /*0x11*/
    LV_KEY_DOWN      = 18,  /*0x12*/
    LV_KEY_RIGHT     = 19,  /*0x13*/
    LV_KEY_LEFT      = 20,  /*0x14*/
    LV_KEY_ESC       = 27,  /*0x1B*/
    LV_KEY_DEL       = 127, /*0x7F*/
    LV_KEY_BACKSPACE = 8,   /*0x08*/
    LV_KEY_ENTER     = 10,  /*0x0A, '\n'*/
    LV_KEY_NEXT      = 9,   /*0x09, '\t'*/
    LV_KEY_PREV      = 11,  /*0x0B, '*/
    LV_KEY_HOME      = 2,   /*0x02, STX*/
    LV_KEY_END       = 3,   /*0x03, ETX*/
};
typedef uint8_t lv_key_t;

接下来再看Keys 按键描述的后半句

Add manually to a group if required.

如果你需要按键操控tabview手动将tabview的button matrix对象加到组里。

二、组

组这个概念想必你应该已经在大量教程中看到了，简而言之就是将控制逻辑和UI中的控件绑定起来的一种说法。

控制逻辑有很多，可以使用Keypad，LVGL内部使用上方lv_key_t在按键和UI间传递消息，另外还有编码器等等。

那么说回正题怎么将tabview的button matrix对象加到组里呢？使用如下代码：

lv_group_add_obj(indev_group_keypad,lv_tabview_get_tab_btns(guider_ui.Setting_tab_set));

先使用lv_tabview_get_tab_btns函数获得button matrix对象，然后传递给group即可

剩下最后一个问题就是如何导航

三、编辑态，导航态

我是这么简单理解LVGL内这两个状态的，独立控件即相互没有关联的控件之间使用导航，比如两个不相关的按钮；编辑态即进入数值编辑状态，比如slider控件

需要注意的是如果使用keypad你需要（三选其一）：

1. 两个前后导航键，两个左右编辑键，一个确认键用于在导航态和编辑态间切换

2. 只保留三个按键，左右两个按键动态切换keypad read_cb 回调函数

   即一开始将read_cb 指向导航态按键输入；程序检测到你对一个可编辑对象按下了ENTER键，进入编辑模式，将read_cb 指向编辑态输入

3. 将实体按键转化为编码器输入(没有尝试过)，LVGL内部会自动在导航态和编辑态之间切换。

再次回到主题上来如何导航tabview，其实就是导航button matrix，这个button matrix需要在编辑态中才能切换，参考上方三选其一方法

四、总结

// 将矩阵键盘对象添加到组中
lv_group_add_obj(indev_group_keypad,lv_tabview_get_tab_btns(guider_ui.Setting_tab_set));

static void keypad_read(lv_indev_drv_t * indev_drv, lv_indev_data_t * data)
{
    static uint32_t last_key = 0;

    /*Get the current x and y coordinates*/
    //mouse_get_xy(&data->point.x, &data->point.y);

    /*Get whether the a key is pressed and save the pressed key*/
    uint32_t act_key = keypad_get_key();
    if(act_key != 0) {
        data->state = LV_INDEV_STATE_PR;

        /*Translate the keys to LVGL control characters according to your key definitions*/
        switch(act_key) {
            case 1:
                act_key = LV_KEY_RIGHT;
                break;
            case 2:
                act_key = LV_KEY_ENTER;
                break;
            case 3:
                act_key = LV_KEY_ESC;
                break;
        }

        last_key = act_key;
    }
    else {
        data->state = LV_INDEV_STATE_REL;
    }

    data->key = last_key;
}

使用编辑态 即LV_KEY_RIGHT，LV_KEY_LEFT按钮来左右切换标签