上一章节：VSCode安装PYQT5-CSDN博客

QTDesigner初识

vscode导航栏右键，新建ui文件，弹出QT Designer。

完成创建后，可以在新窗口中进行UI布局。

QTDesigner左侧为组件库，中间为UI布局界面，右侧分别为对象查看器、组件属性编辑器、资源浏览器。

将需要的组件拉进UI窗口，然后在右侧更新属性信息。

QTDesigner上方为快捷处理按钮

首先，将Frame拖入，然后分别拖入PushButton、2个TextLabel，放到这个Frame中。接下来，按住Ctrl，分别点击这三个组件，选中后点击水平分布进行对齐。

使用Frame的优点：拖动Frame，则可以不改变组件间相对位置的情况下，进行移动。

选中一个组件，在右侧编辑ObjectName对象名，从左到右分别赋值：DeviceConnectBt、DeviceNameLabel、SignalStrengthLabel。ObjectName用于通过代码对组件进行属性操作、事件绑定。

接下来，Ctrl+S，保存文件，MyFirstUi.ui。关闭QTDesigner。

在VSCode中，将MyFirstUi.ui，右键选择，PYQT：Compile Form，生成Ui_MyFirstUi.py文件。

更改ui文件，只要右键ui文件，选择PYQT：Edit in Designer。

注：每次修改ui文件后，需要重新编译py文件，即执行PYQT：Compile Form操作。

代码部分

新建MyMainWindow.py文件，用于执行图形界面显示和事件控制。

实现功能：模拟实现设备连接信息显示。

            

基本套路

启动ui窗口的程序套路，运行该代码就能将项目运行起来。

from PyQt5.QtWidgets import QMainWindow, QApplication
from Ui_MyFirstUi import Ui_MainWindow
import sys


class MainPageWindow(QMainWindow, Ui_MainWindow):
    # init part
    def __init__(self, parent=None):
        super(MainPageWindow, self).__init__(parent)
        self.setupUi(self)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    mainWindow = MainPageWindow()
    mainWindow.show()
    sys.exit(app.exec_())

给按钮赋予功能

点击按钮，显示设备名和信号强度，按钮名变为“断开连接”。

再次点击，设备名、信号强度消失，按钮名变为“点击连接”。

完整代码

MyMainWindow.py

from PyQt5.QtWidgets import QMainWindow, QApplication
from Ui_MyFirstUi import Ui_MainWindow
import sys


class MainPageWindow(QMainWindow, Ui_MainWindow):
    # 初始化程序
    def __init__(self, parent=None):
        super(MainPageWindow, self).__init__(parent)
        self.setupUi(self)
        self.Event_DeveiceConnectBt()

    def Event_DeveiceConnectBt(self):
        self.DeviceConnectBt.clicked.connect(self.actionEvent_showDeviceName)

    def actionEvent_showDeviceName(self):
        # 显示设备信息
        if self.DeviceConnectBt.text() == "点击连接":
            self.DeviceNameLabel.setText("Device_Ediffier_Z3")
            self.SignalStrengthLabel.setStyleSheet(
                "QLabel { background-color: green; color:white;}")
            self.SignalStrengthLabel.setText("信号强")
            self.DeviceConnectBt.setText("断开连接")
            print(f"当前按钮状态：{self.DeviceConnectBt.text()}")
        # 隐藏设备信息
        elif self.DeviceConnectBt.text() == "断开连接":
            self.DeviceNameLabel.setText("")
            self.SignalStrengthLabel.setStyleSheet(
                "QLabel { background-color: rgb(240, 240, 240); color:white;}")
            self.SignalStrengthLabel.setText("")
            self.DeviceConnectBt.setText("点击连接")
            print(f"当前按钮状态：{self.DeviceConnectBt.text()}")


if __name__ == '__main__':
    app = QApplication(sys.argv)
    mainWindow = MainPageWindow()
    mainWindow.show()
    sys.exit(app.exec_())