QTabWidet设置不同Position，tabBar文字均水平显示

设置QTabWidget在不同方向上的文字均水平显示。有两种方法，如下：

1、设置不同Position，tabBar文字均水平显示

QTabWidget设置在设置Position为East或者West时，文字方向默认会从下到上显示。先通过以下方法实现tabBar更改方向，但文字始终垂直显示。

方法1：通过继承QTabWidget来实现

用到函数：

void setTabButton(int index,ButtonPosition position,QWidget *widget);//给tabBar添加控件

QWidget *tabButton(int index,ButtonPosition) const;                             //获取tab上添加的控件

 

tabWidget头文件

#ifndef TABWIDGET_H
#define TABWIDGET_H
#include<QTableWidget>
#include<QLabel>
class tabWidget : public QTabWidget
{
    Q_OBJECT
public:
    explicit tabWidget(QWidget *parent = nullptr);

    void updateselect();                          //用来设置一开始选中的状态
    int addTab(QWidget *widget, const QString &); //重载(不是虚函数)

signals:

public slots:
    void slotSetLabelColor(int color);            //自定义槽(响应tabBar点击事件)
};

#endif // TABWIDGET_H

tabWidget cpp文件

#include "tabwidget.h"


tabWidget::tabWidget(QWidget *parent) : QTabWidget(parent)
{

    connect(this,SIGNAL(tabBarClicked(int)),this,SLOT(slotSetLabelColor(int)));

}

void tabWidget::slotSetLabelColor(int index)
{
    for(int i=0;i<this->count();i++)
    {
        this->tabBar()->tabButton(i,QTabBar::ButtonPosition::RightSide)->setStyleSheet("background-color:rgba(0,0,0,0);");
    }
    this->tabBar()->tabButton(index,QTabBar::ButtonPosition::RightSide)->setStyleSheet("background-color:rgba(0,0,0,0);color:white;");

}

int tabWidget::addTab(QWidget *widget, const QString &label)
{
    int nRetrun=QTabWidget::addTab(widget,"");
    int count=this->count()-1;
    QLabel *labelTab=new QLabel(label,this);
    QFont ft;
    ft.setPointSize(20);
    labelTab->setFont(ft);
    labelTab->setAlignment(Qt::AlignCenter);
    this->tabBar()->setTabButton(count,QTabBar::ButtonPosition::RightSide,labelTab);
    this->tabBar()->tabButton(count,QTabBar::ButtonPosition::RightSide)->setFixedHeight(64);
    updateselect();
    return nRetrun;

}

void tabWidget::updateselect()
{
    for(int i=0;i<this->currentIndex();i++)
    {
        this->tabBar()->tabButton(i,QTabBar::ButtonPosition::RightSide)->setStyleSheet("background-color:rgba(0,0,0,0);color:black;");
    }
    this->tabBar()->tabButton(this->currentIndex(),QTabBar::ButtonPosition::RightSide)->setStyleSheet("background-color:rgba(0,0,0,0);color:white;");

}

mainWindow  cpp

#pragma execution_character_set("utf-8")
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include"tabwidget.h"
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    tabWidget *m_tab=new tabWidget(this);
    QWidget *b1=new QWidget();
    QWidget *b2=new QWidget();

    m_tab->setGeometry(0,0,500,400);
    m_tab->setStyleSheet("QTabBar::tab{min-width:140px;max-width:140px;min-height:64px;max-height:64px;padding:0;}"
                     "QTabBar::tab:selected{background:#025bc7}");
    //设置tabwidget位置  更改位置
    m_tab->setTabPosition(QTabWidget::TabPosition::South);
    
    if((m_tab->tabPosition()==QTabWidget::TabPosition::South)||
            (m_tab->tabPosition()==QTabWidget::TabPosition::North))
        m_tab->setLayoutDirection(Qt::LeftToRight);//LeftToRight
    else//东西方向的layoutDirection
    {
         m_tab->setLayoutDirection(Qt::RightToLeft);//RightToLeft
    }
    m_tab->addTab(b1,"one");
    m_tab->addTab(b2,"two");
}

MainWindow::~MainWindow()
{
    delete ui;
}

参考博客：https://blog.csdn.net/skyztttt/article/details/52448992 

方法2： 重绘代码

#ifndef CUSTOMTABSTYLE_H
#define CUSTOMTABSTYLE_H
#include <QPainter>
#include <QProxyStyle>
#include <QStyleOptionTab>
#include <QRect>
#include <QSize>
class CustomTabStyle : public QProxyStyle
{
public:
    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() = 150; // 设置每个tabBar中item的大小
            s.rheight() = 50;
        }
        return s;
    }
    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;
                allRect.setWidth(allRect.width() - 5);
                allRect.setHeight(allRect.height() - 2);
                //选中状态
                if (tab->state & QStyle::State_Selected) {
                    //save用以保护坐标，restore用来退出状态
                    painter->save();
                    painter->setBrush(QBrush(0x004ea1));
                    //矩形
                    //painter->drawRect(allRect.adjusted(0, 0, 0, 0));
                    //带有弧线矩形
                    painter->drawRoundedRect(tab->rect, 8, 8);
                    painter->restore();
                }
                //hover状态
                else if(tab->state & QStyle::State_MouseOver){
                    painter->save();
                    painter->setBrush(QBrush(0x004ea1));
                    painter->drawRoundedRect(allRect, 8, 8);
                    painter->restore();
                }
                else{
                    painter->save();
                    painter->setBrush(QBrush(0x78aadc));
                    painter->drawRoundedRect(allRect, 8, 8);
                    painter->restore();
                }
                QTextOption option;
                option.setAlignment(Qt::AlignCenter);
                painter->setFont(QFont("楷体", 18, QFont::Bold));
                painter->setPen(0xffffff);
                painter->drawText(allRect, tab->text, option);
                return;
            }
        }
        if (element == CE_TabBarTab) {
            QProxyStyle::drawControl(element, option, painter, widget);
        }
    }
};

tab->tabBar()->setStyle(new CustomTabStyle);//注意，设置上述代码风格 就可以实现QTabBar横向

此方法更适合已经存在的QTabWidget编辑好tab里面的内容。

注意：

1.如果east和west时候，显示不完，出现...，需要设置elidemode为ElideNone。

2.不能通过样式表设置QTabBar::tab的样式。

参考博客：https://blog.csdn.net/wojiaoanchao/article/details/78911891 

 3.分享一套代码，如下图：

代码链接：https://download.csdn.net/download/weixin_41882459/12774054