选项卡视图 (lv_tabview)¶
概述¶
选项卡视图对象可用于将内容组织到选项卡中。 选项卡视图由以下小部件构建：
主容器：lv_obj
选项卡按钮：lv_btnmatrix
选项卡的容器：lv_obj
选项卡的内容：lv_obj
选项卡按钮可以位于选项卡视图的顶部、底部、左侧或右侧。
可以通过点击选项卡按钮或水平滑动内容来选择新选项卡。
部件和样式¶
选项卡视图没有特殊部件，但使用了 lv_obj 和 lv_btnmatrix 小部件来创建选项卡视图。
用法¶
创建选项卡视图¶
lv_tabview_create(parent, tab_pos, tab_size); 创建一个新的空选项卡视图。tab_pos 可以是 LV_DIR_TOP/BOTTOM/LEFT/RIGHT，用于将选项卡按钮定位到某一侧。
tab_size 是选项卡按钮的高度（对于 LV_DIR_TOP/BOTTOM）或宽度（对于 LV_DIR_LEFT/RIGHT）。
重命名选项卡¶
可以使用 lv_tabview_rename_tab(tabview, tab_id, "新名称") 重命名选项卡。
事件¶
LV_EVENT_VALUE_CHANGED当通过滑动或点击选项卡按钮选择新选项卡时发送。lv_tabview_get_tab_act(tabview)返回当前选项卡的从零开始的索引。
了解更多关于事件的信息。
示例¶
Simple Tabview¶
C code
GitHub#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_scr_act(), LV_DIR_TOP, 50);
/*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
# Create a Tab view object
tabview = lv.tabview(lv.scr_act(), lv.DIR.TOP, 50)
# Add 3 tabs (the tabs are page (lv_page) and can be scrolled
tab1 = tabview.add_tab("Tab 1")
tab2 = tabview.add_tab("Tab 2")
tab3 = tabview.add_tab("Tab 3")
# Add content to the tabs
label = lv.label(tab1)
label.set_text("""This the first tab
If the content
of a tab
becomes too
longer
than the
container
then it
automatically
becomes
scrollable.
Can you see it?""")
label = lv.label(tab2)
label.set_text("Second tab")
label = lv.label(tab3)
label.set_text("Third tab");
label.scroll_to_view_recursive(lv.ANIM.ON)
Tabs on the left, styling and no scrolling¶
C code
GitHub#include "../../lv_examples.h"
#if LV_USE_TABVIEW && LV_BUILD_EXAMPLES
static void scroll_begin_event(lv_event_t * e)
{
/*Disable the scroll animations. Triggered when a tab button is clicked */
if(lv_event_get_code(e) == LV_EVENT_SCROLL_BEGIN) {
lv_anim_t * a = lv_event_get_param(e);
if(a) a->time = 0;
}
}
void lv_example_tabview_2(void)
{
/*Create a Tab view object*/
lv_obj_t * tabview;
tabview = lv_tabview_create(lv_scr_act(), LV_DIR_LEFT, 80);
lv_obj_add_event_cb(lv_tabview_get_content(tabview), scroll_begin_event, LV_EVENT_SCROLL_BEGIN, NULL);
lv_obj_set_style_bg_color(tabview, lv_palette_lighten(LV_PALETTE_RED, 2), 0);
lv_obj_t * tab_btns = lv_tabview_get_tab_btns(tabview);
lv_obj_set_style_bg_color(tab_btns, lv_palette_darken(LV_PALETTE_GREY, 3), 0);
lv_obj_set_style_text_color(tab_btns, lv_palette_lighten(LV_PALETTE_GREY, 5), 0);
lv_obj_set_style_border_side(tab_btns, 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_clear_flag(lv_tabview_get_content(tabview), LV_OBJ_FLAG_SCROLLABLE);
}
#endif
def scroll_begin_event(e):
#Disable the scroll animations. Triggered when a tab button is clicked */
if e.get_code() == lv.EVENT.SCROLL_BEGIN:
a = lv.anim_t.__cast__(e.get_param())
if a:
a.time = 0
# Create a Tab view object
tabview = lv.tabview(lv.scr_act(), lv.DIR.LEFT, 80)
tabview.get_content().add_event_cb(scroll_begin_event, lv.EVENT.SCROLL_BEGIN, None)
tabview.set_style_bg_color(lv.palette_lighten(lv.PALETTE.RED, 2), 0)
tab_btns = tabview.get_tab_btns()
tab_btns.set_style_bg_color(lv.palette_darken(lv.PALETTE.GREY, 3), 0)
tab_btns.set_style_text_color(lv.palette_lighten(lv.PALETTE.GREY, 5), 0)
tab_btns.set_style_border_side(lv.BORDER_SIDE.RIGHT, lv.PART.ITEMS | lv.STATE.CHECKED)
# Add 3 tabs (the tabs are page (lv_page) and can be scrolled
tab1 = tabview.add_tab("Tab 1")
tab2 = tabview.add_tab("Tab 2")
tab3 = tabview.add_tab("Tab 3")
tab4 = tabview.add_tab("Tab 4")
tab5 = tabview.add_tab("Tab 5")
tab2.set_style_bg_color(lv.palette_lighten(lv.PALETTE.AMBER, 3), 0)
tab2.set_style_bg_opa(lv.OPA.COVER, 0)
# Add content to the tabs
label = lv.label(tab1)
label.set_text("First tab")
label = lv.label(tab2)
label.set_text("Second tab")
label = lv.label(tab3)
label.set_text("Third tab")
label = lv.label(tab4)
label.set_text("Forth tab")
label = lv.label(tab5)
label.set_text("Fifth tab")
tabview.get_content().clear_flag(lv.obj.FLAG.SCROLLABLE)