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

好的，各位观众老爷，欢迎来到今天的PyQt/PySide Widget定制和复杂GUI布局“脱口秀”现场！我是你们的老朋友，Bug猎人小P，今天咱们不聊源码八卦，只谈如何把PyQt/PySide的Widget玩出花来，让你的界面不再是千篇一律的“程序员审美”。

开场白：Widget，界面世界的基石

首先，我们得明白，PyQt/PySide的Widget，就是构建GUI界面的砖头瓦块。按钮、文本框、下拉菜单，都是Widget。它们就像乐高积木，你可以用它们拼出各种形状，搭建你的GUI城堡。但是，默认的Widget长相嘛……嗯，只能说“功能性”大于“美观性”。

所以，我们需要自定义Widget，让界面更符合需求，更具个性。

第一幕：自定义Widget，让你的界面与众不同

自定义Widget，说白了就是继承现有的Widget，然后重写一些方法，改变它的行为和外观。

1. 继承大法：选择合适的父类

选择哪个Widget作为父类很重要，直接决定了你的自定义Widget有哪些基础功能。

• QPushButton: 如果你想创建一个可点击的按钮，并且需要自定义按钮的样式，那么QPushButton是你的好朋友。
• QLabel: 如果你想创建一个可以显示文本或图片的标签，并且需要自定义标签的显示方式，那么QLabel是你的好伙伴。
• QWidget: 如果你想创建一个完全自定义的Widget，没有任何预设的功能，那么QWidget是你的终极选择。就像一张白纸，任你挥洒。

2. 重写方法：赋予Widget新的灵魂

继承之后，就可以重写Widget的方法了。常用的方法包括：

• paintEvent(self, event): 绘制Widget的外观。这是自定义外观的核心。你可以用QPainter绘制各种图形、文字、图片。
• mousePressEvent(self, event): 处理鼠标按下事件。
• mouseReleaseEvent(self, event): 处理鼠标释放事件。
• mouseMoveEvent(self, event): 处理鼠标移动事件。
• keyPressEvent(self, event): 处理键盘按下事件。
• sizeHint(self): 返回Widget的建议大小。这会影响布局管理器的行为。
• minimumSizeHint(self): 返回Widget的最小建议大小。

3. 代码示例：一个自定义按钮

咱们来创建一个自定义按钮，让它在鼠标悬停时变色。

from PyQt5.QtWidgets import QPushButton
from PyQt5.QtGui import QPalette, QColor
from PyQt5.QtCore import Qt

class MyButton(QPushButton):
    def __init__(self, text, parent=None):
        super().__init__(text, parent)
        self.default_color = self.palette().color(QPalette.Button) # 获取默认颜色
        self.hover_color = QColor(100, 149, 237)  # CornflowerBlue，矢车菊蓝

    def enterEvent(self, event):
        # 鼠标进入事件，改变背景颜色
        palette = self.palette()
        palette.setColor(QPalette.Button, self.hover_color)
        self.setPalette(palette)

    def leaveEvent(self, event):
        # 鼠标离开事件，恢复默认颜色
        palette = self.palette()
        palette.setColor(QPalette.Button, self.default_color)
        self.setPalette(palette)

代码解释:

• MyButton继承了QPushButton，拥有了按钮的所有基本功能。
• enterEvent和leaveEvent分别在鼠标进入和离开按钮时被调用。
• 我们改变了按钮的背景颜色，让它在鼠标悬停时变成矢车菊蓝。

使用示例:

from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout
import sys

if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = QWidget()
    layout = QVBoxLayout()
    button = MyButton("点我啊！")
    layout.addWidget(button)
    window.setLayout(layout)
    window.show()
    sys.exit(app.exec_())

第二幕：绘制，让你的Widget“改头换面”

paintEvent方法是自定义Widget外观的关键。通过QPainter，你可以绘制各种图形、文字、图片，实现各种炫酷的效果。

1. QPainter：你的画笔

QPainter是Qt的绘图引擎。它提供了各种方法，让你可以在Widget上“作画”。

