银杏科技有限公司旗下技术文档发布平台 | |||
技术支持电话 | 0379-69926675-801 | ||
技术支持邮件 | Gingko@vip.163.com | ||
版本 | 日期 | 作者 | 修改内容 |
---|---|---|---|
V1.0 | 2020-12-31 | yang | 初次建立 |
在选项卡控件中,每个选项卡代表一个活动的区域,点击不同的选项卡,即可展现不同的页面内容,极大的节约了显示空间。选项卡对象包含几个部分。主体部分是 LV_TABVIEW_PART_BG ,它是一个矩形容器,用于容纳控件的其他部分。在背景上创建了两个重要的真实部分:
以上列出的所有部分均支持典型的背景样式属性和填充。
其中 LV_TABVIEW_PART_TAB_BG 部分还有一个额外的指示标志,称为 LV_TABVIEW_PART_INDIC 。它是当前选定选项卡下方的一个长条形对象,当选项卡之间切换过渡时,指示标志也将跟着移动。它也可以使用典型的背景样式属性,其中 size 样式属性将设置其厚度。
添加新的选项卡后,控件将在 LV_TABVIEW_PART_BG_SCRL 上为其创建一个页面,并将新按钮添加到 LV_TABVIEW_PART_TAB_BG 上的按钮矩阵中。创建的页面可以当作普通的页面控件使用。
创建选项卡后,可以使用 lv_tabview_add_tab(tabview, “Tab name”) 添加新标签,它将返回指向页面对象的指针,用户可以在该选项卡页面内创建内容。
改变当前选择的选项卡主要有三种方法,一是在按钮矩阵部分上单击要选择的标签,二是滑动选项卡的页面来切换不同的选项卡,三是通过命令 lv_tabview_set_tab_act(tabview, id, LV_ANIM_ON/OFF) 来控制选择。
若要选项卡标签显示为中文,需要将转换的中文字库添加进工程,并在 lv_conf.h 头文件中声明全局字体,并将默认正常字体改为该中文字体即可。
lv_obj_t *tab1 = lv_tabview_add_tab(tabview, " 选项卡一 "); lv_obj_t *tab2 = lv_tabview_add_tab(tabview, " 选项卡二 "); lv_obj_t *tab3 = lv_tabview_add_tab(tabview, " 选项卡三 ");
默认情况下,选项卡的标签按钮位于整个控件顶部。用户可以用函数lv_tabview_set_btns_pos(tabview,LV_TABVIEW_TAB_POS_TOP/BOTTOM/LEFT/RIGHT/NONE) 来设置按钮的位置,若参数为 LV_TABVIEW_TAB_POS_NONE 则将隐藏标签按钮。 请注意,该位置要在添加标签之前设定好,在添加标签之后,用户无法将标签的位置从顶部或底部更改为左侧或右侧。
在选项卡切换时会以动画形式来过渡到新选择的选项卡页面,过渡动画的时间可以用函数 lv_tabview_set_anim_time(tabview, anim_time_ms) 来调整。
由于选项卡的内容对象是一个页面,因此它可以接收来自其他类似页面对象的滚动传递。例如,如果在选项卡的页面上创建了一个文本区域,并且滚动了该文本区域到达区域边界,则文本区域的滚动可以传递到页面,带动页面滚动。使用 lv_page_set_scroll_propagation(obj, true) 或者 lv_textarea_set_scroll_propagation(obj, true) 都可以开启滚动传递功能。
默认情况下,选项卡的内容页面已启用滚动传递,因此,当它们水平滚动时,滚动会传播到LV_TABVIEW_PART_BG_SCRL ,页面将会滚动。若要禁用滚动传递请使用函数 lv_page_set_scroll_propagation(tab_page, false) 。
选项卡除了通用事件之外,还支持以下特殊事件:
以下键值由选项卡处理:
void lv_gui_run(void){ lvgl2rtt_init("lcd"); /* 初始化lvgl2rtt */ lv_obj_t *tabview; tabview = lv_tabview_create(lv_scr_act(), NULL); /* 创建选项卡对象 */ lv_obj_set_style_local_text_font(tabview, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &hei_16); /* 设置字体 */ lv_obj_t *tab1 = lv_tabview_add_tab(tabview, " 选项卡一 "); /* 添加三个选项卡页面,并传入选项卡标签 */ lv_obj_t *tab2 = lv_tabview_add_tab(tabview, " 选项卡二 "); lv_obj_t *tab3 = lv_tabview_add_tab(tabview, " 选项卡三 "); lv_obj_t * label = lv_label_create(tab1, NULL); /* 在选项卡页面内创建内容 */ lv_label_set_text(label, " 第一个选项卡 " ); label = lv_label_create(tab2, NULL); lv_label_set_text(label, " 第二个选项卡 "); label = lv_label_create(tab3, NULL); lv_label_set_text(label, " 第三个选项卡 "); }