【Python交易程式開發現場7】使用Qt Designer設計GUI (1) | 實現界面與邏輯分離 | Signal/Slot

 1. 使用Qt Designer

2. Convert .ui to .py

將python310\Scripts\下的pyuic6.exe拖拉至cmd視窗

Run: pyuic6.exe -x "XXX.ui" -o "XXX.py"

3. ctw1.ui to ctw1.py後之python檔案內容如下:

# Form implementation generated from reading ui file 'D:\tw-skcom-python-43\all\ctw1.ui'

#

# Created by: PyQt6 UI code generator 6.4.2

#

# WARNING: Any manual changes made to this file will be lost when pyuic6 is

# run again.  Do not edit this file unless you know what you are doing.

from PyQt6 import QtCore, QtGui, QtWidgets

class Ui_Form(object):

    def setupUi(self, Form):

        Form.setObjectName("Form")

        Form.resize(798, 537)

        self.pushButton = QtWidgets.QPushButton(parent=Form)

        self.pushButton.setGeometry(QtCore.QRect(50, 40, 75, 24))

        self.pushButton.setObjectName("pushButton")

        self.pushButton_2 = QtWidgets.QPushButton(parent=Form)

        self.pushButton_2.setGeometry(QtCore.QRect(140, 40, 75, 24))

        self.pushButton_2.setObjectName("pushButton_2")

        self.pushButton_3 = QtWidgets.QPushButton(parent=Form)

        self.pushButton_3.setGeometry(QtCore.QRect(240, 40, 91, 24))

        self.pushButton_3.setObjectName("pushButton_3")

        self.listView = QtWidgets.QListView(parent=Form)

        self.listView.setGeometry(QtCore.QRect(50, 110, 331, 401))

        self.listView.setObjectName("listView")

        self.listWidget = QtWidgets.QListWidget(parent=Form)

        self.listWidget.setGeometry(QtCore.QRect(420, 110, 341, 401))

        self.listWidget.setObjectName("listWidget")

        self.retranslateUi(Form)

        QtCore.QMetaObject.connectSlotsByName(Form)

    def retranslateUi(self, Form):

        _translate = QtCore.QCoreApplication.translate

        Form.setWindowTitle(_translate("Form", "Form"))

        self.pushButton.setText(_translate("Form", "1-Login"))

        self.pushButton_2.setText(_translate("Form", "2-Connect"))

        self.pushButton_3.setText(_translate("Form", "3-Disconnect"))

if __name__ == "__main__":

    import sys

    app = QtWidgets.QApplication(sys.argv)

    Form = QtWidgets.QWidget()

    ui = Ui_Form()

    ui.setupUi(Form)

    Form.show()

    sys.exit(app.exec()) # app.exec_()中的底線要拿掉

4. 另加一檔案: call_ctw1.py, 以實現界面與邏輯分離, 檔案內容如下:

import sys  

from PyQt6.QtWidgets import QApplication , QMainWindow

from ctw1 import *

class MyMainWindow(QMainWindow, Ui_Form):

    def __init__(self, parent=None):    

        super(MyMainWindow, self).__init__(parent)

        self.setupUi(self)

           

if __name__=="__main__":  

    app = QApplication(sys.argv)  

    myWin = MyMainWindow()  

    myWin.show()  

    sys.exit(app.exec())  

5. 加signal/slot function:

import sys  

from PyQt6.QtWidgets import QApplication , QMainWindow

from ctw1 import *

class MyMainWindow(QMainWindow, Ui_Form):

    def __init__(self, parent=None):    

        super(MyMainWindow, self).__init__(parent)

        self.setupUi(self)

        self.pushButton.clicked.connect(self.twTest) #ctw signal

    def twTest(self):  #ctw slot function

        print("test...")    

        self.listWidget.addItem("add item")

if __name__=="__main__":  

    app = QApplication(sys.argv)  

    myWin = MyMainWindow()  

    myWin.show()  

    sys.exit(app.exec())  

6. 執行結果: (按四下按鈕1)