Tabview (lv_tabview)

Overview（概述）

显示原文

The Tab view object can be used to organize content in tabs. The Tab view is built from other widgets:

Main container: lv_obj.h
Tab buttons: an lv_obj.h with lv_obj.h
Container for the tabs: lv_obj.h
Content of the tabs: lv_obj.h

The tab buttons can be positioned on the top, bottom, left and right side of the Tab view.

A new tab can be selected either by clicking on a tab button or by sliding horizontally on the content.

选项卡视图对象可用于组织选项卡中的内容。选项卡视图是从其他小部件构建的：

主容器：lv_obj.h
选项卡按钮：带有 lv_obj.h 的 lv_obj.h
选项卡的容器 lv_obj.h
选项卡内容： lv_obj.h

选项卡按钮可以位于顶部、底部、左侧和右侧选项卡视图的一侧。

可以通过单击选项卡按钮或通过以下方式选择新选项卡在内容上水平滑动。

Parts and Styles（零件和样式）

显示原文

There are no special parts on the Tab view but the lv_obj and lv_button widgets are used to create the Tab view.

选项卡视图上没有特殊部件，但 lv_obj 和 lv_button 小部件用于创建选项卡视图。

Usage（用法）

Create a Tab view（创建选项卡视图）

显示原文

lv_tabview_create(parent) creates a new empty Tab view.

lv_tabview_create(parent) 创建一个新的空 Tab 视图。

Add tabs（添加选项卡）

显示原文

New tabs can be added with lv_tabview_add_tab(tabview, "Tab name"). This will return a pointer to an lv_obj.h object where the tab's content can be created.

可以使用 lv_tabview_add_tab(tabview, "Tab name") 添加新选项卡。这将返回指向 lv_obj.h 对象的指针，其可以创建选项卡的内容。

Rename tabs（重命名选项卡）

显示原文

A tab can be renamed with lv_tabview_rename_tab(tabview, tab_id, "New Name").

可以使用 lv_tabview_rename_tab(tabview, tab_id, "New Name") 重命名选项卡。

Change tab（“更改”选项卡）

显示原文

To select a new tab you can:

Click on its tab button
Slide horizontally
Use lv_tabview_set_active(tabview, id, LV_ANIM_ON) function

要选择新选项卡，您可以：

单击其选项卡按钮
水平滑动
使用 lv_tabview_set_active(tabview, id, LV_ANIM_ON) 函数

Set tab bar position（设置选项卡栏位置）

显示原文

Using the lv_tabview_set_tab_bar_position(tabview, LV_DIR_LEFT / RIGHT / TOP / BOTTOM) the tab bar can be moved to any sides.

使用 lv_tabview_set_tab_bar_position(tabview, LV_DIR_LEFT / RIGHT / TOP / BOTTOM) 选项卡栏可以移动到任何一侧。

Set tab bar size（设置选项卡栏大小）

显示原文

The size of the tab bar can be adjusted by lv_tabview_set_tab_bar_size(tabview, size) In case of vertical arrangement is means the height of the tab bar, and in horizontal arrangement it means the width.

选项卡栏的大小可以通过 lv_tabview_set_tab_bar_size(tabview, size) 来调整，如果是垂直排列，则是指标签栏的高度，并且在水平排列它意味着宽度。

Get the parts（获取零件）

显示原文

lv_tabview_get_content(tabview) returns the container for tabs content
lv_tabview_get_tab_bar(tabview) returns the container for tabs buttons

lv_tabview_get_content(tabview) 返回选项卡内容的容器
lv_tabview_get_tab_bar(tabview) 返回选项卡按钮的容器

Events（事件）

显示原文

LV_EVENT_VALUE_CHANGED Sent when a new tab is selected by sliding or clicking the tab button. lv_tabview_get_tab_active(tabview) returns the zero based index of the current tab.

Learn more about Events（事件）.

LV_EVENT_VALUE_CHANGED 通过滑动选择新选项卡时发送或单击选项卡按钮。 lv_tabview_get_tab_active(tabview) 返回当前选项卡从零开始的索引。

详细了解更多 Events（事件）。

Keys（按键）

显示原文

Keys have effect only on the tab buttons. Add manually to a group if required.

Learn more about Keys（按键）.

