【QT入门】 无边框窗口设计之综合运用，实现WPS的tab页面

往期回顾：

【QT入门】 无边框窗口设计之实现窗口阴影-CSDN博客

【QT入门】 无边框窗口设计之实现圆角窗口-CSDN博客

【QT入门】 无边框窗口设计综合运用之自定义标题栏带圆角阴影的窗口-CSDN博客

【QT入门】 无边框窗口设计之综合运用，实现WPS的tab页面

一、最终效果

实现自增tab页面，不同tab页面之间的切换等，同时右键单击tab页面会弹出菜单栏

二、主界面类设计

主界面类，负责整合标题栏和下面的widget，整合很简单，创建一个tab类添加进来就ok

WPSDemo::WPSDemo(QWidget* parent)
 : QWidget(parent)
{
 ui.setupUi(this);
 setWindowFlags(Qt::FramelessWindowHint);//设置为无边框窗口
 setStyleSheet("background-color:#E3E4E7");//设置背景颜色

 tabbrowser* pTab = new tabbrowser(this); 

 QHBoxLayout* pHLay = new QHBoxLayout(this);
 pHLay->addWidget(pTab);
 pHLay->setContentsMargins(6, 6, 6, 6);
 setLayout(pHLay);

 connect(pTab, &tabbrowser::sig_close, this, &WPSDemo::on_close);
}

三、Tab类设计

tab类负责创建tab，实现相关逻辑，重点还是在这里。主要是创建、删除tab标签，以及样式切换。还有就是单击右键显示菜单这几个点需要注意。

1、定义tab标签样式

首先，定义了两个字符串变量 qss0 和 qss1，分别存储了两种不同的 QSS 样式表，用于设置标签页的外观。当tab标签的数量超过一定范围时，会出现一个切换按钮，也就需要切换不同样式。

QString qss0 = "QTabBar::tab{ \
            font: 75 12pt Arial; \
            text-align:left; \
            width:184px; \
            height:32; \
            background:#FFFFFF; \
            border:2px solid #FFFFFF; \
            border-bottom-color:#FFFFFF; \
            border-top-left-radius:4px; \
            border-top-right-radius:4px; \
            padding:2px; \
            margin-top:0px; \
            margin-right:1px; \
            margin-left:1px;  \
            margin-bottom:0px;} \
        QTabBar::tab:selected{  \
            color:#333333; /*文字颜色*/  \
            background-color:#FFFFFF;} \
        QTabBar::tab:!selected{ \
            color:#B2B2B2; \
            border-color:#FFFFFF;} \
        QTabBar::scroller{width: 0px;}";

QString qss1 = "QTabBar::tab{ \
            font: 75 12pt Arial; \
            text-align:left; \
            width:184px; \
            height:32; \
            background:#FFFFFF; \
            border:2px solid #FFFFFF; \
            border-bottom-color:#FFFFFF; \
            border-top-left-radius:4px; \
            border-top-right-radius:4px; \
            padding:2px; \
            margin-top:0px; \
            margin-right:1px; \
            margin-left:1px;  \
            margin-bottom:0px;} \
        QTabBar::tab:selected{  \
            color:#333333; /*文字颜色*/  \
            background-color:#FFFFFF;} \
        QTabBar::tab:!selected{ \
            color:#B2B2B2; \
            border-color:#FFFFFF;} \
        QTabBar::scroller{width: 36px;}";

2、初始化标签页并设置属性

在 tabbrowser 类的构造函数中，初始化一个标签页，并设置了一些标签页的属性，如滚动、可关闭、可移动等。然后调用了initTabWidget()函数初始化标签页部件，并设置了初始的标签页操作标志为 NORMAL。

tabbrowser::tabbrowser(QWidget* parent) :
    QTabWidget(parent)
{
    this->addTab(new QWidget, u8"稻壳");  //定义最开始的tab

    this->setUsesScrollButtons(true);  //滚动鼠标可切换tab
    this->setTabsClosable(true);       //显示tab右侧的关闭按钮
    this->setMovable(true);            //tab可移动位置

    initTabWidget(); //初始化tab
    setTabBarFlag(NORMAL); 

    this->setStyleSheet(qss0);

    connect(this, &QTabWidget::tabCloseRequested, this, &tabbrowser::on_closeTab);
}

这里我们一共定义了4种标签页操作标志：

        //tab操作标志
        enum TAB_FLAG
    {
        NEW, //新建标签页的操作标志
        CLOSE, //关闭标签页的操作标志
        NORMAL, //普通标签页的操作标志
        SPECIAL //特殊标签页的操作标志，比如当只剩下一个标签页时
    };

