一、 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;
}