发布于 由admin

PyQt/PySide Widgets：自定义控件与复杂 GUI 布局设计

好的，咱们这就开始一场关于 PyQt/PySide 自定义控件和复杂 GUI 布局设计的技术讲座。准备好了吗？系好安全带，发车喽！

PyQt/PySide Widgets：自定义控件与复杂 GUI 布局设计

大家好！我是今天的讲师，一个和bug斗智斗勇多年的老码农。今天咱们要聊聊 PyQt/PySide 里的自定义控件和复杂 GUI 布局。别害怕，听起来好像很高大上，其实就是教你怎么画出更漂亮的界面，让你的程序看起来更专业。

一、 为什么要自定义控件？

首先，我们来聊聊为什么要自定义控件。PyQt/PySide 已经提供了很多现成的控件，比如按钮、文本框、下拉框等等。那为什么还要自己动手做呢？原因很简单：

  • 满足特殊需求： 现有的控件可能无法满足你的特殊需求。比如说，你需要一个可以显示温度的仪表盘，或者一个可以拖拽排序的列表。
  • 提高用户体验： 自定义控件可以让你更好地控制界面的外观和行为，从而提高用户体验。比如，你可以让按钮在鼠标悬停时显示动画效果。
  • 打造个性化风格： 如果你想让你的程序看起来与众不同，自定义控件是一个很好的选择。你可以设计出独一无二的控件，让你的程序更有辨识度。

总之，自定义控件就是为了让你有更大的自由度，可以创造出更符合你需求的界面。

二、 如何自定义控件？

自定义控件其实不难，只需要继承 PyQt/PySide 提供的 QWidget 类，然后重写一些方法就可以了。

2.1 最简单的自定义控件

先来一个最简单的例子，我们自定义一个会画圆的控件：

from PyQt5.QtWidgets import QWidget, QApplication
from PyQt5.QtGui import QPainter, QColor
from PyQt5.QtCore import Qt
import sys

class MyCircleWidget(QWidget):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.radius = 50  # 圆的半径

    def paintEvent(self, event):
        painter = QPainter(self)
        painter.setRenderHint(QPainter.Antialiasing)  # 抗锯齿
        painter.setBrush(QColor(255, 0, 0))  # 红色填充
        painter.drawEllipse(self.width() / 2 - self.radius,
                            self.height() / 2 - self.radius,
                            self.radius * 2, self.radius * 2)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MyCircleWidget()
    window.setWindowTitle("My Circle Widget")
    window.resize(200, 200)
    window.show()
    sys.exit(app.exec_())

这段代码做了什么？

  1. 我们创建了一个名为 MyCircleWidget 的类，它继承自 QWidget。
  2. 我们重写了 paintEvent 方法。这个方法会在控件需要重绘时被调用。
  3. 在 paintEvent 方法中，我们使用 QPainter 对象来绘制一个圆。

运行这段代码，你会看到一个红色的圆圈出现在窗口中。

2.2 添加属性和信号

光画个圆还不够，我们来给这个控件添加一些属性和信号。比如，我们可以添加一个 radius 属性，让用户可以设置圆的半径。我们还可以添加一个 radiusChanged 信号，当 radius 属性改变时，发出这个信号。

from PyQt5.QtWidgets import QWidget, QApplication
from PyQt5.QtGui import QPainter, QColor
from PyQt5.QtCore import Qt, pyqtSignal
import sys

class MyCircleWidget(QWidget):
    radiusChanged = pyqtSignal(int)  # 定义信号

    def __init__(self, parent=None):
        super().__init__(parent)
        self._radius = 50  # 私有变量，存储半径

    def paintEvent(self, event):
        painter = QPainter(self)
        painter.setRenderHint(QPainter.Antialiasing)
        painter.setBrush(QColor(255, 0, 0))
        painter.drawEllipse(self.width() / 2 - self._radius,
                            self.height() / 2 - self._radius,
                            self._radius * 2, self._radius * 2)

    def getRadius(self):
        return self._radius

    def setRadius(self, radius):
        if self._radius != radius:
            self._radius = radius
            self.radiusChanged.emit(radius)  # 发出信号
            self.update()  # 重新绘制

    radius = property(getRadius, setRadius)  # 定义属性