然后需要根据传入的标志值计算标签页的总宽度，并根据总宽度是否超过当前窗口宽度来切换不同的 QSS 样式表。

3、创建和删除tab标签

1、创建tab标签

用一个 on_newTab() 函数来新建标签页，获取当前标签页数量并转换为字符串作为标题，然后添加新的标签页，并根据需要设置标签页为可关闭状态。

void tabbrowser::on_newTab()
{
    int nCount = count(); //获取当前标签页的数量。
    QString  title = QString::number(nCount); //将当前标签页数量转换为字符串。
    title = "Page" + title; //将标题设置为 "Page" 后接当前标签页数量的字符串

    // 这里写的有问题，应该是 insertTab
    this->addTab(new QWidget, title); 

    //检查标签页是否可关闭，如果不可关闭，则设置标签页为可关闭状态。
    if (!tabsClosable())
    {
        setTabsClosable(true);
    }

    setTabBarFlag(NEW);
}

2、删除tab标签

用一个on_closeTab() 函数来关闭指定索引的标签页，删除对应的窗口部件，并根据剩余标签页数量设置标签栏的标志，当只剩下一个标签页时，将标签页设置为不可关闭状态。

//关闭指定索引的标签页，并根据情况设置标签栏的标志
void tabbrowser::on_closeTab(int index)
{
    //删除指定索引的标签页的对应窗口部件
    widget(index)->deleteLater();
    setTabBarFlag(CLOSE); //设置标签栏的标志为 CLOSE

    //当只剩下1个tab时
    if (count() == 1)
    {
        setTabsClosable(false); //设置标签页为不可关闭状态
        setTabBarFlag(SPECIAL); //设置标签栏的标志为 SPECIAL
    }
}

参考一下删除一个tab是怎么做的，是根据鼠标点击获取的index来delete，基于删除一个tab标签的操作，那么删除整个标签栏的操作自然也就很简单。我直接for循环delete所有，只剩下初始的那一个即可。

void tabbrowser::on_closeAllTab()
{
    for (int i = count(); i > 0; i--)
    {
        //删除指定索引的标签页的对应窗口部件
        widget(i)->deleteLater();
        setTabBarFlag(CLOSE); //设置标签栏的标志为 CLOSE
            //当只剩下1个tab时
        if (count() == 1)
        {
            setTabsClosable(false); //设置标签页为不可关闭状态
            setTabBarFlag(SPECIAL); //设置标签栏的标志为 SPECIAL
        }
    }
}

4、单击右键显示菜单

由于都是只创建菜单，大部分的具体实现都没做，所以还是很简单的，

//右键单击tab出现菜单栏
void tabbrowser::createTabMenu()
{
    m_pTabMenu = new QMenu(this);

    QAction* pAcSave = new QAction(QIcon(":/WPSDemo/resources/save.png"), u8"保存", m_pTabMenu);
    m_pTabMenu->addAction(pAcSave);

    connect(pAcSave, &QAction::triggered, [=] {
        QMessageBox::information(this, u8"提示", u8"你点击了 保存");
        }); //简单响应了一个保存的，其他的都还没做

    QAction* pAcSaveAs = new QAction(QString(u8"另存为"), m_pTabMenu);
    m_pTabMenu->addAction(pAcSaveAs);

    m_pTabMenu->addSeparator(); //这个是QAction之间的横线

    QAction* pAcShareDoc = new QAction(QIcon(":/WPSDemo/resources/share.png"), QString(u8"分享文档"), m_pTabMenu);
    m_pTabMenu->addAction(pAcShareDoc);

    QAction* pAcSendToDevice = new QAction(QString(u8"发送到设备"), m_pTabMenu);
    m_pTabMenu->addAction(pAcSendToDevice);

    m_pTabMenu->addSeparator();

    QAction* pAcNewName = new QAction(QString(u8"重命名"), m_pTabMenu);
    m_pTabMenu->addAction(pAcNewName);

    QAction* pAcSaveToWPSCloud = new QAction(QString(u8"保存到WPS云文档"), m_pTabMenu);
    m_pTabMenu->addAction(pAcSaveToWPSCloud);

    QAction* pAcCloseAll = new QAction(QString(u8"关闭所有文件"), m_pTabMenu);
    m_pTabMenu->addAction(pAcCloseAll);

    //删除所有和删除一个是差不多的
    connect(pAcCloseAll, &QAction::triggered, this, &tabbrowser::on_closeAllTab);
}

---

四、标题栏和tab标签的结合

