LVGL 8.3 Tabview控件使用Keypad导航

本文详细解释了LVGLTabView的构成,包括tabbuttons、tabscontent,以及如何通过矩阵键盘进行导航。重点讲解了按键操作的原理,如何添加按键到组,以及在编辑态和导航态下的切换方法。
摘要由CSDN通过智能技术生成

一、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即可

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

三、编辑态,导航态

导航态编辑态
LV_KEY_ENTERLV_KEY_ENTER
LV_KEY_NEXTLV_KEY_RIGHT
LV_KEY_PREVLV_KEY_LEFT

我是这么简单理解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按钮来左右切换标签

文章原始发布于https://blog.awolon.fun/archives/lvgl-keypad-navigate-in-tabview.html

  • 28
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
LVGL是一款开源的图形库,可以用于嵌入式设备的图形用户界面设计。要设置LVGL的TabView页面,可以按照以下步骤进行: 1. 创建一个LVGL的TabView对象: ``` lv_obj_t* tabview = lv_tabview_create(lv_scr_act(), NULL); ``` 2. 创建Tab页面: ``` lv_obj_t* tab1 = lv_tabview_add_tab(tabview, "Tab 1"); lv_obj_t* tab2 = lv_tabview_add_tab(tabview, "Tab 2"); ``` 3. 在Tab页面中添加控件: ``` // 在Tab 1中添加一个文本标签 lv_obj_t* label1 = lv_label_create(tab1, NULL); lv_label_set_text(label1, "This is Tab 1"); // 在Tab 2中添加一个按钮 lv_obj_t* btn = lv_btn_create(tab2, NULL); lv_btn_set_fit2(btn, LV_FIT_PARENT, LV_FIT_PARENT); lv_obj_t* label2 = lv_label_create(btn, NULL); lv_label_set_text(label2, "Tab 2 Button"); ``` 4. 设置Tab页面之间的切换效果(可选): ``` lv_tabview_set_anim_time(tabview, 300); // 设置切换动画的时间 // 设置切换方向为向左切换 lv_tabview_set_anim_dir(tabview, LV_TABVIEW_ANIM_DIR_LEFT); ``` 5. 可以通过事件回调函数来处理Tab切换的逻辑(可选): ``` lv_obj_set_event_cb(tabview, tabview_event_cb); // 事件回调函数 static void tabview_event_cb(lv_obj_t* obj, lv_event_t event) { if(event == LV_EVENT_VALUE_CHANGED) { uint32_t active_tab_id = lv_tabview_get_tab_act(obj); // 获取当前激活的Tab的ID // 根据Tab的ID执行相应的操作 if(active_tab_id == 0) { // 执行Tab 1的操作 } else if(active_tab_id == 1) { // 执行Tab 2的操作 } } } ``` 通过以上步骤,就可以在LVGL中设置TabView页面了。可以自由添加不同的Tab页面,并在每个Tab页面中添加所需的控件和逻辑,实现丰富的用户界面和交互体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值