lvgl 实现类似h5回到页面顶部的功能

一只前端猿

于 2024-05-21 09:30:00 发布

阅读量455

点赞数 15

分类专栏： lvgl 文章标签： c语言 stm32 c++ 单片机 51单片机 mcu 物联网

本文链接：https://blog.csdn.net/m0_61704502/article/details/139077561

版权

lvgl 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在开发长页面或者弹窗包含滚动的情况下，lvgl会出现滚动后，再次打开页面或者弹窗停留的位置不是顶部，如果页面有固定导航栏时，会导致部分内容被遮挡无法看到，类似如下效果：

这里展示的是弹窗列表内容过多滑动后，再次打开还是停留在上一次的位置，导致不符合新开页面展示的效果。

利用lvgl自带的滚动scroll 函数lv_obj_scroll_to_y可以解决此类问题，效果如下：

在长页面切换时，也是类似这样解决，具体源码如下：

lv_obj_t* ui_list;
static void event_handler_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    if(code == LV_EVENT_CLICKED) {
        lv_obj_clear_flag(ui_mask, LV_OBJ_FLAG_HIDDEN);
        lv_obj_scroll_to_y(ui_list, 0, LV_ANIM_OFF); // 回到顶部
    }
}

static void event_handler_cb1()
{
    lv_obj_add_flag(ui_mask, LV_OBJ_FLAG_HIDDEN);
}

void page_init(void)
{
    ui_page = lv_obj_create(NULL);
    lv_obj_remove_style_all(ui_page);
    lv_obj_set_size(ui_page, lv_pct(100), lv_pct(100));
    lv_obj_set_style_bg_color(ui_page, lv_color_hex(0x000000), LV_PART_MAIN);
    lv_obj_set_style_bg_opa(ui_page, 255, LV_PART_MAIN);

    lv_obj_t * ui_main = lv_obj_create(ui_page);
    lv_obj_remove_style_all(ui_main);
    lv_obj_set_size(ui_main, lv_pct(100), LV_SIZE_CONTENT);
    lv_obj_set_y(ui_main, 76);

    lv_obj_t * label;
    lv_obj_t * btn1 = lv_btn_create(ui_main);
    lv_obj_add_event_cb(btn1, event_handler_cb, LV_EVENT_ALL, NULL);
    lv_obj_center(btn1);

    label = lv_label_create(btn1);
    lv_label_set_text(label, "Button");
    lv_obj_center(label);

    ui_mask = lv_obj_create(ui_page);
    lv_obj_remove_style_all(ui_mask);
    lv_obj_set_size(ui_mask, lv_pct(100), lv_pct(100));
    lv_obj_set_style_bg_color(ui_mask, lv_color_hex(0x000000), LV_PART_MAIN);
    lv_obj_set_style_bg_opa(ui_mask, 220, LV_PART_MAIN);
    lv_obj_add_flag(ui_mask, LV_OBJ_FLAG_HIDDEN);
    lv_obj_add_event_cb(ui_mask, event_handler_cb1, LV_EVENT_CLICKED, NULL);

    lv_obj_t* ui_box = lv_obj_create(ui_mask);
    lv_obj_remove_style_all(ui_box);
    lv_obj_set_size(ui_box, lv_pct(100), 350);
    lv_obj_set_style_bg_color(ui_box, lv_color_hex(0x262626), LV_PART_MAIN);
    lv_obj_set_style_bg_opa(ui_box, 250, LV_PART_MAIN);
    lv_obj_set_style_radius(ui_box, 8, LV_PART_MAIN);
    lv_obj_set_style_align(ui_box, LV_ALIGN_BOTTOM_MID, LV_PART_MAIN);
    lv_obj_set_style_pad_all(ui_box, 20, LV_PART_MAIN);
    lv_obj_clear_flag(ui_box, LV_OBJ_FLAG_SCROLLABLE);

    lv_obj_t* ui_title = lv_label_create(ui_box);
    lv_label_set_text(ui_title, "Title");
    lv_obj_set_style_align(ui_title, LV_ALIGN_TOP_MID, LV_PART_MAIN);
    lv_obj_set_style_text_color(ui_title, lv_color_hex(0xFFFFFF), LV_PART_MAIN);
    lv_obj_set_style_text_opa(ui_title, 255, LV_PART_MAIN);

    ui_list = lv_obj_create(ui_box);
    lv_obj_remove_style_all(ui_list);
    lv_obj_set_size(ui_list, lv_pct(100), 300);
    lv_obj_set_y(ui_list, 20);
    lv_obj_set_flex_flow(ui_list, LV_FLEX_FLOW_COLUMN);
    lv_obj_t* ui_item;
    char str[6];
    for (size_t i = 0; i < 8; i++)
    {
        ui_item = lv_obj_create(ui_list);
        lv_obj_remove_style_all(ui_item);
        lv_obj_set_size(ui_item, lv_pct(100), 74);
        lv_obj_set_style_border_width(ui_item, 1, LV_PART_MAIN);
        lv_obj_set_style_border_side(ui_item, LV_BORDER_SIDE_BOTTOM, LV_PART_MAIN);
        lv_obj_set_style_border_color(ui_item, lv_color_hex(0x404040), LV_PART_MAIN);
        lv_obj_set_style_border_opa(ui_item, 255, LV_PART_MAIN);

        sprintf(str, "text--%d", i);
        lv_obj_t* ui_text = lv_label_create(ui_item);
        lv_label_set_text(ui_text,str);
        lv_obj_set_style_align(ui_text, LV_ALIGN_LEFT_MID, LV_PART_MAIN);
        lv_obj_set_style_text_color(ui_text, lv_color_hex(0xFFFFFF), LV_PART_MAIN);
        lv_obj_set_style_text_opa(ui_text, 255, LV_PART_MAIN); 
    }
}

如有其他关于lvgl页面效果或者H5、小程序的功能需求，欢迎评论一起探讨。