24. 选项卡视图部件

一、选项卡部件

  选项卡视图部件常用于多页面的切换，它的每一个页面就相当于一个容器，用户可以往里面装入自己需要的内容（例如其他的部件）。

  选项卡视图部件由 按钮矩阵 和 主体容器 两部分组成，如果用户需要修改这两部分的样式，则必须先获取相应的组成部分。

  LVGL 官方提供了一些与选项卡视图部件相关 API。

lv_obj_t * lv_tabview_create(lv_obj_t * parent);                                        // 创建选项卡视图部件

void lv_tabview_set_tab_bar_position(lv_obj_t * obj, lv_dir_t dir);                     // 设置选项卡的选项位置
void lv_tabview_set_tab_bar_size(lv_obj_t * obj, int32_t size);                         // 设置选项卡的选项大小

lv_obj_t * lv_tabview_add_tab(lv_obj_t * obj, const char * name);                       // 添加选项卡

lv_obj_t * lv_tabview_get_content(lv_obj_t * tv);                                       // 获取选项卡容器对象

#define lv_tabview_get_tab_btns              lv_tabview_get_tab_bar
lv_obj_t * lv_tabview_get_tab_bar(lv_obj_t * tv);                                       // 获取按键矩阵对象

#define lv_tabview_set_act                   lv_tabview_set_active
void lv_tabview_set_active(lv_obj_t * obj, uint32_t idx, lv_anim_enable_t anim_en);     // 设置当前显示的选项卡

#define lv_tabview_get_tab_act               lv_tabview_get_tab_active
uint32_t lv_tabview_get_tab_active(lv_obj_t * obj);                                     // 获取当前显示的选项卡

  用户需要 创建选项卡视图部件，可调用 lv_tabview_create() 函数。

/**
 * @brief 创建选项卡视图部件
 * 
 * @param parent 指向父部件的指针
 * @return lv_obj_t* 指向选项卡视图部件的指针
 */
lv_obj_t * lv_tabview_create(lv_obj_t * parent);

  在创建完选项卡部件之后，我们可以调用 lv_tabview_set_tab_bar_position() 函数来 设置选项卡的选项位置。

/**
 * @brief 设置选项卡的选项位置
 * 
 * @param obj 指向父部件的指针
 * @param dir 选项位置
 */
void lv_tabview_set_tab_bar_position(lv_obj_t * obj, lv_dir_t dir);

  其中，位置的枚举值如下：

enum _lv_dir_t {
    LV_DIR_NONE     = 0x00,
    LV_DIR_LEFT     = (1 << 0),
    LV_DIR_RIGHT    = (1 << 1),
    LV_DIR_TOP      = (1 << 2),
    LV_DIR_BOTTOM   = (1 << 3),
    LV_DIR_HOR      = LV_DIR_LEFT | LV_DIR_RIGHT,
    LV_DIR_VER      = LV_DIR_TOP | LV_DIR_BOTTOM,
    LV_DIR_ALL      = LV_DIR_HOR | LV_DIR_VER,
};

  然后，我们还可以通过 lv_tabview_set_tab_bar_size() 函数设置选项大小。

/**
 * @brief 设置选项卡的选项大小
 * 
 * @param obj 指向父部件的指针
 * @param size 选项的大小
 */
void lv_tabview_set_tab_bar_size(lv_obj_t * obj, int32_t size);

  在创建完选项卡部件之后，我们可以调用 lv_tabview_add_tab() 函数来 添加选项卡。

/**
 * @brief 添加选项卡
 * 
 * @param obj 指向选项卡视图部件的指针
 * @param name 选项卡名称
 * @return lv_obj_t* 指向选项卡容器对象的指针
 */
lv_obj_t * lv_tabview_add_tab(lv_obj_t * obj, const char * name);

  选项卡视图部件 是由 按钮矩阵 和 主体容器 两部分组成，如果用户需要修改这两部分的样式，则必须先获取相应的组成部分。获取 按钮矩阵 和 主体容器 的相关函数分别为：lv_tabview_get_tab_btns()、lv_tabview_get_content()。

