LVGL SCROLL循环滚动

一、案例测试

这里我使用LVGL的版本是8.3.3
运行案例 lvgl_examples\scroll\lv_example_scroll_6 效果如下所示

二、现象

这里先描述一下现象，当我们使用 SCROLL控件实现滚动功能，这个有点像以前的手机进入功能界面时的循环切换，但是这里的切换存在边界，当你滚动到最边上一个界面时，就无法滚动到另一边，如下图所示：

三、屏蔽滚动动画

这里比较简单，只需要将代码中的滚动事件屏蔽就好，代码如下

// lv_obj_add_event_cb(cont, scroll_event_cb, LV_EVENT_SCROLL, NULL);       // 为了方便实现，先把滚动的动画屏蔽

运行后，显示效果如下图所示：

四、循环滚动实现

其实实现循环滚动的思路比较简单，只需要不断改变控件的索引id，将显示界面的索引一直设置为索引数量的中心值，这样就实现了永远滑不到最边上一个界面，操作函数如下

/* 通过移动控件的位置，到达改变索引值的效果 */
lv_obj_move_to_index(); 
/* 将界面滚动到需要显示的控件上 */
lv_obj_scroll_to_view();

了解完思路后，我在可以在滚动结束后处于，所以需要添加滚动结束事件，代码如下所示：

/**
 * @brief 滚动结束后的事件
 * @param event 
*/
static void scroll_end_event(lv_event_t * e)
{
    lv_obj_t * cont = lv_event_get_target(e);                                               // 获取事件的初始对象
 
    /* 获取事件的事件代码 */
    if(lv_event_get_code(e) == LV_EVENT_SCROLL_END) 
    {  
        /* 判断是否在滚动中 */
        if (lv_obj_is_scrolling(cont))
        {
            return;
        }
 
        lv_coord_t child_cnt = lv_obj_get_child_cnt(cont);                                  // 获取子界面的数量
        lv_coord_t mid_btn_index = (child_cnt - 1) / 2;                                     // 中间界面的位置
 
        /* 获取父对象y轴的中心坐标值 */
        lv_area_t cont_a;
        lv_obj_get_coords(cont, &cont_a);                                                   // 将cont对象的坐标复制到cont_a
        lv_coord_t cont_y_center = cont_a.y1 + lv_area_get_width(&cont_a) / 2;              // 获取界面的宽像素大小/2 
 
        /* 注意，这里的中心显示界面的坐标不在正中心，所以这里加上了差值 */
        cont_y_center += 69;
 
        /* 遍历子界面 */
        for (lv_coord_t i = 0; i < child_cnt; i++) {
            lv_obj_t* child = lv_obj_get_child(cont, i);                                    // 通过索引获取子对象
 
            /* 获取子对象y轴的中心坐标值 */
            lv_area_t child_a;
            lv_obj_get_coords(child, &child_a);
            lv_coord_t child_y_center = child_a.y1 + lv_area_get_width(&child_a) / 2;       // 获取界面中按钮宽像素值的大小/2
            /* 子界面的坐标与父界面的坐标相等时，说明当前界面在父界面中显示 */
            if (child_y_center == cont_y_center)
            {
                /* 当前显示界面的索引 */
                lv_coord_t current_btn_index = lv_obj_get_index(child);
 
                /* 判断界面移动的数数据，并将当前界面的索引改为中间位置 */
                /* 因为是在滑动结束后实现的，建议界面较多的情况下使用此方式，当界面较少，一次滑动太多界面时，容易滑倒边界出现卡顿现象 */
                lv_coord_t move_btn_quantity = LV_ABS(current_btn_index - mid_btn_index);
                for (lv_coord_t j = 0; j < move_btn_quantity; j++)
                {
                    /* 向右滑动 */
                    if (current_btn_index < mid_btn_index)
                    {
                        lv_obj_move_to_index(lv_obj_get_child(cont, child_cnt - 1), 0);                     // 将最后一个界面索引改为第一个界面
                        lv_obj_scroll_to_view(lv_obj_get_child(cont, mid_btn_index), LV_ANIM_OFF);          // lv_obj_get_child 通过子索引获取对象的子对象
                    }
                    /* 向左滑动 */
                    if (current_btn_index > mid_btn_index)
                    {
                        lv_obj_move_to_index(lv_obj_get_child(cont, 0), child_cnt - 1);                     // 将第一个界面的索引值改为最后一个界面
                        lv_obj_scroll_to_view(lv_obj_get_child(cont, mid_btn_index), LV_ANIM_OFF);          // lv_obj_get_child 通过子索引获取对象的子对象
                    }
                }
                /* 保证界面居中显示 */
                lv_obj_set_style_translate_y(lv_obj_get_child(cont, mid_btn_index), 0, 0);
                break;
            }
        }            
    }
}
 

