QT界面美化之QTabWidget

先上效果图：

              主界面效果图

  展示动图     

   一、利用QProxyStyle改变tabBar位置并改变文字方向：

继承QProxyStyle自定义类CustomTabStyle 

#include 
#include 

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() = 90; // 设置每个tabBar中item的大小
            s.rheight() = 44;
        }
        return s;
    }

    void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget) const
    {
        //设置lab
        if (element == CE_TabBarTabLabel) {
            if (const QStyleOptionTab *tab = qstyleoption_cast(option)) {
                QRect allRect = tab->rect;
                //选中状态
                if (tab->state & QStyle::State_Selected) {
                    painter->save();
                    painter->setPen(0xffffff);
                    painter->setBrush(QBrush(0xffffff));
                    //painter->drawRect(allRect.adjusted(6, 6, -6, -6));
                    painter->drawRect(allRect.adjusted(0, 0, 0, 0));
                    painter->restore();
                }
                //hover状态 鼠标移动状态
                else if (tab->state & QStyle::State_MouseOver) {
                    painter->save();
                    painter->setPen(0xECECEC);//画框
                    painter->setBrush(QBrush(0xECECEC));
                    painter->drawRect(allRect.adjusted(0, 0, 0, 0));
                    painter->restore();
                } else {
                    painter->setPen(0x33CCFF);
                }
                //字体
                QTextOption option;
                option.setAlignment(Qt::AlignCenter);
                painter->setFont(QFont("楷体", 12, QFont::Bold));
                painter->setPen(0x0A0A0A);
                painter->drawText(allRect, tab->text, option);
                return;
            }
        }
        if (element == CE_TabBarTab) {
            QProxyStyle::drawControl(element, option, painter, widget);
        }
    }
};

使用

    ui->tabWidget->setTabPosition(QTabWidget::West);
    ui->tabWidget->tabBar()->setStyle(new CustomTabStyle);

二、修改背景色：

首先我们需要知道QTabWidget结构：

//（1）QTabWidget显示区域的属性设置

QTabWidget::pane {
border-top: 1px solid #E5E5E5;
border-left:1px solid #E5E5E5;
position: absolute;
font-size: 14px;
background-color:#FFFFFF;
}

//（2）QTabWidget 选择项的属性设置
QTabBar::tab {
border: none;
border-bottom-color: #FFFFFF; /* same as the pane color */
border-top-left-radius: 4px;
border-top-right-radius: 4px;
min-width: 8ex;
padding: 2px;
font-size: 14px;
background-color:#FFFFFF;
}
QTabBar::tab:selected, QTabBar::tab:hover {
background-color:#FFFFFF;//选中背景色
}
QTabBar::tab:selected {
color:#2080F7;//选中颜色
border-bottom: 2px solid #2080F7;
font-weight:bold;
background-color:#FFFFFF;
}

//（3）QTabWidget 头部属性设置
QTabWidget::tab-bar {
border-top: 2px solid #E5E5E5;
border-bottom: 2px solid #E5E5E5;
border-left:1px solid #E5E5E5;
alignment: center;//居中显示
font-size: 14px;
background-color:#FFFFFF;
}

认真看文章，可以根据上面的内容设计出我开始放出的界面效果，也可以直接下载我的项目工程。传送门（缺积分。。）：https://download.csdn.net/download/qq_42570058/19846596

参考：

https://www.cnblogs.com/bclshuai/p/11933912.html

https://blog.csdn.net/skyztttt/article/details/52448992