/**
 * @brief 获取按键矩阵对象
 * 
 * @param tv 指向选项卡视图部件的指针
 * @return lv_obj_t* 选项卡按键矩阵对象
 */
lv_obj_t * lv_tabview_get_tab_btns(lv_obj_t * tv);

/**
 * @brief 获取选项卡容器对象
 * 
 * @param tv 指向选项卡视图部件的指针
 * @return lv_obj_t* 指向选项卡容器对象的指针
 */
lv_obj_t * lv_tabview_get_content(lv_obj_t * tv);

二、实验例程

#include "lvgl.h"
#include "lv_port_disp_template.h"
#include "lv_port_indev_template.h"

int main(void)
{
    HAL_Init();
    System_Clock_Init(8, 336, 2, 7);
    Delay_Init(168);

    SPI_Simulate_Init();
    // SRAM_Init();
    TIM_Base_Init(&g_tim6_handle, TIM6, 83, 999);
    __HAL_TIM_CLEAR_IT(&g_tim6_handle, TIM_IT_UPDATE);                          // 清除更新中断标志位
    HAL_TIM_Base_Start_IT(&g_tim6_handle);                                      // 使能更新中断，并启动计数器

    lv_init();
    lv_port_disp_init();
    lv_port_indev_init();

    // 测试代码
    lv_obj_t *tableView = lv_tabview_create(lv_scr_act());                      // 创建选项卡视图部件
    lv_tabview_set_tab_bar_position(tableView, LV_DIR_TOP);                     // 设置选项卡的选项位置
    lv_tabview_set_tab_bar_size(tableView, 50);                                 // 设置选项的大小

    lv_obj_t *tab1 = lv_tabview_add_tab(tableView, "Sakura");                   // 添加选项卡
    lv_obj_t *tab2 = lv_tabview_add_tab(tableView, "Mikoto");
    lv_obj_t *tab3 = lv_tabview_add_tab(tableView, "Shana");

    lv_obj_t *label1 = lv_label_create(tab1);
    lv_obj_center(label1);
    lv_obj_set_style_text_font(label1, &lv_font_montserrat_30, LV_PART_MAIN);
    lv_label_set_text(label1, "Sakura");

    lv_obj_t *label2 = lv_label_create(tab2);
    lv_obj_center(label2);
    lv_obj_set_style_text_font(label2, &lv_font_montserrat_30, LV_PART_MAIN);
    lv_label_set_text(label2, "Mikoto");

    lv_obj_t *label3 = lv_label_create(tab3);
    lv_obj_center(label3);
    lv_obj_set_style_text_font(label3, &lv_font_montserrat_30, LV_PART_MAIN);
    lv_label_set_text(label3, "Shana");

    lv_tabview_set_act(tableView, 1, LV_ANIM_ON);                               // 设置当前选项卡

    lv_obj_t *button = lv_tabview_get_tab_btns(tableView);                      // 获取按钮部分

    lv_obj_set_style_bg_color(button, lv_color_hex(0xFF1493), LV_STATE_DEFAULT);    // 设置按钮的颜色
    lv_obj_set_style_bg_opa(button, 255, LV_STATE_DEFAULT);                         // 设置按钮的背景不透明度
    lv_obj_set_style_text_color(button, lv_color_hex(0x9400D3), LV_STATE_DEFAULT);  // 设置按钮的字体颜色

    lv_obj_t *content = lv_tabview_get_content(tableView);                      // 获取主体容器
    lv_obj_set_style_bg_color(content, lv_color_hex(0x90EE90), LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(content, 255, LV_STATE_DEFAULT);

    while (1)
    {
        lv_timer_handler();
        Delay_ms(5);
    }
  
    return 0;
}