if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MyCircleWidget()
    window.setWindowTitle("My Circle Widget")
    window.resize(200, 200)

    # 连接信号和槽
    def radius_changed(radius):
        print(f"Radius changed to: {radius}")

    window.radiusChanged.connect(radius_changed)

    # 设置半径
    window.radius = 80

    window.show()
    sys.exit(app.exec_())

这段代码做了什么？

  1. 我们使用 pyqtSignal 定义了一个名为 radiusChanged 的信号。
  2. 我们使用一个私有变量 _radius 来存储圆的半径。
  3. 我们定义了 getRadius 和 setRadius 方法来访问和设置 _radius 变量。
  4. 我们使用 property 函数将 getRadius 和 setRadius 方法绑定到 radius 属性上。
  5. 在 setRadius 方法中，我们判断新的半径值是否与旧的半径值不同。如果不同，我们就更新 _radius 变量，发出 radiusChanged 信号，并调用 update 方法来重新绘制控件。
  6. 在主程序中，我们将 radiusChanged 信号连接到一个槽函数 radius_changed。当 radius 属性改变时，radius_changed 函数会被调用，并打印出新的半径值。

2.3 处理鼠标事件

我们还可以让控件响应鼠标事件。比如，我们可以让圆的半径随着鼠标的移动而改变。

from PyQt5.QtWidgets import QWidget, QApplication
from PyQt5.QtGui import QPainter, QColor
from PyQt5.QtCore import Qt, pyqtSignal
import sys

class MyCircleWidget(QWidget):
    radiusChanged = pyqtSignal(int)

    def __init__(self, parent=None):
        super().__init__(parent)
        self._radius = 50
        self.mouse_pressed = False # 标记鼠标是否按下

    def paintEvent(self, event):
        painter = QPainter(self)
        painter.setRenderHint(QPainter.Antialiasing)
        painter.setBrush(QColor(255, 0, 0))
        painter.drawEllipse(self.width() / 2 - self._radius,
                            self.height() / 2 - self._radius,
                            self._radius * 2, self._radius * 2)

    def getRadius(self):
        return self._radius

    def setRadius(self, radius):
        if self._radius != radius:
            self._radius = radius
            self.radiusChanged.emit(radius)
            self.update()

    radius = property(getRadius, setRadius)

    def mousePressEvent(self, event):
        if event.button() == Qt.LeftButton:
            self.mouse_pressed = True
            self.mouse_x = event.x() # 记录鼠标点击位置
            self.mouse_y = event.y()
            self.updateRadius(self.mouse_x, self.mouse_y)

    def mouseMoveEvent(self, event):
        if self.mouse_pressed:
            self.mouse_x = event.x()
            self.mouse_y = event.y()
            self.updateRadius(self.mouse_x, self.mouse_y)

    def mouseReleaseEvent(self, event):
        if event.button() == Qt.LeftButton:
            self.mouse_pressed = False

    def updateRadius(self, x, y):
        # 根据鼠标位置计算半径，这里只是一个简单的例子
        distance = ((x - self.width() / 2)**2 + (y - self.height() / 2)**2)**0.5
        new_radius = int(distance)
        self.radius = new_radius

if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MyCircleWidget()
    window.setWindowTitle("My Circle Widget")
    window.resize(200, 200)

    window.show()
    sys.exit(app.exec_())

