LVGL 8.2 Tabview

133 篇文章 109 订阅

Simple Tabview

static 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);
}
  • 运行效果
    在这里插入图片描述

Tabs on the left, styling and no scrolling

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;
    }
}

static 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);
}

  • 运行效果
    在这里插入图片描述
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值