lvgl｜让tabview的页面循环切换（无限切换）

挨踢民工biubiu

已于 2022-06-13 09:43:57 修改

阅读量8.3k

点赞数 9

分类专栏： LVGL 经验分享文章标签： LVGL 嵌入式经验分享

于 2022-04-10 10:14:02 首次发布

本文链接：https://blog.csdn.net/qq_35181236/article/details/124044959

版权

LVGL 同时被 2 个专栏收录

37 篇文章 231 订阅

订阅专栏

经验分享

8 篇文章 1 订阅

订阅专栏

前言

lvgl默认创建出来的tabview是不能在第一个和最后一个页面之间循环切换的。

下面的教大家怎么让tabview的页面可以循环切换，也就是：

当切换到第一个页面的时候可以继续切换到最后一个页面
反过来，当切换到最后一个页面的时候可以继续切换到第一个页面

实现思路

我们先要弄清楚 tabview 由哪些部分组成。
选项卡视图对象可用于组织选项卡中的内容。选项卡视图是从其他小部件构建的：

tabview主容器
- 选项卡按钮
- 选项卡的容器(页面)

选项卡按钮可以位于选项卡视图的顶部、底部、左侧和右侧，或者隐藏起来。
我们可以通过单击选项卡按钮或在选项卡容器上水平滑切换选项卡。

在这里插入图片描述

也就是当我滑动tabview中的页面(选项卡)的时候实际上是在操作tabview中的选项卡部分

所以我们可以给 tabview 中的页面(选项卡)添加一个事件处理回调函数，来完成页面的循环切换功能。

实现代码

// 为 tabview 中的页面(选项卡)部分添加事件处理回调函数
lv_obj_add_event_cb(lv_tabview_get_content(tabview), scroll_begin_event, LV_EVENT_SCROLL_END, NULL);

// 处理滚动事件，完成页面循环切换(无限切换)
static void scroll_begin_event(lv_event_t * e)
{
    lv_obj_t * cont = lv_event_get_target(e);
    lv_event_code_t code = lv_event_get_code(e);

    lv_obj_t * tv = lv_obj_get_parent(cont);

    if(lv_event_get_code(e) == LV_EVENT_SCROLL_END) {
        lv_tabview_t * tabview = (lv_tabview_t *)tv;

        lv_coord_t s = lv_obj_get_scroll_x(cont);

        lv_point_t p;
        lv_obj_get_scroll_end(cont, &p);

        lv_coord_t w = lv_obj_get_content_width(cont);
        lv_coord_t t;

        if(lv_obj_get_style_base_dir(tv, LV_PART_MAIN) == LV_BASE_DIR_RTL)  t = -(p.x - w / 2) / w;
        else t = (p.x + w / 2) / w;

        if(s < 0) t = tabview->tab_cnt - 1;
        else if((t == (tabview->tab_cnt - 1)) && (s > p.x)) t = 0;

        bool new_tab = false;
        if(t != lv_tabview_get_tab_act(tv)) new_tab = true;
        lv_tabview_set_act(tv, t, LV_ANIM_ON);
    }
}