PyQt6 Qt Designer button click event

created at May 12, 2021, 3:12 p.m. views: 0

In the previous article, we implemented a click event with pure code (see PyQt6 click events), but in actual work, the Qt Designer will make this design much more easier, let's try this again.

Start Qt designer

reference: install and start Qt designer

Create ui elements by drag and drop

first, in Qt designer, choose widget template and click to create an empty form.

now from the “Widget box” on the left hand, we:

  • drag a Push Button from the Buttons drop-down menu to our empty form
  • drag a Label from the Display Widgets drop-down menu to our form

You can set the name or display attributes of these two elements on the right Property form or not. 

Now we save and rename this ui file to our project folder:

then we go back to our IDE, switch to our Terminal and navigate to which folder we saved our ui file:

(venv) E:\project\FluidIML>cd PYWD
(venv) E:\project\FluidIML\PYWD>

and use the follow command to transfer our .ui file to .py:

(venv) E:\project\FluidIML\PYWD>pyuic6 -x Button.ui -o runbutton.py

now we have an runbutton.py file in our folder, open it we will see:

# Form implementation generated from reading ui file 'Button.ui'
#
# Created by: PyQt6 UI code generator 6.0.3
#
# 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(400, 301)
        Form.setStyleSheet("")
        self.pushButton = QtWidgets.QPushButton(Form)
        self.pushButton.setGeometry(QtCore.QRect(140, 50, 93, 28))
        self.pushButton.setObjectName("pushButton")
        self.label = QtWidgets.QLabel(Form)
        self.label.setGeometry(QtCore.QRect(150, 160, 72, 15))
        self.label.setObjectName("label")

        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", "PushButton"))
        self.label.setText(_translate("Form", "TextLabel"))


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())

Create new methods for click event

what we want to do is to change the color of the Label, so in the generated runbutton.py we can write:

 def setupUi(self, Form):
     ...
    # signal
    self.pushButton.clicked.connect(self.clicked_btn)

 def clicked_btn(self):
    self.label.setStyleSheet("color:purple")

 def retranslateUi(self, Form):
    ...
  • self.pushButton.clicked.connect(self.clicked_btn): signal, once the button is clicked, the method clicked_btn will be called.
  • self.label.setStyleSheet("color:white"): functions to be executed after the button is clicked, it changes the color of the text of the label to purple.

Note: in the signal sentance self.pushButton.clicked.connect(self.clicked_btn), do not add parenthesis () at the end of method clicked_btn ( clicked_btn()), or you will get an error like:

AttributeError: 'Ui_Form' object has no attribute 'label'

save and run runbutton.py file, we will see the window with a button and a label:

the color of the “TextLabel” is by default the black color.

now we click the button and see what changes:

the color of the label has been changed to purple!

Other things to be noted

Because we are beginners, so here in this article we edit the runbutton.py file generated by pyuic directly. Normally, this action won't be advocated. 

Also, to change the color of the label is quite simple and stright-forward, you may explore and try more complex functions the PyQt can do.

Please log in to leave a comment.