Changing the screen located in a specific area

How-to
1

Description

Hello friends, I have a screen like the picture. When I press the page buttons on the bottom bar, I change the screen with a scrolling effect. However, since the top bar and bottom bar are located inside the pages, they also move during the page change. How can I remove the top and bottom bars from the page and change only the gray area in the middle?

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

STM32

What LVGL version are you using?

8.3.10

Screenshot and/or video

Page
Page811×491 3.37 KB

2

I think this might be helpfull for you.
https://docs.lvgl.io/8.3/overview/layer.html

LVGL uses two special layers named layer_top and layer_sys. Both are visible and common on all screens of a display. They are not, however, shared among multiple physical displays. The layer_top is always on top of the default screen (lv_scr_act()), and layer_sys is on top of layer_top.

The layer_top can be used by the user to create some content visible everywhere. For example, a menu bar, a pop-up, etc. If the click attribute is enabled, then layer_top will absorb all user clicks and acts as a modal.

3

LVGL screen change dont support this, but you can use other methods = work on one screen only.

4

When I asked chatgpt, he gave such an example. When I click on the button outside the container, the elements inside the container slide. But I think the container structure has been removed. With which element can I do this in the current version?

// Create a base screen with fixed elements
lv_obj_t *base_screen = lv_scr_act();

// Create a container for sliding content
lv_obj_t *sliding_container = lv_cont_create(base_screen, NULL);
lv_obj_set_size(sliding_container, LV_HOR_RES, LV_VER_RES); // Set container size to screen size

// Add widgets to the sliding container
lv_obj_t *sliding_label = lv_label_create(sliding_container, NULL);
lv_label_set_text(sliding_label, "This is sliding content");

// Implement sliding logic (e.g., in response to a button press)
lv_obj_t *button = lv_btn_create(base_screen, NULL);
lv_obj_set_event_cb(button, slide_button_event_handler);

void slide_button_event_handler(lv_obj_t *btn, lv_event_t event) {
    if (event == LV_EVENT_CLICKED) {
        // Slide the container to the left
        lv_anim_t anim;
        lv_anim_init(&anim);
        lv_anim_set_var(&anim, sliding_container);
        lv_anim_set_values(&anim, 0, -LV_HOR_RES); // Slide to the left
        lv_anim_set_exec_cb(&anim, (lv_anim_exec_xcb_t)lv_obj_set_x);
        lv_anim_set_time(&anim, 500); // Animation duration
        lv_anim_start(&anim);
    }
}
5

Tabview (lv_tabview) — LVGL documentation