QTabWidget当tab位置在左右时,设置文字方向朝上解决方案
- 方案一:调用setTabButton()方法
- 方案二:重写QTabBar
- 方案三:重写QProxyStyle
当用QTabWidget控件时,默认是下方显示:
如果想左侧或右侧显示tab页,显示效果是文字方向和tab方向一致,头也得扭歪了看tab文本:
因此,想实现左侧或右侧显示时,文字如下图所示,有三种解决方案
方案一:调用setTabButton()方法
查看帮助手册,发现QTabBar有setTabButton()方法
QLabel *tab1=new QLabel("tab1", this);
QLabel *tab2=new QLabel("tab2", this);
// 添加按钮,设置向上
ui->tabWidget->tabBar()->setTabButton(0, QTabBar::ButtonPosition::RightSide, tab1);
ui->tabWidget->tabBar()->setTabButton(1, QTabBar::ButtonPosition::RightSide, tab2);
// 设置高度
ui->tabWidget->tabBar()->tabButton(0,QTabBar::ButtonPosition::RightSide)->setFixedHeight(25);
ui->tabWidget->tabBar()->tabButton(1,QTabBar::ButtonPosition::RightSide)->setFixedHeight(25);
效果如下:
方案二:重写QTabBar
因为需要改变的是QTabBar,因此重写QTabBar可以实现该功能
.h文件
#ifndef TABWIDGET_H
#define TABWIDGET_H
#include <QTabWidget>
#include <QObject>
#include <QTabBar>
class CusTabBar : public QTabBar
{
Q_OBJECT
public:
explicit CusTabBar();
protected:
// tab尺寸
virtual QSize tabSizeHint(int index) const override;
// 重绘事件
virtual void paintEvent(QPaintEvent *) override;
};
class C_TabWidget : public QTabWidget
{
Q_OBJECT
public:
explicit C_TabWidget(QWidget *parent = nullptr);
signals:
public slots:
};
#endif // TABWIDGET_H
.cpp文件
#include "TabWidget.h"
#include <QStylePainter>
#include <QStyleOptionTab>
CusTabBar::CusTabBar()
{
}
QSize CusTabBar::tabSizeHint(int index) const
{
QSize size = QTabBar::tabSizeHint(index);
size.transpose();
return size;
}
void CusTabBar::paintEvent(QPaintEvent *)
{
QStylePainter painter(this);
QStyleOptionTab opt;
for(int i = 0;i < count();i++)
{
initStyleOption(&opt, i);
painter.drawControl(QStyle::CE_TabBarTabShape, opt);
painter.save();
QSize size = opt.rect.size();
size.transpose();
QRect rect(QPoint(), size);
rect.moveCenter(opt.rect.center());
opt.rect = rect;
QPoint point = tabRect(i).center();
painter.translate(point);
// west
painter.rotate(90);
painter.translate(-point);
painter.drawControl(QStyle::CE_TabBarTabLabel, opt);
painter.restore();
}
}
C_TabWidget::C_TabWidget(QWidget *parent) : QTabWidget(parent)
{
this->setTabBar(new CusTabBar());
}
效果如下:
方案三:重写QProxyStyle
QTabBartabBar()->setStyle()需要参数类型:QStyle
.h文件
#include <QPainter>
#include <QProxyStyle>
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();
// 设置每个tabBar中item的大小
s.rwidth() = 50;
s.rheight() = 35;
}
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;
if (tab->state & QStyle::State_Selected) {
painter->save();
painter->setPen(Qt::white);
painter->setBrush(QBrush(Qt::white));
painter->drawRect(allRect.adjusted(1, 1, 0, -1));
painter->restore();
}else{
painter->save();
painter->setPen(0xdddddd);
painter->setBrush(QBrush(0xdddddd));
painter->drawRect(allRect.adjusted(1, 1, 0, -1));
painter->restore();
}
QTextOption option;
option.setAlignment(Qt::AlignCenter);
// if (tab->state & QStyle::State_Selected) {
// painter->setPen(Qt::red);
// }
// else {
// painter->setPen(Qt::blue);
// }
painter->drawText(allRect, tab->text, option);
return;
}
}
if (element == CE_TabBarTab) {
QProxyStyle::drawControl(element, option, painter, widget);
}
}
};
.cpp文件
QTabBar* tabBar = ui->tabWidget->tabBar();
tabBar->setStyle(new CustomTabStyle());
效果如下: