【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"稻壳");  //定义最开始的tabthis->setUsesScrollButtons(true);  //滚动鼠标可切换tabthis->setTabsClosable(true);       //显示tab右侧的关闭按钮this->setMovable(true);            //tab可移动位置initTabWidget(); //初始化tabsetTabBarFlag(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" 后接当前标签页数量的字符串// 这里写的有问题，应该是 insertTabthis->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")
#endifCTabTitleWidget::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();}}
}

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

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