按键仅对 Tab 键有效。如果需要，请手动添加到组。

了解有关 Keys（按键）的更多信息。

Example

[English]

Simple Tabview

#include "../../lv_examples.h"
#if LV_USE_TABVIEW && LV_BUILD_EXAMPLES

void lv_example_tabview_1(void)
{
    /*Create a Tab view object*/
    lv_obj_t * tabview;
    tabview = lv_tabview_create(lv_screen_active());

    /*Add 3 tabs (the tabs are page (lv_page) and can be scrolled*/
    lv_obj_t * tab1 = lv_tabview_add_tab(tabview, "Tab 1");
    lv_obj_t * tab2 = lv_tabview_add_tab(tabview, "Tab 2");
    lv_obj_t * tab3 = lv_tabview_add_tab(tabview, "Tab 3");

    /*Add content to the tabs*/
    lv_obj_t * label = lv_label_create(tab1);
    lv_label_set_text(label, "This the first tab\n\n"
                      "If the content\n"
                      "of a tab\n"
                      "becomes too\n"
                      "longer\n"
                      "than the\n"
                      "container\n"
                      "then it\n"
                      "automatically\n"
                      "becomes\n"
                      "scrollable.\n"
                      "\n"
                      "\n"
                      "\n"
                      "Can you see it?");

    label = lv_label_create(tab2);
    lv_label_set_text(label, "Second tab");

    label = lv_label_create(tab3);
    lv_label_set_text(label, "Third tab");

    lv_obj_scroll_to_view_recursive(label, LV_ANIM_ON);

}
#endif

Tabs on the left, styling and no scrolling

#include "../../lv_examples.h"
#if LV_USE_TABVIEW && LV_BUILD_EXAMPLES

/*A vertical tab view with disabled scrolling and some styling*/
void lv_example_tabview_2(void)
{
    /*Create a Tab view object*/
    lv_obj_t * tabview;
    tabview = lv_tabview_create(lv_screen_active());
    lv_tabview_set_tab_bar_position(tabview, LV_DIR_LEFT);
    lv_tabview_set_tab_bar_size(tabview, 80);

    lv_obj_set_style_bg_color(tabview, lv_palette_lighten(LV_PALETTE_RED, 2), 0);

    lv_obj_t * tab_buttons = lv_tabview_get_tab_bar(tabview);
    lv_obj_set_style_bg_color(tab_buttons, lv_palette_darken(LV_PALETTE_GREY, 3), 0);
    lv_obj_set_style_text_color(tab_buttons, lv_palette_lighten(LV_PALETTE_GREY, 5), 0);
    lv_obj_set_style_border_side(tab_buttons, LV_BORDER_SIDE_RIGHT, LV_PART_ITEMS | LV_STATE_CHECKED);

    /*Add 3 tabs (the tabs are page (lv_page) and can be scrolled*/
    lv_obj_t * tab1 = lv_tabview_add_tab(tabview, "Tab 1");
    lv_obj_t * tab2 = lv_tabview_add_tab(tabview, "Tab 2");
    lv_obj_t * tab3 = lv_tabview_add_tab(tabview, "Tab 3");
    lv_obj_t * tab4 = lv_tabview_add_tab(tabview, "Tab 4");
    lv_obj_t * tab5 = lv_tabview_add_tab(tabview, "Tab 5");

    lv_obj_set_style_bg_color(tab2, lv_palette_lighten(LV_PALETTE_AMBER, 3), 0);
    lv_obj_set_style_bg_opa(tab2, LV_OPA_COVER, 0);

    /*Add content to the tabs*/
    lv_obj_t * label = lv_label_create(tab1);
    lv_label_set_text(label, "First tab");

    label = lv_label_create(tab2);
    lv_label_set_text(label, "Second tab");

    label = lv_label_create(tab3);
    lv_label_set_text(label, "Third tab");

    label = lv_label_create(tab4);
    lv_label_set_text(label, "Forth tab");

    label = lv_label_create(tab5);
    lv_label_set_text(label, "Fifth tab");

    lv_obj_remove_flag(lv_tabview_get_content(tabview), LV_OBJ_FLAG_SCROLLABLE);
}
#endif

API

lv_api_map_v8.h

lv_tabview.h