Why won't my list play nicely with tabview?


If I place a list as the only thing filling a page in my tabview then I can’t drag that page sideways to change tabview pages. Since I am not showing the tabs that effectively leaves the user stuck in the list page.

What MCU/Processor/Board and compiler are you using?

Teensy 4.0 - Arduino

What LVGL version are you using?

LittleVGL for Arduino v6.0

What do you want to achieve?

I want the list button drag events to propagate down to the tabview page so swiping sideways works for my list

What have you tried so far?

Tinkered with attributes on the list -

void createStationsWindow(lv_obj_t * page) {
  //Station list
  dabStationList = lv_list_create(page, NULL);      //unnecessary hack?
  lv_page_set_sb_mode(page, LV_SB_MODE_OFF);
  lv_list_set_single_mode(dabStationList, true);
  lv_page_glue_obj(dabStationList, true);
  lv_obj_set_pos(dabStationList, 0, 0);
  lv_obj_set_size(dabStationList, lv_page_get_scrl_width(page), LV_VER_RES - 33);
  lv_list_set_sb_mode(dabStationList, LV_SB_MODE_OFF);
  lv_list_set_scroll_propagation(dabStationList, true);
  lv_obj_set_parent_event(dabStationList, true);
  lv_obj_set_drag_parent(dabStationList, true);
  lv_obj_set_drag(dabStationList, true);

with various combinations of each option.

And also the list buttons -

        list_btn = lv_list_add_btn(list, LV_SYMBOL_AUDIO, name.c_str());
        lv_obj_set_event_cb(list_btn, list_action);
        //lv_page_glue_obj(list_btn, false);
        lv_obj_set_drag(list_btn, true);
        //lv_obj_set_drag_parent(list_btn, true);
        lv_obj_set_parent_event(list_btn, true);
        lv_obj_set_drag_parent(list_btn, true);

again trying various combinations, but clearly not the right one. As you can see I’m a bit in the dark as to when and where these options make sense.

Code to reproduce

void screenInit(void)

   //Initialize the theme
   lv_theme_t *th = lv_theme_night_init(30, NULL);

    //Create a holder page (the page become scrollable on small displays )
    lv_obj_t * tabView = lv_tabview_create(lv_scr_act(), NULL);
    lv_tabview_set_btns_hidden(tabView, true);
    lv_tabview_set_style(tabView, LV_TABVIEW_STYLE_BG, &lv_style_transp_fit);
    lv_obj_set_size(tabView, LV_HOR_RES, LV_VER_RES - 33);
    lv_obj_set_pos(tabView, 0, 33);

    //Create the tabs
    lv_obj_t * tab1 = lv_tabview_add_tab(tabView, "Settings");
    lv_obj_t * page = lv_tabview_add_tab(tabView, "Stations");
    lv_obj_t * tab3 = lv_tabview_add_tab(tabView, "Main");
    lv_obj_t * tab4 = lv_tabview_add_tab(tabView, "Presets");
    lv_obj_t * tab5 = lv_tabview_add_tab(tabView, "Terminal");
    lv_tabview_set_tab_act(tabView, 2, LV_ANIM_OFF);

    lv_obj_t * label = lv_label_create(tab3, NULL);
    lv_label_set_text(label, "Swipe right then try swipe left again.");
    lv_obj_align(label, NULL, LV_ALIGN_CENTER, 0, 0);
    //Create the contents
    lv_obj_t * list1 = lv_list_create(page, NULL);
    lv_page_set_sb_mode(page, LV_SB_MODE_OFF);
    lv_list_set_single_mode(list1, true);
    lv_page_glue_obj(list1, true);
    lv_obj_set_pos(list1, 0, 0);
    lv_obj_set_size(list1, lv_page_get_scrl_width(page), LV_VER_RES - 33);
    lv_list_set_sb_mode(list1, LV_SB_MODE_OFF);
    lv_list_set_scroll_propagation(list1, true);
    lv_obj_set_parent_event(list1, true);
    lv_obj_set_drag_parent(list1, true);
    lv_obj_set_drag(list1, true);

/*Add buttons to the list*/
    lv_obj_t * list_btn;

    list_btn = lv_list_add_btn(list1, LV_SYMBOL_FILE, "New");
    lv_obj_set_event_cb(list_btn, event_handler);

    list_btn = lv_list_add_btn(list1, LV_SYMBOL_DIRECTORY, "Open");
    lv_obj_set_event_cb(list_btn, event_handler);

    list_btn = lv_list_add_btn(list1, LV_SYMBOL_CLOSE, "Delete");
    lv_obj_set_event_cb(list_btn, event_handler);

    list_btn = lv_list_add_btn(list1, LV_SYMBOL_EDIT, "Edit");
    lv_obj_set_event_cb(list_btn, event_handler);

    list_btn = lv_list_add_btn(list1, LV_SYMBOL_SAVE, "Save");
    lv_obj_set_event_cb(list_btn, event_handler);

    list_btn = lv_list_add_btn(list1, LV_SYMBOL_BELL, "Notify");
    lv_obj_set_event_cb(list_btn, event_handler);

    list_btn = lv_list_add_btn(list1, LV_SYMBOL_BATTERY_FULL, "Battery");
    lv_obj_set_event_cb(list_btn, event_handler);  

static void event_handler(lv_obj_t * obj, lv_event_t event)
    if(event == LV_EVENT_CLICKED) {
        printf("Clicked: %s\n", lv_list_get_btn_text(obj));

LVGL 6 has very limited scroll propagation support. I recommend upgrading to v8; this should work out-of-the-box there.

Ok sure thanks but that would involve a large refactor and the LVGL 8 for Arduino library as installed from the library manager seems to be broken out of the box. How about version 7?

v7 also has better scroll propagation, but it was further improved in v8. Also, both v7 and v8 have API breakage, so if you are upgrading from v6, you may as well jump straight to v8 instead of using v7.

Ok, done, and it works great thanks! To get the Arduino lvgl 8.0.2 library to build I had to change #include "../../lv_conf.h" in lv_conf_internal.h line 41 to #include "../lv_conf.h" so it picked up lv_conf.h in the right place.

Quick followup question, Is it possible to set the long mode on the labels in a button matrix? I would rather have them scroll if too long than extend beyond the boundaries of the button and overlap the next.