这段代码做了什么？

  1. 我们重写了 mousePressEvent、mouseMoveEvent 和 mouseReleaseEvent 方法来处理鼠标事件。
  2. 在 mousePressEvent 方法中，我们记录鼠标点击的位置。
  3. 在 mouseMoveEvent 方法中，我们根据鼠标的位置计算新的半径，并更新 radius 属性。
  4. 在 mouseReleaseEvent 方法中，我们取消鼠标按下的标记。

三、 复杂 GUI 布局设计

学会了自定义控件，接下来我们来看看如何进行复杂的 GUI 布局设计。PyQt/PySide 提供了多种布局管理器，可以帮助我们轻松地管理控件的位置和大小。

3.1 常见的布局管理器

  • QVBoxLayout： 垂直布局管理器。将控件垂直排列。
  • QHBoxLayout： 水平布局管理器。将控件水平排列。
  • QGridLayout： 网格布局管理器。将控件按照网格排列。
  • QFormLayout： 表单布局管理器。将控件按照表单的形式排列。
  • QStackedLayout: 堆叠布局管理器。将控件堆叠在一起，一次只显示一个。

3.2 如何使用布局管理器

使用布局管理器很简单，只需要创建一个布局管理器对象，然后将控件添加到布局管理器中，最后将布局管理器设置给窗口或控件。

from PyQt5.QtWidgets import (QWidget, QApplication, QVBoxLayout,
                             QPushButton, QLabel, QLineEdit)
import sys

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

        # 创建控件
        self.label = QLabel("Name:")
        self.lineEdit = QLineEdit()
        self.button = QPushButton("Submit")

        # 创建布局管理器
        layout = QVBoxLayout()

        # 将控件添加到布局管理器
        layout.addWidget(self.label)
        layout.addWidget(self.lineEdit)
        layout.addWidget(self.button)

        # 设置布局管理器
        self.setLayout(layout)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MyWindow()
    window.setWindowTitle("Vertical Layout Example")
    window.show()
    sys.exit(app.exec_())

这段代码使用了 QVBoxLayout 将一个标签、一个文本框和一个按钮垂直排列。

3.3 布局嵌套

布局管理器可以嵌套使用，从而实现更复杂的布局。比如，我们可以将两个 QHBoxLayout 嵌套在一个 QVBoxLayout 中。

from PyQt5.QtWidgets import (QWidget, QApplication, QVBoxLayout,
                             QHBoxLayout, QPushButton, QLabel)
import sys

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

        # 创建控件
        self.label1 = QLabel("Label 1")
        self.label2 = QLabel("Label 2")
        self.button1 = QPushButton("Button 1")
        self.button2 = QPushButton("Button 2")

        # 创建水平布局管理器
        hbox1 = QHBoxLayout()
        hbox1.addWidget(self.label1)
        hbox1.addWidget(self.button1)

        hbox2 = QHBoxLayout()
        hbox2.addWidget(self.label2)
        hbox2.addWidget(self.button2)

        # 创建垂直布局管理器
        vbox = QVBoxLayout()
        vbox.addLayout(hbox1)
        vbox.addLayout(hbox2)

        # 设置布局管理器
        self.setLayout(vbox)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MyWindow()
    window.setWindowTitle("Layout Nesting Example")
    window.show()
    sys.exit(app.exec_())

3.4 Grid Layout

QGridLayout 非常适合创建表格形式的布局。

from PyQt5.QtWidgets import (QWidget, QApplication, QGridLayout,
                             QPushButton, QLabel, QLineEdit)
import sys

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

        # 创建控件
        self.label_name = QLabel("Name:")
        self.lineEdit_name = QLineEdit()
        self.label_age = QLabel("Age:")
        self.lineEdit_age = QLineEdit()
        self.button_submit = QPushButton("Submit")

        # 创建网格布局管理器
        grid_layout = QGridLayout()

        # 将控件添加到网格布局管理器
        grid_layout.addWidget(self.label_name, 0, 0) # 行, 列
        grid_layout.addWidget(self.lineEdit_name, 0, 1)
        grid_layout.addWidget(self.label_age, 1, 0)
        grid_layout.addWidget(self.lineEdit_age, 1, 1)
        grid_layout.addWidget(self.button_submit, 2, 0, 1, 2) # 跨两列

        # 设置布局管理器
        self.setLayout(grid_layout)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MyWindow()
    window.setWindowTitle("Grid Layout Example")
    window.show()
    sys.exit(app.exec_())

