先上效果图:
主界面效果图
展示动图
一、利用QProxyStyle改变tabBar位置并改变文字方向:
继承QProxyStyle自定义类CustomTabStyle
#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();
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<const QStyleOptionTab *>(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
参考: