QTabWidget

QTabWidget

直接显示

// 记住添加头文件
#include "qlabel.h"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QTabWidget tabWidget;
    QLabel label1("1");
    QLabel label2("2");

    tabWidget.addTab(&label1,"page1");
    tabWidget.addTab(&label2, "page2");
    tabWidget.setTabPosition(QTabWidget::West);
    tabWidget.show();
    return a.exec();
}

显示效果

作为控件添加到主窗口中

• 这里是希望把窗口分解为多个源文件实现。而不修改main.cpp

// file tabtest.h
#pragma once

#include <QtWidgets/QMainWindow>
#include "ui_tabtest.h"
#include "dlg1.h"
class tabtest : public QMainWindow
{
    Q_OBJECT

public:
    tabtest(QWidget *parent = Q_NULLPTR);

private:
    Ui::tabtestClass ui;
    dlg1* dlg; // 这是另外实现的窗口
    QTabWidget* tabWidget;
};


// file tabtest.cpp
tabtest::tabtest(QWidget *parent)
    : QMainWindow(parent)
{
    ui.setupUi(this);
    tabWidget = new QTabWidget(this); // 构造函数传this即会将控件嵌入到窗口
    dlg = new dlg1();
    QLabel *label = new QLabel();
    label->setText(u8"测试1");
    tabWidget->addTab(dlg, u8"页面1");
    tabWidget->addTab(label, u8"页面2");
    tabWidget->setTabPosition(QTabWidget::West);
    tabWidget->setGeometry(QRect(0, 0, width(), height()));
}

文字横向显示

• 需要设置QProxyStyle风格样式，新建一个样式头文件

// file CustomTabStyle.h

#pragma once

#include <QPainter>
#include <QProxyStyle>
#include <QStyleOption>

class CustomTabStyle : public QProxyStyle
{
public:
    /* sizeFromContents
    *  用于设置Tab标签大小
    * 1.获取原标签大小
    * 2.宽高切换
    * 3.强制宽高
    * 4.return
    * */
    QSize sizeFromContents(ContentsType type, const QStyleOption *option,
        const QSize &size, const QWidget *widget) const
    {
        QSize s = QProxyStyle::sizeFromContents(type, option, size, widget);
        if (type == QStyle::CT_TabBarTab) {
            s.transpose();
            s.rwidth() = 90; // 设置每个tabBar中item的大小
            s.rheight() = 44;
        }
        return s;
    }

    /* drawControl
    *  画控件
    * 1.过滤CE_TabBarTabLabel
    * 2.选择状态下的背景绘制
    *      a.获取Rect
    *      b.保存旧的画笔
    *      c.设置新画笔
    *      d.画 Rect
    *      e.恢复旧的画笔
    * 3.设定Text对齐及选中/非选中状态下的Text颜色
    * 4.过滤CE_TabBarTab，对其进行绘制
    * */
    void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget) const
    {
        if (element == CE_TabBarTabLabel) {
            if (const QStyleOptionTab *tab = qstyleoption_cast<const QStyleOptionTab *>(option)) {
                QRect allRect = tab->rect;

                if (tab->state & QStyle::State_Selected) {
                    painter->save();
                    painter->setPen(0x89cfff);
                    painter->setBrush(QBrush(0x89cfff));
                    painter->drawRect(allRect.adjusted(6, 6, -6, -6));
                    painter->restore();
                }
                QTextOption option;
                option.setAlignment(Qt::AlignCenter);
                if (tab->state & QStyle::State_Selected) {
                    painter->setPen(0xf8fcff);
                }
                else {
                    painter->setPen(0x5d5d5d);
                }

                painter->drawText(allRect, tab->text, option);
                return;
            }
        }

        if (element == CE_TabBarTab) {
            QProxyStyle::drawControl(element, option, painter, widget);
        }
    }
};

• 再直接设置即可

// file tabtest.cpp
tabtest::tabtest(QWidget *parent)
    : QMainWindow(parent)
{
    ui.setupUi(this);
    tabWidget = new QTabWidget(this);
    dlg = new dlg1();
    QLabel *label = new QLabel();
    label->setText(u8"测试1");
    tabWidget->addTab(dlg, u8"页面1");
    tabWidget->addTab(label, u8"页面2");
    tabWidget->setTabPosition(QTabWidget::West);
    tabWidget->setGeometry(QRect(0, 0, width(), height()));
    tabWidget->tabBar()->setStyle(new CustomTabStyle); // 添加此行
}

显示效果

其他常用操作

tab->insertTab(0, dlg, u8"页面1"); // 插入tab到索引为0的位置
tab->removeTab(2); // 移除索引为2的tab
tab->setCurrentIndex(2); // 跳转到索引为2的tab