五、完整代码

#ifdef LV_LVGL_H_INCLUDE_SIMPLE
#include "lvgl.h"
#else
#include "lvgl/lvgl.h"
#endif
 
#include "esp_log.h"
#if LV_BUILD_EXAMPLES && LV_USE_FLEX
 
/**
 * @brief 滚动结束后的事件
 * @param event 
*/
static void scroll_end_event(lv_event_t * e)
{
    lv_obj_t * cont = lv_event_get_target(e);                                               // 获取事件的初始对象
 
    /* 获取事件的事件代码 */
    if(lv_event_get_code(e) == LV_EVENT_SCROLL_END) 
    {  
        /* 判断是否在滚动中 */
        if (lv_obj_is_scrolling(cont))
        {
            return;
        }
 
        lv_coord_t child_cnt = lv_obj_get_child_cnt(cont);                                  // 获取子界面的数量
        lv_coord_t mid_btn_index = (child_cnt - 1) / 2;                                     // 中间界面的位置
 
        /* 获取父对象y轴的中心坐标值 */
        lv_area_t cont_a;
        lv_obj_get_coords(cont, &cont_a);                                                   // 将cont对象的坐标复制到cont_a
        lv_coord_t cont_y_center = cont_a.y1 + lv_area_get_width(&cont_a) / 2;              // 获取界面的宽像素大小/2 
 
        /* 注意，这里的中心显示界面的坐标不在正中心，所以这里加上了差值 */
        cont_y_center += 69;
 
        /* 遍历子界面 */
        for (lv_coord_t i = 0; i < child_cnt; i++) {
            lv_obj_t* child = lv_obj_get_child(cont, i);                                    // 通过索引获取子对象
 
            /* 获取子对象y轴的中心坐标值 */
            lv_area_t child_a;
            lv_obj_get_coords(child, &child_a);
            lv_coord_t child_y_center = child_a.y1 + lv_area_get_width(&child_a) / 2;       // 获取界面中按钮宽像素值的大小/2
            /* 子界面的坐标与父界面的坐标相等时，说明当前界面在父界面中显示 */
            if (child_y_center == cont_y_center)
            {
                /* 当前显示界面的索引 */
                lv_coord_t current_btn_index = lv_obj_get_index(child);
 
                /* 判断界面移动的数数据，并将当前界面的索引改为中间位置 */
                /* 因为是在滑动结束后实现的，建议界面较多的情况下使用此方式，当界面较少，一次滑动太多界面时，容易滑倒边界出现卡顿现象 */
                lv_coord_t move_btn_quantity = LV_ABS(current_btn_index - mid_btn_index);
                for (lv_coord_t j = 0; j < move_btn_quantity; j++)
                {
                    /* 向右滑动 */
                    if (current_btn_index < mid_btn_index)
                    {
                        lv_obj_move_to_index(lv_obj_get_child(cont, child_cnt - 1), 0);                     // 将最后一个界面索引改为第一个界面
                        lv_obj_scroll_to_view(lv_obj_get_child(cont, mid_btn_index), LV_ANIM_OFF);          // lv_obj_get_child 通过子索引获取对象的子对象
                    }
                    /* 向左滑动 */
                    if (current_btn_index > mid_btn_index)
                    {
                        lv_obj_move_to_index(lv_obj_get_child(cont, 0), child_cnt - 1);                     // 将第一个界面的索引值改为最后一个界面
                        lv_obj_scroll_to_view(lv_obj_get_child(cont, mid_btn_index), LV_ANIM_OFF);          // lv_obj_get_child 通过子索引获取对象的子对象
                    }
                }
                /* 保证界面居中显示 */
                lv_obj_set_style_translate_y(lv_obj_get_child(cont, mid_btn_index), 0, 0);
                break;
            }
        }            
    }
}
 