• begin(self, device): 开始绘制。device通常是你的Widget。
• end(self): 结束绘制。
• setPen(self, pen): 设置画笔。画笔决定了线条的颜色、粗细、样式。
• setBrush(self, brush): 设置画刷。画刷决定了填充的颜色、样式。
• drawRect(self, rect): 绘制矩形。
• drawEllipse(self, rect): 绘制椭圆。
• drawText(self, rect, alignment, text): 绘制文本。
• drawImage(self, rect, image): 绘制图像。

2. 代码示例：一个自定义进度条

咱们来创建一个自定义进度条，让它看起来更漂亮。

from PyQt5.QtWidgets import QWidget
from PyQt5.QtGui import QPainter, QColor, QPen, QBrush
from PyQt5.QtCore import Qt, QRect

class MyProgressBar(QWidget):
    def __init__(self, value=0, parent=None):
        super().__init__(parent)
        self.value = value
        self.max_value = 100
        self.setMinimumHeight(20)

    def setValue(self, value):
        self.value = value
        self.update()  # 强制重绘

    def paintEvent(self, event):
        painter = QPainter(self)
        painter.begin(self)
        painter.setRenderHint(QPainter.Antialiasing) #抗锯齿

        # 背景
        background_color = QColor(220, 220, 220)  # LightGray
        painter.setBrush(QBrush(background_color))
        painter.setPen(Qt.NoPen)  # 无边框
        rect = QRect(0, 0, self.width(), self.height())
        painter.drawRoundedRect(rect, 10, 10)  # 圆角矩形

        # 进度条
        progress_color = QColor(70, 130, 180)  # SteelBlue
        painter.setBrush(QBrush(progress_color))
        progress_width = int(self.width() * self.value / self.max_value)
        progress_rect = QRect(0, 0, progress_width, self.height())
        painter.drawRoundedRect(progress_rect, 10, 10)

        # 文本
        text_color = QColor(255, 255, 255) # 白色
        painter.setPen(QPen(text_color))
        painter.drawText(rect, Qt.AlignCenter, str(self.value) + "%")

        painter.end()

    def sizeHint(self):
        return Qt.QSize(200, 20)

代码解释:

• MyProgressBar继承了QWidget，需要自己绘制所有内容。
• setValue方法用于设置进度值，并调用update()强制重绘。
• paintEvent方法使用QPainter绘制背景、进度条和文本。
• setRenderHint(QPainter.Antialiasing)开启抗锯齿，让图形更平滑。

使用示例:

from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton
from PyQt5.QtCore import QTimer
import sys

if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = QWidget()
    layout = QVBoxLayout()
    progress_bar = MyProgressBar()
    layout.addWidget(progress_bar)

    def increase_progress():
        current_value = progress_bar.value
        if current_value < 100:
            progress_bar.setValue(current_value + 1)
        else:
            timer.stop() #停止定时器

    button = QPushButton("开始")
    layout.addWidget(button)

    timer = QTimer()
    timer.timeout.connect(increase_progress)

    def start_progress():
        progress_bar.setValue(0)
        timer.start(50)  # 每50毫秒更新一次

    button.clicked.connect(start_progress)

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

第三幕：复杂GUI布局，让你的界面井井有条

有了自定义Widget，还需要合理的布局才能让界面看起来舒服。PyQt/PySide提供了多种布局管理器，可以自动调整Widget的大小和位置。

1. 布局管理器：你的排版助手

• QVBoxLayout: 垂直布局。Widget从上到下排列。
• QHBoxLayout: 水平布局。Widget从左到右排列。
• QGridLayout: 网格布局。Widget排列成网格状。
• QFormLayout: 表单布局。Widget排列成表单样式，通常用于输入框和标签。
• QStackedLayout: 堆叠布局。Widget堆叠在一起，一次只显示一个。

2. 代码示例：一个复杂的登录界面

咱们来创建一个复杂的登录界面，包含用户名、密码输入框、记住密码复选框和登录按钮。

from PyQt5.QtWidgets import QApplication, QWidget, QFormLayout, QLineEdit, QCheckBox, QPushButton, QVBoxLayout
import sys

