小白白也能学会的 PyQt 教程 —— 自定义组件 Switch Button

前端

2024-02-22 19:53:55

前言

最近在搞 Python 课程设计，想要搞一个好看的 UI，惊艳全班所有人。但打开 Qt Creator，Win7 风格的复古的按钮是在让我难以下手。

其次，我因为想要打造一个 Fluent UI 的界面，并且里面不乏一些动态效果，这些效果能有效地增加界面的设计美感。

但很可惜的是，Qt Creator 里内置的控件并不能满足我的需求。因此，在研究 Qt Custom Widget 后，我决定开发一个 Fluent Design风格的开关控件，也就是 Switch Button。

从开发难度上来说，Switch Button 的难度并不是很大。但由于我之前只是简单地学习过 PyQt 的基础知识，因此在开发过程中也遇到了不少坑。

所以我把一些开发技巧和过程中的小知识点都记录了下来，分享给同样想要开发 Qt Custom Widget 的你。

希望这篇教程能够帮助你快速上手 PyQt，开发出自己想要的组件。

1. 准备工作

首先，你需要安装 PyQt5 和 Qt Designer。

PyQt5 是一个功能强大的 Python GUI 框架，它可以帮助你轻松开发出跨平台的图形界面应用程序。

Qt Designer 是一个图形界面设计工具，你可以用它来设计你的应用程序界面。

安装好 PyQt5 和 Qt Designer 后，你就可以开始开发你的第一个 PyQt 应用程序了。

2. 创建一个新的 PyQt 项目

打开 Qt Creator，点击“文件”菜单，然后选择“新建”选项。

在弹出的对话框中，选择“PyQt5”应用程序模板，然后输入你的项目名称和项目路径。

点击“确定”按钮，你的 PyQt 项目就创建好了。

3. 设计 Switch Button 界面

接下来，你需要使用 Qt Designer 来设计你的 Switch Button 界面。

打开 Qt Designer，然后在“部件”面板中找到“自定义控件”部分。

双击“自定义控件”图标，就会弹出一个“自定义控件编辑器”窗口。

在“自定义控件编辑器”窗口中，你可以设计你的 Switch Button 的界面。

你可以添加各种控件到你的 Switch Button 中，比如 QLabel、QPushButton 等。

你也可以设置控件的属性，比如大小、颜色、字体等。

设计好 Switch Button 的界面后，点击“确定”按钮，然后保存你的自定义控件。

4. 编写 Switch Button 的代码

接下来，你需要编写 Switch Button 的代码。

在你的项目目录中，找到“ui”文件夹，然后打开“switch_button.py”文件。

在“switch_button.py”文件中，你需要编写以下代码：

from PyQt5.QtWidgets import QPushButton, QLabel, QWidget, QHBoxLayout

class SwitchButton(QWidget):
    def __init__(self):
        super().__init__()

        self.on_button = QPushButton("On")
        self.off_button = QPushButton("Off")

        self.label = QLabel()
        self.label.setText("Off")

        self.layout = QHBoxLayout()
        self.layout.addWidget(self.on_button)
        self.layout.addWidget(self.label)
        self.layout.addWidget(self.off_button)

        self.setLayout(self.layout)

        self.on_button.clicked.connect(self.on_button_clicked)
        self.off_button.clicked.connect(self.off_button_clicked)

    def on_button_clicked(self):
        self.label.setText("On")

    def off_button_clicked(self):
        self.label.setText("Off")


if __name__ == "__main__":
    import sys

    app = QApplication(sys.argv)
    window = SwitchButton()
    window.show()
    sys.exit(app.exec_())

这段代码实现了 Switch Button 的基本功能。

当用户点击“On”按钮时，Switch Button 的状态会变成“On”，并且标签的文本也会变成“On”。

当用户点击“Off”按钮时，Switch Button 的状态会变成“Off”，并且标签的文本也会变成“Off”。

5. 使用 Switch Button

现在，你可以把 Switch Button 添加到你的 PyQt 应用程序中。

在你的应用程序的主窗口中，添加以下代码：

from switch_button import SwitchButton

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()

        self.switch_button = SwitchButton()

        self.setCentralWidget(self.switch_button)


if __name__ == "__main__":
    import sys

    app = QApplication(sys.argv)
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())