负责标题栏右边的按钮实现，最后和tab结合，这个很简单的，看看代码，已经是很熟悉了，在这个类里不仅进行ui设计，还实现标题栏拖拽功能，绘图功能等。

#include "CTabTitleWidget.h"
#include <QHBoxLayout>
#include <QMouseEvent>
#include <QStyleOption>
#include <QPainter>

#ifdef Q_OS_WIN
#include <qt_windows.h>
#pragma comment(lib, "user32.lib")
#endif

CTabTitleWidget::CTabTitleWidget(QWidget* parent)
{
    setStyleSheet("background-color:#E3E4E7");
 m_pAddBtn = new QPushButton(this);
    m_pAddBtn->setFlat(true);
    m_pAddBtn->setFixedSize(32, 32);
    m_pAddBtn->setStyleSheet("background-image:url(:/WPSDemo/resources/add.svg)");

    m_pEmptyWidget = new QWidget(this);

    m_pUserBtn = new QPushButton(this);
    m_pUserBtn->setFlat(true);
    m_pUserBtn->setFixedSize(32, 32);
    m_pUserBtn->setStyleSheet("background-image:url(:/WPSDemo/resources/user)");

 m_pMinBtn = new QPushButton(this);
    m_pMinBtn->setFlat(true);
    m_pMinBtn->setFixedSize(32, 32);
    m_pMinBtn->setStyleSheet("background-image:url(:/WPSDemo/resources/min.svg)");

 m_pMaxBtn = new QPushButton(this);
    m_pMaxBtn->setFlat(true);
    m_pMaxBtn->setFixedSize(32, 32);
    m_pMaxBtn->setStyleSheet("background-image:url(:/WPSDemo/resources/max.svg)");

 m_pCloseBtn = new QPushButton(this);
    m_pCloseBtn->setFlat(true);
    m_pCloseBtn->setFixedSize(32, 32);
    m_pCloseBtn->setStyleSheet("background-image:url(:/WPSDemo/resources/close.svg)");

 QHBoxLayout* pHLay = new QHBoxLayout(this);
    pHLay->addWidget(m_pAddBtn);
    pHLay->addWidget(m_pEmptyWidget);
    this->setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Expanding);
    pHLay->addWidget(m_pUserBtn);
    pHLay->addSpacing(8);
    pHLay->addWidget(m_pMinBtn);
    pHLay->addWidget(m_pMaxBtn);
    pHLay->addWidget(m_pCloseBtn);
    pHLay->setContentsMargins(1, 0, 1, 3);
    setLayout(pHLay);

    connect(m_pAddBtn, &QPushButton::clicked, this, &CTabTitleWidget::on_Clicked);
    connect(m_pMinBtn, &QPushButton::clicked, this, &CTabTitleWidget::on_Clicked);
    connect(m_pMaxBtn, &QPushButton::clicked, this, &CTabTitleWidget::on_Clicked);
    connect(m_pCloseBtn, &QPushButton::clicked, this, &CTabTitleWidget::on_Clicked);
}

CTabTitleWidget::~CTabTitleWidget()
{
}

void CTabTitleWidget::setEmptyWidgetWidth(int w)
{
    m_pEmptyWidget->setMinimumWidth(w);
}

void CTabTitleWidget::paintEvent(QPaintEvent* event)
{
    QStyleOption opt;
    opt.init(this);
    QPainter p(this);
    style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
    QWidget::paintEvent(event);
}

void CTabTitleWidget::mousePressEvent(QMouseEvent* event)
{
    if (ReleaseCapture())
    {
        QWidget* pWindow = this->window();
        if (pWindow->isTopLevel())
        {
            SendMessage(HWND(pWindow->winId()), WM_SYSCOMMAND, SC_MOVE + HTCAPTION, 0);
        }
    }

    event->ignore();
}

void CTabTitleWidget::mouseDoubleClickEvent(QMouseEvent* event)
{
    emit m_pMaxBtn->clicked();
}

void CTabTitleWidget::on_Clicked()
{
    QPushButton* pButton = qobject_cast<QPushButton*>(sender());

    QWidget* pWindow = this->window();

    if (pWindow->isTopLevel())
    {
        if (pButton == m_pAddBtn)
        {
            emit sig_addtab();
        }
        else if (pButton == m_pMinBtn)
        {
            pWindow->showMinimized();
        }
        else if (pButton == m_pMaxBtn)
        {
            pWindow->isMaximized() ? pWindow->showNormal() : pWindow->showMaximized();
        }
        else if (pButton == m_pCloseBtn)
        {
            emit sig_close();
        }
    }
}

---

都看到这里了，点个赞再走呗朋友~

加油吧，预祝大家变得更强！