上一章节:VSCode安装PYQT5-CSDN博客
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_())