QT界面美化之QTabWidget

先上效果图：

主界面效果图

展示动图

一、利用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{//设置labif (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

参考：

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

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

QT界面美化之QTabWidget相关推荐

Qt界面美化自定义边框之QMainWindow边框
问题的来源是别人已经写好了一个项目需要界面美化,项目初期构建的时候没有考虑好,最底层的窗口是QMainWindow,由于QMainWindow含有QToolBar和QMenu,在自定义边框的时候无法使 ...
Qt界面美化 QSS
目前发现在Qt-Design中右击控件,可以选择Change StyleSheet ------------------------以下总结不太对刚接触Qt,发现Qt Design无法对每个控件进行 ...
1.3 QT界面美化
文章目录给窗口设置一个外框去除边框将按钮设置地更圆润+设置颜色增加小竖线表格的美化树表的美化 ui美化文件---------------- QCombox美化 [注:] 给窗口设置一个外框 ...
Qt界面美化-飞扬青云自绘控件插件的使用-避免采坑
1.先上一个集成到QtCreater中的效果图: 2.飞扬青云自绘控件插件下载地址:https://gitcode.net/mirrors/feiyangqingyun/qucsdk?utm_sour ...
PyQt自定义标题栏（界面美化，附C++和Python源码）
文章目录 1. 简述 2.代码说明 (1)主窗口 (2)标题栏 (3)完整代码 (4)美化(QSS) 3.源代码链接 1. 简述这几天给老师做项目用到了PyQt5,说一些自己的想法,用pytho ...
qt 串口助手界面美化
一.最终预览二.添加资源文件添加样式表css 三.初始化.引入样式表 ui->setupUi(this);//初始化样式表 this->initStyle();/*** @brief ...
通过加载 QSS 文件的方式美化 QT 界面
通过加载 QSS 文件的方式美化 QT 界面 1 配置工程在进行配置之前,建议先在工程的根目录下新建一个 .qss 文件,方便后面的添加 1.打开目标工程,选中此工程,鼠标右键单击 Add New ...
Qt UI界面美化教程1：【“飞扬青云” Qt精美控件】使用教程1
文章目录前言控件预览 1. 控件下载 2. sdkdemo演示: 2.2 工程预览: 2.2 sdkdemo演示 3. 为QtDesigner安装控件 3.1 我们先为MSVC2017_32bit ...
【Qt编程】基于Qt的词典开发系列六--界面美化设计
本文讲一讲界面设计,作品要面向用户,界面设计的好坏直接影响到用户的体验.现在的窗口设计基本都是扁平化的,你可以从window XP与window 8的窗口可以明显感觉出来.当然除了窗口本身的效果,窗口 ...

QT界面美化之QTabWidget

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

二、修改背景色：

QT界面美化之QTabWidget相关推荐

最新文章

热门文章