最详细的QTabWidget的样式设置

潇宝丫

已于 2023-05-23 09:38:24 修改

阅读量1.9w

点赞数 20

分类专栏： pyqt 文章标签： python qt5

于 2022-12-28 10:26:05 首次发布

本文链接：https://blog.csdn.net/weixin_45699595/article/details/128463965

版权

pyqt 专栏收录该内容

4 篇文章 3 订阅

订阅专栏

一、 QTabWidget简介

QTabWidget提供一个“选项卡栏”和一个“页面区域”，用于显示与每个选项卡相关的页面。默认情况下，选项卡栏显示在页面区域上方，但可以设置TabPosition。每个选项卡都与不同的Widget（称为页面）相关联。页面区域只显示当前页面；所有其他页面都被隐藏。

样式表中涉及的：

1、QTabBar：QTabWidget的选项卡栏

2、 #tab_1.QWidget：QTabWidget中变量名为tab_1的页面（可以从Qt designer对象查看器里看到QTabWidget下面有QWidget，指的就是与每个选项卡相关的页面）；在样式表中用“#”指定对象

二、QTabWidget应用样式后的效果图：

（上图将mainwindow的背景色设置成黑色了）

三、详细的样式设置代码

/*设置TabWidget中tab_1的样式*/
#tab_1.QWidget{
	background-color: rgb(108, 117, 125, 65);
}

/*设置TabWidget中tab_2的样式*/
#tab_2.QWidget{
	background-color: rgb(108, 117, 125, 65);
}

/*设置TabWidget中QTabBar的样式*/
QTabBar::tab{
    background-color: #0B0E11;
	font-family:Consolas;    /*设置tab中的文本的字体*/
	font-size:8pt;
	color:#ced4da;    /*设置tab中的文本的颜色*/
	border-top-left-radius: 5px;    /*设置tab的边框的圆角（左上圆角）*/
	border-top-right-radius: 5px;    /*设置tab的边框的圆角（右上圆角）*/
	min-width: 8px;
	padding: 5px;
}

/*设置TabWidget中QTabBar的tab被选中时的样式*/
QTabBar::tab:selected{
    background-color: rgb(108, 117, 125, 65);
}

/*设置TabWidget中鼠标悬浮在QTabBar的tab上，但未选中该Tab的样式*/
QTabBar::tab:hover:!selected {
    background-color: rgb(108, 117, 125, 45);
}

/*设置TabWidget的边框的样式*/
QTabWidget::pane {
    border: 1px solid rgb(108, 117, 125, 65);
}

/*当打开多个tab，右侧出现，点击后，可以向前向后的按钮的样式*/
QTabBar QToolButton {
    border: none;
	color: rgb(255, 206, 6);
    background-color: #0b0e11;
}

QTabBar QToolButton:hover {
	background-color: #161a1e; 
}