PySide6之QTabWidget控件的使用案例

学习《PySide6/PyQt6快速开发与实践》中关于QTabWidget控件的使用案例代码，通过对代码进行注释，来学习Python及PySide6。

选项卡小部件提供了一个选项卡栏（QTabBar，用来切换页面），及一个页面区域（QWidget，用来显示与选项卡相关的页面）。每个选项卡都匹配的相关页面，页面区域只显示当前页面，隐藏其他页面。用户可以通过单击选项卡（或设置的快捷键）来显示不同的页面。

使用QTabWidget的常用方法是执行一下操作:

（1）创建一个QTabWidget实例

（2）为选项卡对话框中的每个页面创建一个QWidget，不要为它们指定父类，及括号中为空。

（3）将小部件添加到QWidget页面中，并先用布局管理器接管。

（4）调用addTab()函数或者insertTab()函数将QWidget页面放入选项卡控件中。

代码如下：

# 创建一个选项卡控件
self.tabWidget = QTabWidget(self)

# 创建3个页面控件对象，不要指定父类
self.tab1 = QWidget()
self.tab2 = QWidget()
self.tab3 = QWidget()

# 把3个页面控件对象添加或插入到选项卡控件中
self.tabWidget.addTab(self.tab1, "页面一")
self.tabWidget.insertTab(1,self.tab2, "页面二") # 使用插入函数
self.tabWidget.addTab(self.tab3, "页面三")

选项卡QTabBar的相关操作：

每个选项卡都有一个tabText()函数、一个可选的tabIcon()函数、一个可选的tabToolTip()函数、一个可选的tabWhatsThis()函数和tabData()函数。选项卡的属性可以通过函数setTabText(),setTabIcon(),setTabToolTip()等函数进行设置改变。

（1）选项卡的位置由tabPosition定义，形状由tabShape定义，在默认的情况下，标签栏显示在页面区域的上方，可以使用setTabPositiong()函数设置不同的配置，可选参数：

QTabWidget.North   --- 选项卡绘制在页面的上方

QTabWidget.South   ---选项卡绘制在页面的下方

QTabWidget.West    ---  左侧

QTabWidget.East     ---  右侧

（2）在默认情况下，选项卡的形状是圆形外观，可以使用setTabShape()函数设置其它形状，两个可选参数：

QTabWidget.Rounded   ---圆形，默认

QTabWidgetTriangular  ---三角形

（3）可以使用addTab()函数将QWidget页面添加到末尾，或者使用insertTab()函数在特定的位置插入页面，使用removeTab()函数删除页面，使用count()函数返回选项卡（页面）的个数。

（4）当前页面索引可以使用currentIndex()函数表示，当前widget页面使用currentWidget()的函数表示。widget(index:int)返回特定索引的页面，indexOf(widget:QWidget)返回特定页面的索引位置。使用setCurrentWidget()函数或setCurrentIndex()函数可以显示特定的页面。

（5）信号与槽：当用户选择一个页面时发射currentChanged信号，代码如下：

self.tabWidget.currentChanged.connect(self.tabChanged)


def tabChanged(self, index:int):
    a = self.tabWidget.currentWidget()
    text = self.tabWidget.tabBar().tabText(index)
    self.label.setText(f'切换到页面{index},{text}')

完整代码如下（在PyCharm中运行无误）。

import sys
from PySide6.QtCore import *
from PySide6.QtGui import *
from PySide6.QtWidgets import *

import os
os.chdir(os.path.dirname(__file__))

