一、案例测试
这里我使用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