lvgl8 滑动切换界面

在lvgl8中，你可以使用`lv_page`和`lv_tabview`来实现滑动切换界面的效果。

使用`lv_page`可以让你的界面拥有滚动条和边缘效果。你可以在`lv_page`中添加多个子元素，每个子元素就是一个界面。然后你可以使用`lv_page`的API切换不同的子元素。

使用`lv_tabview`可以让你的界面在底部显示多个标签，每个标签对应一个界面。当你点击不同的标签时，就会切换到对应的界面。

以下是一个使用`lv_page`的示例代码：

static lv_obj_t * page1;
static lv_obj_t * page2;

void create_pages(lv_obj_t * parent)
{
    // 创建页面1
    page1 = lv_page_create(parent, NULL);
    lv_page_set_scrollbar_mode(page1, LV_SCROLLBAR_MODE_ON);
    lv_page_set_edge_flash(page1, true);
    lv_page_set_style(page1, LV_PAGE_STYLE_SB, &lv_style_pretty);
    lv_page_set_style(page1, LV_PAGE_STYLE_BG, &lv_style_pretty_color);

    lv_obj_t * label1 = lv_label_create(page1, NULL);
    lv_label_set_text(label1, "This is page 1");

    // 创建页面2
    page2 = lv_page_create(parent, NULL);
    lv_page_set_scrollbar_mode(page2, LV_SCROLLBAR_MODE_ON);
    lv_page_set_edge_flash(page2, true);
    lv_page_set_style(page2, LV_PAGE_STYLE_SB, &lv_style_pretty);
    lv_page_set_style(page2, LV_PAGE_STYLE_BG, &lv_style_pretty_color);

    lv_obj_t * label2 = lv_label_create(page2, NULL);
    lv_label_set_text(label2, "This is page 2");

    // 设置初始显示的页面
    lv_page_focus(page1, 0);
}

void switch_page()
{
    static bool page1_visible = true;
    if (page1_visible) {
        lv_page_focus(page2, 0);
    } else {
        lv_page_focus(page1, 0);
    }
    page1_visible = !page1_visible;
}

在这个例子中，我们创建了两个页面，然后使用`lv_page_focus`函数在两个页面之间切换。

以下是一个使用`lv_tabview`的示例代码：

static lv_obj_t * tabview;

void create_tabs(lv_obj_t * parent)
{
    // 创建tabview
    tabview = lv_tabview_create(parent, NULL);

    // 创建tab1
    lv_obj_t * tab1 = lv_tabview_add_tab(tabview, "Tab 1");
    lv_obj_t * label1 = lv_label_create(tab1, NULL);
    lv_label_set_text(label1, "This is tab 1");

    // 创建tab2
    lv_obj_t * tab2 = lv_tabview_add_tab(tabview, "Tab 2");
    lv_obj_t * label2 = lv_label_create(tab2, NULL);
    lv_label_set_text(label2, "This is tab 2");
}

void switch_tab()
{
    static bool tab1_visible = true;
    if (tab1_visible) {
        lv_tabview_set_tab_act(tabview, 1, LV_ANIM_ON); // 切换到tab2
    } else {
        lv_tabview_set_tab_act(tabview, 0, LV_ANIM_ON); // 切换到tab1
    }
    tab1_visible = !tab1_visible;
}

在这个例子中，我们创建了一个`lv_tabview`，然后在其中添加了两个标签和对应的界面。使用`lv_tabview_set_tab_act`函数可以在两个标签之间切换。