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）大功告成

我只是把核心代码写下来了，别的花里胡哨的添加自己写...

来源：oschina

链接：https://my.oschina.net/u/4265593/blog/3392554

标签

IconButton