Qt-改变tabBar位置并改变文字方向

浏览量 3

QTabWidget默认tab页标题（tabBar）在上面，但是有时候我们需要改变它的位置，比如做一个设置页面，想将它放到左边显示，这个比较简单，只需要设置一个属性即可实现：tabPosition:west，但是我们发现它文字的方向是没有改变的，这样完全没有使用体验，所以我们需要改变文字的方向。

为了改变文字的方向，我们需要自定义tabBar的样式，QProxyStyle这个类就可以帮助我们实现，QProxyStyle覆盖QStyle（默认的系统样式），用于动态覆盖绘图或其他特定的样式行为。如果想要实现自定义样式，需要自己定义一个类，派生QProxyStyle，实现对应的虚函数。

实现代码

1.创建界面及对应的头文件和源文件，在项目里头新建界面，比如setting，新建成功我们得到setting.h，setting.ui，setting.cpp这三个文件，然后界面添加标签页控件。

2.编写对应的代码

代码语言：javascript复制

//setting.h
#ifndef SETTING_H
#define SETTING_H

#include <QWidget>
#include <QProxyStyle>
#include <QStyleOptionTab>
#include <QPainter>

namespace Ui {
class Setting;
}

class Setting : public QWidget
{
    Q_OBJECT

public:
    explicit Setting(QWidget *parent = nullptr);
    ~Setting();

private:
    Ui::Setting *ui;
};

//自定义tabbar的样式
class CustomTabStyle:public QProxyStyle{
public:
    CustomTabStyle(){}
    QSize sizeFromContents(ContentsType type, const QStyleOption *option, const QSize &size, const QWidget *widget) const;
    void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget) const;
};
#endif // SETTING_H

代码语言：javascript复制

//setting.cpp
#include "setting.h"
#include "ui_setting.h"

Setting::Setting(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Setting)
{
    ui->setupUi(this);
    ui->tabWidget->tabBar()->setStyle(new CustomTabStyle);
}

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

QSize CustomTabStyle::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.transposed();
        s.rwidth()=100;
        s.rheight()=50;
    }
    return s;
}
void CustomTabStyle::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(0x000001);
            }
            painter->drawText(allRect,tab->text,option);
            return ;
        }
    }
    if(element==CE_TabBarTab){
        QProxyStyle::drawControl(element,option,painter,widget);
    }
}

3.效果预览

参考资料

QTabWidget 改变tabBar位置 并改变文字方向_skyztttt的专栏-CSDN博客

sdn tabbar ui

0 人点赞