class TabDemo(QWidget):
    def __init__(self, parent=None):
        super(TabDemo, self).__init__(parent)

        self.tabWidget = QTabWidget(self)
        # 修改选项卡默认信息,设置标签页在下面，默认在上面
        # QTabWidget.North(上面），QTabWidget.West(左侧），QTabWidget.East(右侧）
        self.tabWidget.setTabPosition(QTabWidget.North)
        # 修改选项卡默认信息,设置选项卡的形状为三角形，默认圆形
        self.tabWidget.setTabShape(QTabWidget.Triangular)

        # 创建3个选项卡对象，是QWidget类的实例
        self.tab1 = QWidget()
        self.tab2 = QWidget()
        self.tab3 = QWidget()

        # 把3个选项卡对象添加到QTabWidget控件中
        self.tabWidget.addTab(self.tab1, "选项卡一")
        self.tabWidget.insertTab(1, self.tab2, "选项卡二")
        self.tabWidget.addTab(self.tab3, "选项卡三")

        # 调用写的函数对选项卡进行设置
        self.tab1Init()
        self.tab2Init()
        self.tab3Init()

        pageComboBox = QComboBox()
        pageComboBox.addItem("跳转到选项卡一")
        pageComboBox.addItem("跳转到选项卡二")
        pageComboBox.addItem("跳转到选项卡三")
        # 导航与页面链接
        pageComboBox.activated.connect(self.tabWidget.setCurrentIndex)

        vlayout =QVBoxLayout(self)
        self.label = QLabel('用来显示其它控件改变的信息')
        vlayout.addWidget(pageComboBox)
        vlayout.addWidget(self.label)
        vlayout.addWidget(self.tabWidget)
        self.setLayout(vlayout)

        self.setWindowTitle("QTabWidget 例子")
        self.resize(400,200)

        self.tabWidget.currentChanged.connect(self.tabChanged)

    def tab1Init(self):
        layout = QFormLayout()
        line1 = QLineEdit()
        line2 = QLineEdit()
        layout.addRow("姓名", line1)
        layout.addRow("电话", line2)
        self.tab1.setLayout(layout)
        self.tabWidget.setTabText(0, "联系方式")
        line1.editingFinished.connect(lambda :self.label.setText(f'选项卡一，更新了姓名：{line1.text()}'))
        line2.editingFinished.connect(lambda :self.label.setText(f'选项卡一，更新了电话：{line2.text()}'))


    def tab2Init(self):
        layout = QFormLayout()
        sex = QHBoxLayout()
        radio1 = QRadioButton("男")
        radio2 = QRadioButton("女")
        sex.addWidget(radio1)
        sex.addWidget(radio2)
        layout.addRow(QLabel("性别"), sex)
        line = QLineEdit()
        layout.addRow("教育程度", line)
        self.tab2.setLayout(layout)
        self.tabWidget.setTabText(1, "个人信息")
        self.tabWidget.setTabToolTip(1,'更新：个人信息')
        self.tabWidget.setTabIcon(1,QIcon(r'images/cartoon1.ico'))
        self.tabWidget.tabBar().setTabTextColor(1, QColor(40,120,120))

        radio1.clicked.connect(lambda:self.label.setText('选项卡一更新了性别:男'))
        radio2.clicked.connect(lambda:self.label.setText('选项卡一更新了性别:女'))
        line.editingFinished.connect(lambda :self.label.setText(f'选项卡一更新了教育程度：{line.text()}'))

    def tab3Init(self):
        layout = QHBoxLayout()
        check1 = QCheckBox('一等奖')
        check2 = QCheckBox('二等奖')
        check3 = QCheckBox('三等奖')
        layout.addWidget(check1)
        layout.addWidget(check2)
        layout.addWidget(check3)
        self.tab3.setLayout(layout)
        self.tabWidget.setTabText(2, "获奖情况")
        self.tabWidget.setTabToolTip(2,'更新：获奖情况')
        self.tabWidget.setTabIcon(2,QIcon(r'images/bao13.png'))
        self.tabWidget.tabBar().setTabTextColor(2, 'red')

        _dict = {0:False,2:True,1:True}
        '''
        当复选框（QCheckBox）的状态发生改变时，它会发出stateChanged信号。这个信号会附带一个整数参数，这个参数表示复选框的新状态
        参数：Qt.Checked：这个值通常表示为2，表示复选框已经被选中
        参数：Qt.Unchecked：这个值通常表示为0，表示复选框没有被选中
        参数：Qt.PartiallyChecked，其值为1。这表示复选框处于半选中状态，但这种情况通常较少使用
        上面定义了一个字典，字典的key值：0--对应键值 False，字典key值为1或2--对应的键值都是 True
        '''
        check1.stateChanged.connect(lambda x:self.label.setText(f'选项卡二，更新了“1等奖”获取情况：{_dict[x]}'))
        check2.stateChanged.connect(lambda x: self.label.setText(f'选项卡二，更新了“2等奖”获取情况：{_dict[x]}'))
        check3.stateChanged.connect(lambda x: self.label.setText(f'选项卡二，更新了“3等奖”获取情况：{_dict[x]}'))

    def tabChanged(self, index:int):
        a = self.tabWidget.currentWidget()
        text = self.tabWidget.tabBar().tabText(index)
        self.label.setText(f'切换到页面{index},{text}')

if __name__ == '__main__':
    app = QApplication(sys.argv)
    demo = TabDemo()
    demo.show()
    sys.exit(app.exec())

代码运行如下图：