当前位置:   article > 正文

QTabWidget当tab位置在左右时,设置文字方向朝上_qt标签tabwidget标签在左侧

qt标签tabwidget标签在左侧

当用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);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

效果如下:
在这里插入图片描述

方案二:重写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
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

.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());
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46

效果如下:
在这里插入图片描述

方案三:重写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);
        }
    }
};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57

.cpp文件

QTabBar* tabBar = ui->tabWidget->tabBar();
tabBar->setStyle(new CustomTabStyle());
  • 1
  • 2

效果如下:
在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/613528
推荐阅读
相关标签
  

闽ICP备14008679号