QGroupBox

基础实例

# -*- coding: UTF-8 -*-
import sys

from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import *
from report import testData
class QTabWidgetDemo(QTabWidget):
    def __init__(self):
        super(QTabWidgetDemo, self).__init__()

        # self.resize(400, 150)
        #设置窗口标题
        self.setWindowTitle("QTabWidgetDemo")

        #创建3个选项卡小控件窗口
        self.tab1 = QWidget()
        self.tab2 = QWidget()
        self.tab3 = QWidget()

        #将三个选项卡添加到顶层窗口中
        self.addTab(self.tab1, "Tab 1")
        self.addTab(self.tab2, "Tab 2")
        self.addTab(self.tab3, "Tab 3")

        #每个选项卡自定义的内容
        self.tab1UI()
        self.tab2UI()
        self.tab3UI()

        self.setFocusPolicy(Qt.ClickFocus)
        self.setTabPosition(QTabWidget.North)
        self.setTabShape(QTabWidget.Triangular)
        self.setElideMode(Qt.ElideRight)
        self.setUsesScrollButtons(True)
        self.setDocumentMode(True)
        self.setTabsClosable(True)
        self.setMovable(False)
        self.setTabBarAutoHide(False)

        self.tabCloseRequested.connect(self.tabClose)
        # self.setStyleSheet(u"QTabWidget>QWidget::pane{background-color:red}")

    def tab1UI(self):
        #表单布局
        # layout = QFormLayout()
        # #添加姓名，地址的单行文本输入框
        # layout.addRow('姓名',QLineEdit())
        # layout.addRow('地址',QLineEdit())
        # #设置选项卡的小标题与布局方式
        # self.setTabText(0,'联系方式')
        # self.tab1.setLayout(layout)
        w=testData.TableWidget()
        w.showFullScreen()
        w.setParent(self.tab1)


    def tab2UI(self):
        #zhu表单布局，次水平布局
        layout = QFormLayout()
        sex = QHBoxLayout()

        #水平布局添加单选按钮
        sex.addWidget(QRadioButton('男'))
        sex.addWidget(QRadioButton('女'))

        #表单布局添加控件
        layout.addRow(QLabel('性别'),sex)
        layout.addRow('生日',QLineEdit())

        #设置标题与布局
        self.setTabText(1,'个人详细信息')
        self.tab2.setLayout(layout)

    def tab3UI(self):
        w = testData.TableWidget()
        # w.resize(self.geometry().width(),self.sizeHint().height())
        w.showFullScreen()
        w.setParent(self.tab3)
    # 关闭
    def tabClose(self,index):
        if index>0:
            self.removeTab(index)

if  __name__ == '__main__':
    app = QApplication(sys.argv)
    app.setStyleSheet("""
    QTabWidget::pane { /* The tab widget frame */
    border-top: 2px solid #C2C7CB;
    position: absolute;
    top: -0.5em;
    margin-top:200px;
}
QTabBar::tab {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
    border: 2px solid #C4C4C3;
    border-bottom-color: #C2C7CB; /* same as the pane color */
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    min-width: 8ex;
    padding: 2px;
    background-color:red;}
    """)
    main = QTabWidgetDemo()
    main.showMaximized()
    sys.exit(app.exec_())

样式

QTabWidget::pane{
	/*背景*/
	border: none;
	background: transparent;
}
/*标签样式*/
QTabBar::tab{
	background-color: rgb(244, 242, 232);
	width: 25ex;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	padding: 5px;
}
QTabBar::tab:selected{
	/*选中样式*/
	background-color: rgb(168, 193, 221);
	font-weight:bold;
	color: rgb(0, 79, 115);
}
QTabBar::tab:hover{
	/*鼠标悬停*/
	background-color: rgb(226, 233, 240);
}
QTabWidget{background-color: rgb(168, 193, 221);} # 配置以下代码使用
ui.tabWidget.setAttribute(Qt.WA_StyledBackground)  # 背景色应用到tab标题右侧

样式说明

QTabWidget
    font（改变tab字体能撑大tab框）
QTabWidget::pane窗格
    border(和QWidget的border一样修改的是QWidget窗口边框）
    top（让tab上下移动）
QTabWidget::tab-bar(只能改tab的位置）
    alignment:center
    left
    right
    ......
QTabBar
    background（tab边框改色）
    font（改变tab字体能撑大tab框）
    border（border-color与background效果一致，谁先谁生效）
    
QTabBar::tab
    background（tab改色）
    border
    font（改变tab字体但不能撑大tab框）
    hight(改变tab窗高度）
    width（改变tab窗宽度）

QTabWidget::pane{								/*选定Tab组件的窗格*/
    border:none;								/*设置窗格的边框线条为无*/  
	top: -15px;} 								/*将窗格向下移*/
 
QTabWidget::tab-bar{							/*选中Tab组件的tab条*/
	alignment:center;}							/*定位居中*/
 
QWidget{										/*选中组件/*/
	background-color: rgb(225, 225, 225);}		/*设置组件整体背景颜色*/
 
 
QTabBar::tab:selected{							/*当Tab条的tab被选中*/
	background-color: rgb(85, 170, 255);}		/*改变被选中tab的颜色*/
 
 
QTabBar::tab{									/*选中Tab条的tab条*/
	background-color: rgb(255, 255, 255);		/*设置初始tab条颜色*/	
	border: none;								/*设置tab条的边框线条为无*/
	border-radius: 5px; 						/*设置tab条的边框倒角半径*/
	font-size:20px;								/*设置tab条文字大小*/
	height: 30px;								/*设置tab条高度*/
	width:100px;}								/*设置tab条宽度*/