GUI编程--PyQt5--QTabWidget

组件使用

import sys
# PyQt5 也可替换为PySide2
from PyQt5.QtWidgets import QTabWidget, QTabBar, QWidget, QApplication, QDesktopWidget, QVBoxLayout, QLabel
from PyQt5.QtGui import QIcon, QFont


class Window(QWidget):
    def __init__(self, title):
        super(Window, self).__init__()
        self.setWindowTitle(title)
        icon = QIcon("./s2.webp")
        self.setWindowIcon(icon)

        desk = QDesktopWidget()
        d_w, d_h = desk.width(), desk.height()

        self.resize(500, 400)
        # centered
        self.move(d_w//2 - self.width()//2, d_h//2 - self.height()//2)

        #
        self.set_ui()


    def set_ui(self):
        self.vb = QVBoxLayout(self)
        self.tab_widget = QTabWidget(self)
        self.vb.addWidget(self.tab_widget)

        # 添加tab页签
        tab1 = QTabBar(self.tab_widget) # QWidget对象也可
        tab2 = QTabBar(self.tab_widget)
        self.tab_widget.addTab(tab1, "firstTab") # QTabBar, str
        icon = QIcon("./s2.webp")
        self.tab_widget.addTab(tab2, icon, "secondTab") # QTabBar, QIcon, str


if __name__ == '__main__':
    app = QApplication(sys.argv)
    win = Window("laufing")
    win.show()

    # 消息循环
    exit_code = app.exec_()
    sys.exit(exit_code)

QTabWidget 页签及界面：

信号

self._ui = Ui_Sub() # Ui_Sub是qt designer 设计的界面
self._ui.setupUi(parent) # 
# 切换tab页
self._ui.tabWidget.currentChanged.connect(self.tab_slot)

def tab_slot(self):
   cur_index = self._ui.tabWidget.currentIndex()
   tab_name = self._ui.tabWidget.tabText(cur_index)
   print("current tab:", tab_name)

样式设置

QTabBar
{
border: 1px solid blue;
background: #1c1c1e;
margin:0 0 5px 0;
padding: 2px;
}

 

QTabBar::tab:selected{
    width:100px;
    height: 40px;
    border: 1px dashed red;
    background: #eee;
    border-top-left-radius: 10px;
    margin: 0;
    padding: 1px;
}

QTabBar::tab:!selected{
	font-size: 16px;
	font-weight: 200;
	font-family: "xxx";
	color: black;
}

QTabBar::tab:hover{
	background-color: #aaa;
}

 

QTabWidget::pane{
    background-color: lightblue;
    border: 5px dashed red;
}

 
其他

QTabBar QToolButton::right-arrow
{
background-color:#1c1c1e;
border:none;
image:url();
}

QTabBar QToolButton::right-arrow:hover
{
background-color:#1c1c1e;
border:none;
image:url();
}

QTabBar QToolButton::right-arrow:pressed
{
background-color:#1c1c1e;
border:none;
image:url();
}

QTabBar QToolButton::right-arrow:disabled
{
background-color:#1c1c1e;
border:none;
image:url();
}

QTabBar QToolButton::left-arrow
{
background-color:#1c1c1e;
border:none;
image:url();
}

QTabBar QToolButton::left-arrow:disabled
{
background-color:#1c1c1e;
border:none;
image:url();
}

QTabBar QToolButton::left-arrow:hover
{
background-color:#1c1c1e;
border:none;
image:url();
}

QTabBar QToolButton::left-arrow:pressed
{
background-color:#1c1c1e;
border:none;
image:url();
}