Qt 自定義QTabWidget

思路：

QTabWidget的特點：點擊不同的選項卡顯示不同的窗口。可以將QTabWidget分成兩部分：

　　(1).選項卡：點擊時要知道點擊的是哪個選項。則需要將選項卡和窗口的信息存起來，點擊時去這個信息中判斷；

　　(2).窗口：點擊某個選項卡時，相應的窗口顯示，其他窗口隱藏，可以將這些窗口全部放到一個布局中。

 

（1）創建一個結構體，包含選項卡和窗口的信息：

struct TabWidgetItem {
　　QString id;           //每項的id
　　QWidget* window;      //窗口
　　IconButton* icon;     //選項卡
　　int status;           //0選中; 1選中
};
 
QList<TabWidgetItem*> m_pTabWidgetList;   //存放整個TabWidget（選項卡和窗口所有信息）信息的list列表

 

 

（2）初始化布局和結構體

void TabWidget::initLayout()
{
　　QHBoxLayout* pMainLayout = new QHBoxLayout(this);
　　pMainLayout->setMargin(1);
　　pMainLayout->setSpacing(10);

　　QVBoxLayout* pIconLayout = new QVBoxLayout();
　　QVBoxLayout* pWindowLayout = new QVBoxLayout();
 
　　pMainLayout->addLayout(pWindowLayout);
　　pMainLayout->addLayout(pIconLayout);
}
 
void TabWidget::initTabWidgetItemData()
{
　　{
　　　　TabWidgetItem* pItem = new TabWidgetItem;
　　　　pItem->id = "real";
 
　　　　QWidget* pBaseWidget = new QWidget(this);
　　　　pItem->window = pBaseWidget;
　　　　pItem->window->setVisible(false);
　　　　pWindowLayout->addWidget(pItem->window);

       pItem->icon = new IconButton("實時視頻", this);
       pIconLayout->addWidget(pItem->icon);
       connect(pItem->icon, SIGNAL(clicked(IconButton*)), this, SLOT(sltMenuClicked(IconButton*)));
 
       pItem->status = false;
       m_pTabWidgetList.append(pItem);
 　　}
 
　　{
　　　　TabWidgetItem* pItem = new TabWidgetItem;
　　　　pItem->id = "local";
 
　　　　QWidget* pBaseWidget = new QWidget(this);
　　　　pItem->window = pBaseWidget;
　　　　pItem->window->setVisible(false);
　　　　pWindowLayout->addWidget(pItem->window);

       pItem->icon = new IconButton("本地回放", this);
       pIconLayout->addWidget(pItem->icon);
       connect(pItem->icon, SIGNAL(clicked(IconButton*)), this, SLOT(sltMenuClicked(IconButton*)));
 
       pItem->status = false;
       m_pTabWidgetList.append(pItem);
 　　}
}

 

（3）自定義選項卡IconButton類

IconButton.h文件 #pragma once
 
#include <QWidget>
 
class IconButton: public QWidget
{
    Q_OBJECT
public:
    explicit IconButton(QString title, QWidget *parent = 0);
    ~IconButton();

private:
    QLabel* m_pTitle;
private:
    void initLayout();
public:
    void setTitle(QString title);
protected:
    void mouseReleaseEvent(QMouseEvent *event);
signals:
    void clicked();
signals:
    void clicked(IconButton*);
}
 
IconButton.cpp文件
#include "IconButton.h"
IconButton::IconButton(QString title, QWidget *parent)
    : QWidget(parent)
{
    initLayout();
    setTitle(title);
}

void IconButton::initLayout()
{
    m_pMainLayout = new QHBoxLayout(this);
 
    m_pTitle = new QLabel(this);
    m_pTitle->setStyleSheet("QLabel{font-size:15px;font-weight:100;color:white;}");
    m_pMainLayout->addWidget(m_pTitle, 0, Qt::AlignLeft);
}

void IconButton::setTitle(QString title)
{
    m_pTitle->setText(title);
}

void IconButton::mouseReleaseEvent(QMouseEvent *event)
{
    if (Qt::LeftButton == event->button())
    {
        /* 只處理鼠標在按鈕區域彈起 */
        if (this->rect().contains(event->pos()))
        {
            /* 單擊 */
            emit clicked();
            emit clicked(this);   //關鍵：單擊返回this指針
        }
    }
}

 

（4）設置切換函數

void TabWidget::setTabWidgetActivePage(QString id)
{
    QWidget* pNextwindow = NULL;
    for (int i = 0; i < m_pTabWidgetList.size(); i++) {   //先將所有窗口隱藏
        TabWidgetItem* item = m_pTabWidgetList.at(i);
        item->status = 0;
        item->icon->setChekced(false);
        item->window->hide();
        if (item->id == id) {
            item->status = 1;
            item->icon->setChekced(true);
            pNextwindow = item->window;
        }
    }
    if (pNextwindow) {
        pNextwindow->show();   //再顯示選擇的窗口
    }
}

void TabWidget::sltMenuClicked(IconButton * btn)
{
    for (int i = 0; i < m_pTabWidgetList.size(); i++) {
        TabWidgetItem* item = m_pTabWidgetList.at(i);
        if (item->icon == btn) {
            setTabWidgetActivePage(item->id);
            break;
        }
    }
}
 
TabWidget::TabWidget(QWidget *parent)
{
    initTabWidgetData();
    setTabWidgetActivePage("real");
}

 

 

（5）大功告成

 

我只是把核心代碼寫下來了，別的花里胡哨的添加自己寫...