3.5 Form Layout

QFormLayout 专门用于创建表单。

from PyQt5.QtWidgets import (QWidget, QApplication, QFormLayout,
                             QLineEdit, QLabel, QPushButton)
import sys

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

        # 创建控件
        self.lineEdit_name = QLineEdit()
        self.lineEdit_email = QLineEdit()
        self.lineEdit_password = QLineEdit()
        self.button_register = QPushButton("Register")

        # 创建表单布局管理器
        form_layout = QFormLayout()

        # 将控件添加到表单布局管理器
        form_layout.addRow("Name:", self.lineEdit_name)
        form_layout.addRow("Email:", self.lineEdit_email)
        form_layout.addRow("Password:", self.lineEdit_password)
        form_layout.addRow(self.button_register)

        # 设置布局管理器
        self.setLayout(form_layout)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MyWindow()
    window.setWindowTitle("Form Layout Example")
    window.show()
    sys.exit(app.exec_())

3.6 Stacked Layout

QStackedLayout 允许你堆叠多个控件或布局，一次只显示一个。这在创建向导或者多页面界面时非常有用。

from PyQt5.QtWidgets import (QWidget, QApplication, QStackedLayout,
                             QPushButton, QLabel, QVBoxLayout)
import sys

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

        # 创建页面 1
        self.page1 = QWidget()
        layout1 = QVBoxLayout()
        layout1.addWidget(QLabel("This is Page 1"))
        button1 = QPushButton("Go to Page 2")
        layout1.addWidget(button1)
        self.page1.setLayout(layout1)

        # 创建页面 2
        self.page2 = QWidget()
        layout2 = QVBoxLayout()
        layout2.addWidget(QLabel("This is Page 2"))
        button2 = QPushButton("Go to Page 1")
        layout2.addWidget(button2)
        self.page2.setLayout(layout2)

        # 创建堆叠布局管理器
        self.stacked_layout = QStackedLayout()
        self.stacked_layout.addWidget(self.page1)
        self.stacked_layout.addWidget(self.page2)

        # 设置布局管理器
        self.setLayout(self.stacked_layout)

        # 连接按钮信号
        button1.clicked.connect(lambda: self.stacked_layout.setCurrentIndex(1))
        button2.clicked.connect(lambda: self.stacked_layout.setCurrentIndex(0))

if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MyWindow()
    window.setWindowTitle("Stacked Layout Example")
    window.show()
    sys.exit(app.exec_())

四、一些实用技巧

  • 使用 QSizePolicy 控制控件的大小： QSizePolicy 可以控制控件在布局中的伸缩行为。比如，你可以让一个控件在水平方向上尽可能地填充空间，而在垂直方向上保持固定大小。
  • 使用 QSpacerItem 添加空白： QSpacerItem 可以用来在布局中添加空白。你可以设置空白的大小和伸缩行为。
  • 使用 Qt Designer 可视化设计界面： Qt Designer 是一个可视化界面设计工具，可以让你更方便地创建复杂的 GUI 布局。

五、总结

今天我们学习了 PyQt/PySide 中自定义控件和复杂 GUI 布局设计。我们了解了为什么要自定义控件，如何自定义控件，以及如何使用布局管理器来管理控件的位置和大小。希望这些知识能够帮助你创建出更漂亮的界面，让你的程序看起来更专业。

记住，熟能生巧！多写代码，多尝试不同的布局方式，你一定会成为 GUI 设计的高手！

最后，祝大家编程愉快，早日告别 bug！ 下课！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注