if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = QWidget()
    window.setWindowTitle("登录")

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

    # 用户名
    username_label = "用户名:"
    username_input = QLineEdit()
    form_layout.addRow(username_label, username_input)

    # 密码
    password_label = "密码:"
    password_input = QLineEdit()
    password_input.setEchoMode(QLineEdit.Password)  # 密码模式
    form_layout.addRow(password_label, password_input)

    # 记住密码
    remember_checkbox = QCheckBox("记住密码")
    form_layout.addRow(remember_checkbox)

    # 登录按钮
    login_button = QPushButton("登录")

    # 创建垂直布局，包含表单布局和登录按钮
    main_layout = QVBoxLayout()
    main_layout.addLayout(form_layout)
    main_layout.addWidget(login_button)

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

代码解释:

• 我们使用了QFormLayout来排列用户名、密码输入框和记住密码复选框。
• password_input.setEchoMode(QLineEdit.Password)设置密码输入框为密码模式，隐藏输入的字符。
• 我们使用QVBoxLayout将表单布局和登录按钮垂直排列。

3. 嵌套布局：让布局更灵活

你可以将多个布局管理器嵌套在一起，创建更复杂的布局。例如，你可以在一个QHBoxLayout中放置两个QVBoxLayout，实现左右分栏的布局。

第四幕：信号与槽，让Widget“动起来”

Widget不仅仅是静态的显示，还需要响应用户的操作。PyQt/PySide使用信号和槽机制来实现Widget之间的交互。

1. 信号：Widget的“呼喊”

信号是Widget发出的事件通知。例如，按钮被点击时会发出clicked()信号，文本框内容改变时会发出textChanged()信号。

2. 槽：Widget的“耳朵”

槽是Widget接收信号并执行的操作。槽可以是任何Python函数或方法。

3. 连接：信号与槽的“鹊桥”

使用connect()方法将信号和槽连接起来。当信号发出时，与之连接的槽就会被调用。

4. 代码示例：点击按钮，显示消息

咱们来创建一个按钮，点击时显示一个消息框。

from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QMessageBox, QVBoxLayout
import sys

def show_message():
    QMessageBox.information(None, "消息", "按钮被点击了！")

if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = QWidget()
    layout = QVBoxLayout()
    button = QPushButton("点我！")
    layout.addWidget(button)

    # 连接信号和槽
    button.clicked.connect(show_message)

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

代码解释:

• show_message函数是一个槽，用于显示消息框。
• button.clicked.connect(show_message)将按钮的clicked()信号连接到show_message槽。

总结：Widget定制的进阶之路

掌握了以上技巧，你就可以开始你的Widget定制之旅了。但是，Widget定制还有很多进阶技巧，例如：

• 样式表（QSS）： 使用CSS来控制Widget的外观。
• 代理（Delegate）： 自定义列表、表格等控件的显示和编辑方式。
• 动画： 为Widget添加动画效果，让界面更生动。
• OpenGL： 使用OpenGL绘制高性能的自定义Widget。

表格总结：常用 Widget 和 布局管理器

Widget 类	功能描述
QPushButton	按钮
QLabel	标签，用于显示文本或图像
QLineEdit	单行文本输入框
QTextEdit	多行文本输入框
QComboBox	下拉菜单
QCheckBox	复选框
QRadioButton	单选框
QSlider	滑块
QProgressBar	进度条
QListWidget	列表
QTableWidget	表格
QTreeView	树状视图

布局管理器	功能描述
QVBoxLayout	垂直布局，Widget 从上到下排列
QHBoxLayout	水平布局，Widget 从左到右排列
QGridLayout	网格布局，Widget 排列成网格状
QFormLayout	表单布局，Widget 排列成表单样式，适合表单输入
QStackedLayout	堆叠布局，Widget 堆叠在一起，一次只显示一个

最后，记住，熟能生巧。多练习，多尝试，你就能成为Widget定制的高手！

好了，今天的“脱口秀”就到这里。感谢各位观众老爷的观看，咱们下期再见！ 记得点赞、评论、转发哦！ 拜拜！