static void scroll_event_cb(lv_event_t * e)
{
    lv_obj_t * cont = lv_event_get_target(e);
 
    lv_area_t cont_a;
    lv_obj_get_coords(cont, &cont_a);
    lv_coord_t cont_y_center = cont_a.y1 + lv_area_get_height(&cont_a) / 2;
 
    lv_coord_t r = lv_obj_get_height(cont) * 7 / 10;
    uint32_t i;
    uint32_t child_cnt = lv_obj_get_child_cnt(cont);
    for(i = 0; i < child_cnt; i++) {
        lv_obj_t * child = lv_obj_get_child(cont, i);
        lv_area_t child_a;
        lv_obj_get_coords(child, &child_a);
 
        lv_coord_t child_y_center = child_a.y1 + lv_area_get_height(&child_a) / 2;
 
        lv_coord_t diff_y = child_y_center - cont_y_center;
        diff_y = LV_ABS(diff_y);
 
        /*Get the x of diff_y on a circle.*/
        lv_coord_t x;
        /*If diff_y is out of the circle use the last point of the circle (the radius)*/
        if(diff_y >= r) {
            x = r;
        }
        else {
            /*Use Pythagoras theorem to get x from radius and y*/
            uint32_t x_sqr = r * r - diff_y * diff_y;
            lv_sqrt_res_t res;
            lv_sqrt(x_sqr, &res, 0x8000);   /*Use lvgl's built in sqrt root function*/
            x = r - res.i;
        }
 
        /*Translate the item by the calculated X coordinate*/
        lv_obj_set_style_translate_x(child, x, 0);
 
        /*Use some opacity with larger translations*/
        lv_opa_t opa = lv_map(x, 0, r, LV_OPA_TRANSP, LV_OPA_COVER);
        lv_obj_set_style_opa(child, LV_OPA_COVER - opa, 0);
    }
}
 
/**
 * Translate the object as they scroll
 */
void lvgl_scroll_test(void)
{
    lv_obj_t * cont = lv_obj_create(lv_scr_act());
    lv_obj_set_size(cont, 200, 200);
    lv_obj_center(cont);
    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_COLUMN);
 
    // lv_obj_add_event_cb(cont, scroll_event_cb, LV_EVENT_SCROLL, NULL);       // 为了方便实现，先把滚动的动画屏蔽
    lv_obj_add_event_cb(cont, scroll_end_event, LV_EVENT_SCROLL_END, NULL);
 
    lv_obj_set_style_radius(cont, LV_RADIUS_CIRCLE, 0);
    lv_obj_set_style_clip_corner(cont, true, 0);
    lv_obj_set_scroll_dir(cont, LV_DIR_VER);
    lv_obj_set_scroll_snap_y(cont, LV_SCROLL_SNAP_CENTER);
    lv_obj_set_scrollbar_mode(cont, LV_SCROLLBAR_MODE_OFF);
 
    uint32_t i;
    for(i = 0; i < 20; i++) {
        lv_obj_t * btn = lv_btn_create(cont);
        lv_obj_set_width(btn, lv_pct(100));
 
        lv_obj_t * label = lv_label_create(btn);
        lv_label_set_text_fmt(label, "Button %"LV_PRIu32, i);
    }
 
    /*---------------------------------------- 指定中心显示界面 ----------------------------------------*/
    lv_coord_t mid_btn_index = (lv_obj_get_child_cnt(cont) - 1) / 2;                   // 如果界面为偶数，将中间数向下取整的界面设置为中间界面
    lv_coord_t child_cnt = lv_obj_get_child_cnt(cont);                                 // 获取子界面的数量
 
    int roll_direction = mid_btn_index - mid_btn_index;                                      // 确定滚动方向
 
    /* 通过循环将指定界面移到中心位置 */
    for (lv_coord_t i = 0; i < LV_ABS(roll_direction); i++)
    {
        if (roll_direction > 0)
        {
            lv_obj_move_to_index(lv_obj_get_child(cont, child_cnt - 1), 0);            // 将最后一个界面的索引更改为 0 （移至第一个界面）
        }
        else
        {
            lv_obj_move_to_index(lv_obj_get_child(cont, 0), child_cnt - 1);            // 将第一个界面的索引值改为最大值（移至最后一个界面）
        }    
    }
 
    /*当按钮数为偶数时，确保按钮居中*/
    lv_obj_scroll_to_view(lv_obj_get_child(cont, mid_btn_index), LV_ANIM_OFF);         // 滚动到一个对象，直到它在其父对象上可见
}
 
#endif
 

参考文献

LVGL 圆弧滚动列表组件程序详解-CirleScrollPanel：https://blog.csdn.net/qq_41980754/article/details/120047959
让tabview的页面循环切换（无限切换)：https://blog.csdn.net/qq_35181236/article/details/124044959
LVGL库入门教程：https://www.cnblogs.com/frozencandles/p/16422019.html
LVGL 键盘|极客笔记：https://deepinout.com/lvgl-tutorials/lvgl-widgets/lvgl-lv_keyboard.html
LVGL实现按钮菜单无限滚动的效果：https://blog.csdn.net/Mrkinte/article/details/126898326