7、Qt-pyqt6常用基本控件 - 容器控件
容器控件
容器控件可以将窗口中的控件进行分组处理，使窗口的分类更清晰，常用的容器空间有QGroupBox分组框、QTabWidget选显卡和QToolBox工具盒
🍧 QGroupBox 分组框控件 -- Containers/Group Box
主要为其他控件提供分组，并且按照控件的分组来细分窗口的功能
常用方法：
| 方法 | 说明 |
|---|---|
| setAlignment() | 设置对齐方式，包括水平对齐和垂直对齐两种水平对齐方式包括如下4种： Qt.AlignLeft:左对齐; Qt.AlignHCenter:水平居中对齐； Qt.AlignRight:右对齐； Qt.AligIustify:两端对齐； 垂直对齐方式包括以下三种： Qt.AlignTop:顶部对齐； Qt.AlignVCenter:垂直居中； Qt.AlignBottom:底部对齐； |
| setTiltle() | 设置分组标题 |
| setFlat() | 设置是否以扁平样式显示 |
案例图
🍋 QTabWidget 选项卡控件 -- Containers/Tab Widget
它主要为其他控件提供分组，并且按照控件的分组来细分窗口的功能
常用的方法：
| 方法 | 说明 |
|---|---|
| addTab() | 添加选项卡 |
| insertTab() | 插入新选项卡 |
| removeTab() | 删除选项卡 |
| currentWidget() | 获取当前选项卡 |
| currentIndex() | 获取当前选项卡的索引 |
| setCurrentIndex() | 设置当前选项卡的索引 |
| setCurrentWidget() | 设置当前选项卡 |
| setTabPosition() | 设置选项卡的标题位置 |
| setTabsClosable() | 设置是否可以独立关闭选项卡 |
| setTabText() | 设置选项卡标题文本 |
| tabText() | 获取指定选项卡的标题 |
画图
代码如下：
tab.ui
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>Form</class>
<widget class="QWidget" name="Form">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>400</width>
<height>300</height>
</rect>
</property>
<property name="windowTitle">
<string>Form</string>
</property>
<widget class="QTabWidget" name="tabWidget">
<property name="geometry">
<rect>
<x>50</x>
<y>90</y>
<width>301</width>
<height>181</height>
</rect>
</property>
<property name="tabPosition">
<enum>QTabWidget::North</enum>
</property>
<property name="tabShape">
<enum>QTabWidget::Triangular</enum>
</property>
<property name="currentIndex">
<number>2</number>
</property>
<property name="elideMode">
<enum>Qt::ElideLeft</enum>
</property>
<property name="tabsClosable">
<bool>true</bool>
</property>
<property name="movable">
<bool>true</bool>
</property>
<widget class="QWidget" name="tab">
<attribute name="icon">
<iconset>
<normaloff>E:/icon/qq登录.png</normaloff>E:/icon/qq登录.png</iconset>
</attribute>
<attribute name="title">
<string>京东</string>
</attribute>
<attribute name="toolTip">
<string>qq登录</string>
</attribute>
<widget class="QLabel" name="label">
<property name="geometry">
<rect>
<x>10</x>
<y>10</y>
<width>61</width>
<height>21</height>
</rect>
</property>
<property name="text">
<string>电脑类</string>
</property>
</widget>
</widget>
<widget class="QWidget" name="tab_3">
<attribute name="title">
<string>淘宝</string>
</attribute>
<widget class="QLabel" name="label_3">
<property name="geometry">
<rect>
<x>30</x>
<y>30</y>
<width>53</width>
<height>15</height>
</rect>
</property>
<property name="text">
<string>日常用品</string>
</property>
</widget>
</widget>
<widget class="QWidget" name="tab_2">
<attribute name="title">
<string>咸鱼</string>
</attribute>
<widget class="QLabel" name="label_2">
<property name="geometry">
<rect>
<x>10</x>
<y>30</y>
<width>53</width>
<height>15</height>
</rect>
</property>
<property name="text">
<string>手机区</string>
</property>
</widget>
</widget>
</widget>
</widget>
<resources/>
<connections/>
</ui>
tab.py
# Form implementation generated from reading ui file 'tab.ui'
#
# Created by: PyQt6 UI code generator 6.4.2
#
# WARNING: Any manual changes made to this file will be lost when pyuic6 is
# run again. Do not edit this file unless you know what you are doing.
from PyQt6 import QtCore, QtGui, QtWidgets
class Ui_Form(object):
def setupUi(self, Form):
Form.setObjectName("Form")
Form.resize(400, 300)
self.tabWidget = QtWidgets.QTabWidget(parent=Form)
self.tabWidget.setGeometry(QtCore.QRect(50, 90, 301, 181))
self.tabWidget.setTabPosition(QtWidgets.QTabWidget.TabPosition.North)
self.tabWidget.setTabShape(QtWidgets.QTabWidget.TabShape.Triangular)
self.tabWidget.setElideMode(QtCore.Qt.TextElideMode.ElideLeft)
self.tabWidget.setTabsClosable(True)
self.tabWidget.setMovable(True)
self.tabWidget.setObjectName("tabWidget")
self.tab = QtWidgets.QWidget()
self.tab.setObjectName("tab")
self.label = QtWidgets.QLabel(parent=self.tab)
self.label.setGeometry(QtCore.QRect(10, 10, 61, 21))
self.label.setObjectName("label")
icon = QtGui.QIcon()
icon.addPixmap(QtGui.QPixmap("E:/icon/qq登录.png"), QtGui.QIcon.Mode.Normal, QtGui.QIcon.State.Off)
self.tabWidget.addTab(self.tab, icon, "")
self.tab_3 = QtWidgets.QWidget()
self.tab_3.setObjectName("tab_3")
self.label_3 = QtWidgets.QLabel(parent=self.tab_3)
self.label_3.setGeometry(QtCore.QRect(30, 30, 53, 15))
self.label_3.setObjectName("label_3")
self.tabWidget.addTab(self.tab_3, "")
self.tab_2 = QtWidgets.QWidget()
self.tab_2.setObjectName("tab_2")
self.label_2 = QtWidgets.QLabel(parent=self.tab_2)
self.label_2.setGeometry(QtCore.QRect(10, 30, 53, 15))
self.label_2.setObjectName("label_2")
self.tabWidget.addTab(self.tab_2, "")
self.retranslateUi(Form)
self.tabWidget.setCurrentIndex(2)
QtCore.QMetaObject.connectSlotsByName(Form)
def retranslateUi(self, Form):
_translate = QtCore.QCoreApplication.translate
Form.setWindowTitle(_translate("Form", "Form"))
self.label.setText(_translate("Form", "电脑类"))
self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab), _translate("Form", "京东"))
self.tabWidget.setTabToolTip(self.tabWidget.indexOf(self.tab), _translate("Form", "qq登录"))
self.label_3.setText(_translate("Form", "日常用品"))
self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab_3), _translate("Form", "淘宝"))
self.label_2.setText(_translate("Form", "手机区"))
self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab_2), _translate("Form", "咸鱼"))
main.py
from PyQt6.QtGui import QIntValidator, QIcon
from PyQt6.QtWidgets import QApplication, QLabel, QListWidgetItem, QWidget
from PyQt6 import uic, QtGui
import sys
if __name__ == '__main__':
app = QApplication(sys.argv) # 创建应用程序对象
# 加载ui文件 ,ui变量相当于是LinrText.py文件中的setupUi函数
ui = uic.loadUi('./tab.ui')
# 获取容器控件
myQTabWidget = ui.tabWidget
# 创建tab
tab = QWidget()
# 添加一个tab选项
myQTabWidget.addTab(tab, '测试')
# 再添加一个tab选项
tab2 = QWidget()
myQTabWidget.addTab(tab2, QIcon('登录.png'), '测试2') # 添加图标
# insertTab(index, widget, label) 在指定位置插入tab选项
tab3 = QWidget()
myQTabWidget.insertTab(0, tab3, '测试3')
# removeTab(index) 删除指定索引位置的tab选项
myQTabWidget.removeTab(0)
myQTabWidget.removeTab(2)
# 获取当前的选项卡的index
print(myQTabWidget.currentIndex())
# 获取当前的选项卡
print(myQTabWidget.currentWidget())
# 设置当前的选项卡的index，默认打开选中改选项卡
myQTabWidget.setCurrentIndex(1)
# 设置当前的选项卡，默认打开选中改选项卡
myQTabWidget.setCurrentWidget(tab2)
# 设置选项卡的标题
myQTabWidget.setTabText(0, 'qq登录')
# 获取选项卡的标题
print(myQTabWidget.tabText(0))
# 创建标签控件
myQLabel = ui.label
myQLabel_2 = ui.label_2
myQLabel_3 = ui.label_3
# 显示窗口(将ui文件内容显示)
ui.show()
sys.exit(app.exec()) # app.exec()进入无限消息循环，监听用户动作
效果
🧱 QToolBox 工具和控件 -- Containers/Tool Box
提供一种列状态的层叠选项卡
常用方法：
| 方法 | 说明 |
|---|---|
| addItem() | 添加选项卡 |
| setCurrentIndex() | 设置当前选项卡中的选项卡索引 |
| setItemIcon() | 设置选项卡的图标 |
| setItemText() | 设置选项卡的标题文本 |
| setItemEnabled() | 设置选项卡是否可用 |
| insertItem() | 插入新选项卡 |
| removeItem（） | 移除选项卡 |
| itemText() | 获取选项卡的文本 |
| currentIndex() | 获取当前选项卡的索引 |
案例：
代码如下：
toolbox.ui
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>Form</class>
<widget class="QWidget" name="Form">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>446</width>
<height>683</height>
</rect>
</property>
<property name="windowTitle">
<string>Form</string>
</property>
<widget class="QToolBox" name="toolBox">
<property name="geometry">
<rect>
<x>100</x>
<y>80</y>
<width>221</width>
<height>311</height>
</rect>
</property>
<property name="currentIndex">
<number>0</number>
</property>
<widget class="QWidget" name="page">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>221</width>
<height>195</height>
</rect>
</property>
<attribute name="label">
<string>我的好友</string>
</attribute>
<widget class="QToolButton" name="toolButton">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>181</width>
<height>21</height>
</rect>
</property>
<property name="text">
<string>张三</string>
</property>
<property name="icon">
<iconset>
<normaloff>E:/blog图片/logo/页面1@1x.png</normaloff>E:/blog图片/logo/页面1@1x.png</iconset>
</property>
<property name="iconSize">
<size>
<width>40</width>
<height>40</height>
</size>
</property>
<property name="toolButtonStyle">
<enum>Qt::ToolButtonTextBesideIcon</enum>
</property>
<property name="autoRaise">
<bool>true</bool>
</property>
</widget>
<widget class="QToolButton" name="toolButton_2">
<property name="geometry">
<rect>
<x>0</x>
<y>30</y>
<width>181</width>
<height>21</height>
</rect>
</property>
<property name="text">
<string>李四</string>
</property>
<property name="icon">
<iconset>
<normaloff>E:/blog图片/logo/emoji-3 - 副本.png</normaloff>E:/blog图片/logo/emoji-3 - 副本.png</iconset>
</property>
<property name="iconSize">
<size>
<width>40</width>
<height>40</height>
</size>
</property>
<property name="toolButtonStyle">
<enum>Qt::ToolButtonTextBesideIcon</enum>
</property>
<property name="autoRaise">
<bool>true</bool>
</property>
</widget>
<widget class="QToolButton" name="toolButton_3">
<property name="geometry">
<rect>
<x>0</x>
<y>60</y>
<width>181</width>
<height>21</height>
</rect>
</property>
<property name="text">
<string>xiaoxin</string>
</property>
<property name="icon">
<iconset>
<normaloff>E:/blog图片/logo/linux.png</normaloff>E:/blog图片/logo/linux.png</iconset>
</property>
<property name="iconSize">
<size>
<width>50</width>
<height>50</height>
</size>
</property>
<property name="toolButtonStyle">
<enum>Qt::ToolButtonTextBesideIcon</enum>
</property>
<property name="autoRaise">
<bool>true</bool>
</property>
</widget>
</widget>
<widget class="QWidget" name="page_2">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>221</width>
<height>195</height>
</rect>
</property>
<attribute name="label">
<string>同学</string>
</attribute>
<widget class="QToolButton" name="toolButton_4">
<property name="geometry">
<rect>
<x>0</x>
<y>10</y>
<width>181</width>
<height>21</height>
</rect>
</property>
<property name="text">
<string>xiaoxin</string>
</property>
<property name="icon">
<iconset>
<normaloff>E:/blog图片/logo/linux.png</normaloff>E:/blog图片/logo/linux.png</iconset>
</property>
<property name="iconSize">
<size>
<width>50</width>
<height>50</height>
</size>
</property>
<property name="toolButtonStyle">
<enum>Qt::ToolButtonTextBesideIcon</enum>
</property>
<property name="autoRaise">
<bool>true</bool>
</property>
</widget>
</widget>
<widget class="QWidget" name="">
<attribute name="label">
<string>家人</string>
</attribute>
<widget class="QToolButton" name="toolButton_5">
<property name="geometry">
<rect>
<x>0</x>
<y>10</y>
<width>181</width>
<height>21</height>
</rect>
</property>
<property name="text">
<string>xiaoxin</string>
</property>
<property name="icon">
<iconset>
<normaloff>E:/blog图片/logo/linux.png</normaloff>E:/blog图片/logo/linux.png</iconset>
</property>
<property name="iconSize">
<size>
<width>50</width>
<height>50</height>
</size>
</property>
<property name="toolButtonStyle">
<enum>Qt::ToolButtonTextBesideIcon</enum>
</property>
<property name="autoRaise">
<bool>true</bool>
</property>
</widget>
</widget>
<widget class="QWidget" name="page_3">
<attribute name="label">
<string>朋友</string>
</attribute>
<widget class="QToolButton" name="toolButton_6">
<property name="geometry">
<rect>
<x>0</x>
<y>10</y>
<width>181</width>
<height>21</height>
</rect>
</property>
<property name="text">
<string>xiaoxin</string>
</property>
<property name="icon">
<iconset>
<normaloff>E:/blog图片/logo/linux.png</normaloff>E:/blog图片/logo/linux.png</iconset>
</property>
<property name="iconSize">
<size>
<width>50</width>
<height>50</height>
</size>
</property>
<property name="toolButtonStyle">
<enum>Qt::ToolButtonTextBesideIcon</enum>
</property>
<property name="autoRaise">
<bool>true</bool>
</property>
</widget>
</widget>
</widget>
</widget>
<resources/>
<connections/>
</ui>
toolbox.py
# Form implementation generated from reading ui file 'toolbox.ui'
#
# Created by: PyQt6 UI code generator 6.4.2
#
# WARNING: Any manual changes made to this file will be lost when pyuic6 is
# run again. Do not edit this file unless you know what you are doing.
from PyQt6 import QtCore, QtGui, QtWidgets
class Ui_Form(object):
def setupUi(self, Form):
Form.setObjectName("Form")
Form.resize(446, 683)
self.toolBox = QtWidgets.QToolBox(parent=Form)
self.toolBox.setGeometry(QtCore.QRect(100, 80, 221, 311))
self.toolBox.setObjectName("toolBox")
self.page = QtWidgets.QWidget()
self.page.setGeometry(QtCore.QRect(0, 0, 221, 195))
self.page.setObjectName("page")
self.toolButton = QtWidgets.QToolButton(parent=self.page)
self.toolButton.setGeometry(QtCore.QRect(0, 0, 181, 21))
icon = QtGui.QIcon()
icon.addPixmap(QtGui.QPixmap("E:/blog图片/logo/页面1@1x.png"), QtGui.QIcon.Mode.Normal, QtGui.QIcon.State.Off)
self.toolButton.setIcon(icon)
self.toolButton.setIconSize(QtCore.QSize(40, 40))
self.toolButton.setToolButtonStyle(QtCore.Qt.ToolButtonStyle.ToolButtonTextBesideIcon)
self.toolButton.setAutoRaise(True)
self.toolButton.setObjectName("toolButton")
self.toolButton_2 = QtWidgets.QToolButton(parent=self.page)
self.toolButton_2.setGeometry(QtCore.QRect(0, 30, 181, 21))
icon1 = QtGui.QIcon()
icon1.addPixmap(QtGui.QPixmap("E:/blog图片/logo/emoji-3 - 副本.png"), QtGui.QIcon.Mode.Normal, QtGui.QIcon.State.Off)
self.toolButton_2.setIcon(icon1)
self.toolButton_2.setIconSize(QtCore.QSize(40, 40))
self.toolButton_2.setToolButtonStyle(QtCore.Qt.ToolButtonStyle.ToolButtonTextBesideIcon)
self.toolButton_2.setAutoRaise(True)
self.toolButton_2.setObjectName("toolButton_2")
self.toolButton_3 = QtWidgets.QToolButton(parent=self.page)
self.toolButton_3.setGeometry(QtCore.QRect(0, 60, 181, 21))
icon2 = QtGui.QIcon()
icon2.addPixmap(QtGui.QPixmap("E:/blog图片/logo/linux.png"), QtGui.QIcon.Mode.Normal, QtGui.QIcon.State.Off)
self.toolButton_3.setIcon(icon2)
self.toolButton_3.setIconSize(QtCore.QSize(50, 50))
self.toolButton_3.setToolButtonStyle(QtCore.Qt.ToolButtonStyle.ToolButtonTextBesideIcon)
self.toolButton_3.setAutoRaise(True)
self.toolButton_3.setObjectName("toolButton_3")
self.toolBox.addItem(self.page, "")
self.page_2 = QtWidgets.QWidget()
self.page_2.setGeometry(QtCore.QRect(0, 0, 221, 195))
self.page_2.setObjectName("page_2")
self.toolButton_4 = QtWidgets.QToolButton(parent=self.page_2)
self.toolButton_4.setGeometry(QtCore.QRect(0, 10, 181, 21))
self.toolButton_4.setIcon(icon2)
self.toolButton_4.setIconSize(QtCore.QSize(50, 50))
self.toolButton_4.setToolButtonStyle(QtCore.Qt.ToolButtonStyle.ToolButtonTextBesideIcon)
self.toolButton_4.setAutoRaise(True)
self.toolButton_4.setObjectName("toolButton_4")
self.toolBox.addItem(self.page_2, "")
self.widget = QtWidgets.QWidget()
self.widget.setObjectName("widget")
self.toolButton_5 = QtWidgets.QToolButton(parent=self.widget)
self.toolButton_5.setGeometry(QtCore.QRect(0, 10, 181, 21))
self.toolButton_5.setIcon(icon2)
self.toolButton_5.setIconSize(QtCore.QSize(50, 50))
self.toolButton_5.setToolButtonStyle(QtCore.Qt.ToolButtonStyle.ToolButtonTextBesideIcon)
self.toolButton_5.setAutoRaise(True)
self.toolButton_5.setObjectName("toolButton_5")
self.toolBox.addItem(self.widget, "")
self.page_3 = QtWidgets.QWidget()
self.page_3.setObjectName("page_3")
self.toolButton_6 = QtWidgets.QToolButton(parent=self.page_3)
self.toolButton_6.setGeometry(QtCore.QRect(0, 10, 181, 21))
self.toolButton_6.setIcon(icon2)
self.toolButton_6.setIconSize(QtCore.QSize(50, 50))
self.toolButton_6.setToolButtonStyle(QtCore.Qt.ToolButtonStyle.ToolButtonTextBesideIcon)
self.toolButton_6.setAutoRaise(True)
self.toolButton_6.setObjectName("toolButton_6")
self.toolBox.addItem(self.page_3, "")
self.retranslateUi(Form)
self.toolBox.setCurrentIndex(0)
QtCore.QMetaObject.connectSlotsByName(Form)
def retranslateUi(self, Form):
_translate = QtCore.QCoreApplication.translate
Form.setWindowTitle(_translate("Form", "Form"))
self.toolButton.setText(_translate("Form", "张三"))
self.toolButton_2.setText(_translate("Form", "李四"))
self.toolButton_3.setText(_translate("Form", "xiaoxin"))
self.toolBox.setItemText(self.toolBox.indexOf(self.page), _translate("Form", "我的好友"))
self.toolButton_4.setText(_translate("Form", "xiaoxin"))
self.toolBox.setItemText(self.toolBox.indexOf(self.page_2), _translate("Form", "同学"))
self.toolButton_5.setText(_translate("Form", "xiaoxin"))
self.toolBox.setItemText(self.toolBox.indexOf(self.widget), _translate("Form", "家人"))
self.toolButton_6.setText(_translate("Form", "xiaoxin"))
self.toolBox.setItemText(self.toolBox.indexOf(self.page_3), _translate("Form", "朋友"))
main.py
from PyQt6.QtGui import QIntValidator, QIcon
from PyQt6.QtWidgets import QApplication, QLabel, QListWidgetItem, QWidget
from PyQt6 import uic, QtGui
import sys
if __name__ == '__main__':
app = QApplication(sys.argv) # 创建应用程序对象
# 加载ui文件 ,ui变量相当于是LinrText.py文件中的setupUi函数
ui = uic.loadUi('./toolbox.ui')
# 获取控件
myQToolBox = ui.toolBox
# 创建tab1
tab1 = QWidget()
# 添加tab1到toolBox，就是再添加一个分组框
myQToolBox.addItem(tab1, '测试')
# 创建tab2 这里的QWidget()是表示创建一个分组框
tab2 = QWidget()
myQToolBox.insertItem(2, tab2, QIcon('11.webp'), '测试2sss')
# 设置当前选中的选项卡分组框（就是打开后默认的选项卡）
myQToolBox.setCurrentIndex(2)
# 设置选项卡分组框的图标
myQToolBox.setItemIcon(0, QIcon('cn-2.jpg'))
# 设置选项卡分组框的标题
myQToolBox.setItemText(0, '测试1')
# 禁用选项卡分组框
myQToolBox.setItemEnabled(4, False)
# 移除选项卡分组框
myQToolBox.removeItem(5)
# 获取选项卡分组框的文本
print(myQToolBox.itemText(0))
# 获取当前选项卡分组框的索引
print(myQToolBox.currentIndex())
# 显示窗口(将ui文件内容显示)
ui.show()
sys.exit(app.exec()) # app.exec()进入无限消息循环，监听用户动作
效果如下：
技巧
