{"id":5320,"date":"2022-10-18T08:42:56","date_gmt":"2022-10-18T08:42:56","guid":{"rendered":"https:\/\/www.pythontutorial.net\/?page_id=5320"},"modified":"2022-10-18T09:23:54","modified_gmt":"2022-10-18T09:23:54","slug":"qt-designer","status":"publish","type":"page","link":"https:\/\/www.pythontutorial.net\/pyqt\/qt-designer\/","title":{"rendered":"Qt Designer"},"content":{"rendered":"\n

Summary<\/strong>: in this tutorial, you’ll learn how to use the Qt Designer tool to design user interfaces for PyQt applications.<\/p>\n\n\n\n

Install the PyQt tools #<\/a><\/h2>\n\n\n\n

PyQt6 tools are compatible with Python 3.9 at the time of writing this tutorial. Therefore, you need to install Python 3.9 to continue the tutorial.<\/p>\n\n\n\n

Note that if you have Python 3.10 or higher, you can install Python 3.9 in a separate directory and use PyQt6 tools. For example, you can install Python 3.9 in the C:\\Python39 directory on Windows.<\/p>\n\n\n\n

Create a new virtual environment #<\/a><\/h3>\n\n\n\n

First, create a directory to host the PyQt6 projects e.g., D:\\pyqt6<\/p>\n\n\n

mkdir pyqt6<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
python -m venv D:\\pyqt6\\pyqt6-env<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Activate the virtual environment #<\/a><\/h3>\n\n\n\n
First, navigate to the pyqt6-env<\/code> virtual environment directory:<\/p>\n\n\n
cd D:\\pyqt6\\pyqt6-env<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Second, navigate to the Scripts<\/code> folder:<\/p>\n\n\n
cd Scripts<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Third, activate the virtual environment by executing the activate.bat file:<\/p>\n\n\n
activate<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
It’ll show the following on Windows:<\/p>\n\n\n
(pyqt6-env) d:\\pyqt6\\pyqt6-env\\Scripts><\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Install PyQt6 and its tools #<\/a><\/h3>\n\n\n\n
First, execute the following command to install pyqt6<\/code> package in the pyqt6-env<\/code> virtual environment:<\/p>\n\n\n
pip install pyqt6<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Second, install the pyqt6-tools<\/code> package that contains the Qt Designer and other related tools:<\/p>\n\n\n
pip install pyqt6-tools<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
The pyqt-tools<\/code> package will install the Qt Designer in the following location:<\/p>\n\n\n
D:\\pyqt6\\pyqt6-env\\Lib\\site-packages\\qt6_applications\\Qt\\bin\\designer.exe<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Third, execute the pyuic6<\/code> command (within the pyqt6-env<\/code> virtual environment) to check the version:<\/p>\n\n\n
pyuic6 -V<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
And you’ll see the following output:<\/p>\n\n\n
6.1<\/span>.0<\/span><\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
The pyuic6 is a tool for converting a design file (.ui<\/code>) generated by Qt Designer to a Python file (.py<\/code>).<\/p>\n\n\n\n
Launch the Qt Designer #<\/a><\/h2>\n\n\n\n
From the Shell, type the designer<\/code> command to launch the Qt Designer:<\/p>\n\n\n
(pyqt6-env) d:\\pyqt6\\pyqt6-env\\Scripts>designer<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
The Qt Designer will look like this:<\/p>\n\n\n\n
\"Qt<\/figure>\n\n\n\n
Creating a login form #<\/a><\/h2>\n\n\n\n
We’ll create a simple login form using the Qt designer and load it into our Python program.<\/p>\n\n\n\n
First, select File > New<\/code> or press Ctrl-N<\/code> keyboard shortcut to open the New Form dialog:<\/p>\n\n\n\n
\"Qt<\/figure>\n\n\n\n
Second, select the Widget<\/code> from the templates\\forms<\/code> and click the Create<\/code> button:<\/p>\n\n\n\n
\"Qt<\/figure>\n\n\n\n
It’ll create a QWidget<\/code> as follows:<\/p>\n\n\n\n
\"Qt<\/figure>\n\n\n\n
You can set the layout for the widget, and drag and drop widgets from the Widget Box to the form.<\/p>\n\n\n\n
Setting widget properties #<\/a><\/h3>\n\n\n\n
In the Property Editor, you can set a name for the widget e.g., login_form<\/code> <\/p>\n\n\n\n
\"Qt<\/figure>\n\n\n\n
and the window title:<\/p>\n\n\n\n
\"Qt<\/figure>\n\n\n\n
Adding widgets to the login form #<\/a><\/h3>\n\n\n\n
First, add the widgets QLabel<\/code>, QLineEdit<\/code>, and QPushButton<\/code> to the form:<\/p>\n\n\n\n
\"Qt<\/figure>\n\n\n\n
The following table lists the fields, their types, and names:<\/p>\n\n\n\n
Field<\/th>Widget<\/th>Object Name<\/th><\/tr><\/thead>
Login Window<\/td>QWidget<\/code><\/td>login_form<\/code><\/td><\/tr>
Email Address<\/td>QLineEdit<\/code><\/td>email_line_edit<\/code><\/td><\/tr>
Password<\/td>QLineEdit<\/code><\/td>password_line_edit<\/code><\/td><\/tr>
Login Button<\/td>QPushButton<\/code><\/td>btn_login<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Second, set the echo mode of the password field to Password<\/code>:<\/p>\n\n\n\n
\"Qt<\/figure>\n\n\n\n
Third, right-click the widget and set its layout to Form Layout<\/a>:<\/p>\n\n\n\n
\"Qt<\/figure>\n\n\n\n
The form will change to the following:<\/p>\n\n\n\n
\"Qt<\/figure>\n\n\n\n
Fourth, change the size of the Login<\/code> button by setting its Horizontal Size Policy to Fixed:<\/p>\n\n\n\n
\"Qt<\/figure>\n\n\n\n
Fifth, save the form to the D:\\pyqt6<\/code> directory as login_form.ui<\/code> file.<\/p>\n\n\n\n
Sixth, select Form > Preview...<\/code> menu or the keyboard shortcut Ctrl-R<\/code> to preview the form:<\/p>\n\n\n\n
\"Qt<\/figure>\n\n\n\n
Finally, close the Qt Designer.<\/p>\n\n\n\n
There’re two ways to use the login_form<\/code>.ui from a Python program:<\/p>\n\n\n\n
  1. Convert the .ui file to Python code and use the generated code from the program.<\/li>
  2. Directly use the .ui file in the program.<\/li><\/ol>\n\n\n\n
    Converting .ui file to Python code #<\/a><\/h2>\n\n\n\n
    First, execute the following command to convert the login_form.ui<\/code> file to login_form.py<\/code> file:<\/p>\n\n\n
    pyuic6 -o login_form.py login_form.ui<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
    Note that you need to run the pyuic6<\/code> from the pyqt6-env virtual environment.<\/p>\n\n\n\n
    The pyuic6<\/code> generated the login_form.py<\/code> from the login_form.ui<\/code> file. The login_form.py<\/code> contains the following generated Python code:<\/p>\n\n\n
    # Form implementation generated from reading ui file 'login_form.ui'<\/span>\n#<\/span>\n# Created by: PyQt6 UI code generator 6.1.0<\/span>\n#<\/span>\n# WARNING: Any manual changes made to this file will be lost when pyuic6 is<\/span>\n# run again.  Do not edit this file unless you know what you are doing.<\/span>\n\n\nfrom<\/span> PyQt6 import<\/span> QtCore, QtGui, QtWidgets\n\n\nclass<\/span> Ui_login_form<\/span>(object)<\/span>:<\/span>\n    def<\/span> setupUi<\/span>(self, login_form)<\/span>:<\/span>\n        login_form.setObjectName(\"login_form\"<\/span>)\n        login_form.resize(269<\/span>, 108<\/span>)\n        self.formLayout = QtWidgets.QFormLayout(login_form)\n        self.formLayout.setObjectName(\"formLayout\"<\/span>)\n        self.label = QtWidgets.QLabel(login_form)\n        self.label.setObjectName(\"label\"<\/span>)\n        self.formLayout.setWidget(0<\/span>, QtWidgets.QFormLayout.ItemRole.LabelRole, self.label)\n        self.email_line_edit = QtWidgets.QLineEdit(login_form)\n        self.email_line_edit.setObjectName(\"email_line_edit\"<\/span>)\n        self.formLayout.setWidget(0<\/span>, QtWidgets.QFormLayout.ItemRole.FieldRole, self.email_line_edit)\n        self.label_2 = QtWidgets.QLabel(login_form)\n        self.label_2.setObjectName(\"label_2\"<\/span>)\n        self.formLayout.setWidget(1<\/span>, QtWidgets.QFormLayout.ItemRole.LabelRole, self.label_2)\n        self.password_line_edit = QtWidgets.QLineEdit(login_form)\n        self.password_line_edit.setEchoMode(QtWidgets.QLineEdit.EchoMode.Password)\n        self.password_line_edit.setObjectName(\"password_line_edit\"<\/span>)\n        self.formLayout.setWidget(1<\/span>, QtWidgets.QFormLayout.ItemRole.FieldRole, self.password_line_edit)\n        self.btn_login = QtWidgets.QPushButton(login_form)\n        sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Policy.Fixed, QtWidgets.QSizePolicy.Policy.Fixed)\n        sizePolicy.setHorizontalStretch(0<\/span>)\n        sizePolicy.setVerticalStretch(0<\/span>)\n        sizePolicy.setHeightForWidth(self.btn_login.sizePolicy().hasHeightForWidth())\n        self.btn_login.setSizePolicy(sizePolicy)\n        self.btn_login.setObjectName(\"btn_login\"<\/span>)\n        self.formLayout.setWidget(2<\/span>, QtWidgets.QFormLayout.ItemRole.FieldRole, self.btn_login)\n\n        self.retranslateUi(login_form)\n        QtCore.QMetaObject.connectSlotsByName(login_form)\n\n    def<\/span> retranslateUi<\/span>(self, login_form)<\/span>:<\/span>\n        _translate = QtCore.QCoreApplication.translate\n        login_form.setWindowTitle(_translate(\"login_form\"<\/span>, \"Login\"<\/span>))\n        self.label.setText(_translate(\"login_form\"<\/span>, \"Email Address\"<\/span>))\n        self.label_2.setText(_translate(\"login_form\"<\/span>, \"Password\"<\/span>))\n        self.btn_login.setText(_translate(\"login_form\"<\/span>, \"Login\"<\/span>))<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
    It’s important to note that you should never manually change the login_form.py file. Because all your manual adjustments will be lost if you edit the login_form.ui<\/code> in the Qt Designer and regenerate the login_form.py<\/code> again.<\/p>\n\n\n\n
    Second, create the login.py<\/code> file and import the login_ui.py<\/code> file:<\/p>\n\n\n
    import<\/span> sys\nfrom<\/span> PyQt6.QtWidgets import<\/span> QApplication, QWidget\nfrom<\/span> login_form import<\/span> Ui_login_form\n\n\nclass<\/span> Login<\/span>(QWidget)<\/span>:<\/span>\n    def<\/span> __init__<\/span>(self)<\/span>:<\/span>\n        super().__init__()\n\n        # use the Ui_login_form<\/span>\n        self.ui = Ui_login_form()       \n        self.ui.setupUi(self)       \n        \n        # show the login window<\/span>\n        self.show()\n    \n\nif<\/span> __name__ == '__main__'<\/span>:\n    app = QApplication(sys.argv)\n    login_window = Login()\n    sys.exit(app.exec())<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
    How it works.<\/p>\n\n\n\n
    1. Import Ui_login_form<\/code> class from the login_form.py<\/code> file<\/li>
    2. Create a new instance of the Ui_login_form<\/code> and call the setupUi()<\/code> method to set up the user interfaces.<\/li><\/ol>\n\n\n\n
      Third, execute the login.py<\/code> file:<\/p>\n\n\n
      python login.py<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
      It’ll show the login window:<\/p>\n\n\n\n
      \"Qt<\/figure>\n\n\n\n
      Referencing child widgets #<\/a><\/h3>\n\n\n\n
      To use the child widgets of  Ui_login_form<\/code> widget, you reference their names using the self.ui<\/code> variable. <\/p>\n\n\n\n
      For example, you can add a simple authentication when the user enters an email address and password and click the Login button as follows:<\/p>\n\n\n
      import<\/span> sys\nfrom<\/span> PyQt6.QtWidgets import<\/span> QApplication, QWidget, QMessageBox\nfrom<\/span> login_form import<\/span> Ui_login_form\n\n\nclass<\/span> Login<\/span>(QWidget)<\/span>:<\/span>\n    def<\/span> __init__<\/span>(self)<\/span>:<\/span>\n        super().__init__()\n\n        # use the Ui_login_form<\/span>\n        self.ui = Ui_login_form()       \n        self.ui.setupUi(self)       \n\n        # authenticate when the login button is clicked<\/span>\n        self.ui.btn_login.clicked.connect(self.authenticate)\n        \n        # show the login window<\/span>\n        self.show()\n\n    def<\/span> authenticate<\/span>(self)<\/span>:<\/span>\n        email = self.ui.email_line_edit.text()\n        password = self.ui.password_line_edit.text()\n\n        if<\/span> email == 'john@test.com'<\/span> and<\/span> password == '123456'<\/span>:\n            QMessageBox.information(self, 'Success'<\/span>,\"You're logged in!\"<\/span>)\n        else<\/span>:\n            QMessageBox.critical(self, 'Error'<\/span>,\"Invalid email or password.\"<\/span>)\n    \n\nif<\/span> __name__ == '__main__'<\/span>:\n    app = QApplication(sys.argv)\n    login_window = Login()\n    sys.exit(app.exec())<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
      How it works.<\/p>\n\n\n\n
      First, connect the clicked signal of the button to the authenticate method. Notice that we reference the btn_login<\/code> button via the self.ui<\/code> variable:<\/p>\n\n\n
      self.ui.btn_login.clicked.connect(self.authenticate)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
      Second, define the authenticate()<\/code> method that gets values from the email_line_edit<\/code> and password_line_edit<\/code> and perform a simple check of these values against hard-coded values:<\/p>\n\n\n
      def<\/span> authenticate<\/span>(self)<\/span>:<\/span>\n    email = self.ui.email_line_edit.text()\n    password = self.ui.password_line_edit.text()\n\n    if<\/span> email == 'john@test.com'<\/span> and<\/span> password == '123456'<\/span>:\n        QMessageBox.information(self, 'Success'<\/span>,\"You're logged in!\"<\/span>)\n    else<\/span>:\n        QMessageBox.critical(self, 'Error'<\/span>,\"Invalid email or password.\"<\/span>)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
      Security Notice: Never do this in real applications.<\/p>\n\n\n\n
      import<\/span> sys\nfrom<\/span> PyQt6.QtWidgets import<\/span> QApplication, QWidget, QMessageBox\nfrom<\/span> login_form import<\/span> Ui_login_form\n\n\nclass<\/span> Login<\/span>(QWidget,Ui_login_form)<\/span>:<\/span>\n    def<\/span> __init__<\/span>(self)<\/span>:<\/span>\n        super().__init__()\n\n        # setup the UI<\/span>\n        self.setupUi(self)       \n\n        # authenticate when the login button is clicked<\/span>\n        self.btn_login.clicked.connect(self.authenticate)\n        \n        # show the login window<\/span>\n        self.show()\n\n    def<\/span> authenticate<\/span>(self)<\/span>:<\/span>\n        email = self.email_line_edit.text()\n        password = self.password_line_edit.text()\n\n        if<\/span> email == 'john@test.com'<\/span> and<\/span> password == '123456'<\/span>:\n            QMessageBox.information(self, 'Success'<\/span>,\"You're logged in!\"<\/span>)\n        else<\/span>:\n            QMessageBox.critical(self, 'Error'<\/span>,\"Invalid email or password.\"<\/span>)\n    \n\nif<\/span> __name__ == '__main__'<\/span>:\n    app = QApplication(sys.argv)\n    login_window = Login()\n    sys.exit(app.exec())<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
      Using .ui file directly #<\/a><\/h2>\n\n\n\n
      Another way to use the design generated by the Qt Designer is to load the .ui<\/code> file directly using the loadUi()<\/code> function of the uic<\/code> module:<\/p>\n\n\n
      from<\/span> PyQt6.QtWidgets import<\/span> QApplication, QWidget, QMessageBox\nfrom<\/span> PyQt6 import<\/span> uic\nimport<\/span> sys\n\nclass<\/span> Login<\/span>(QWidget)<\/span>:<\/span>\n    def<\/span> __init__<\/span>(self)<\/span>:<\/span>\n        super().__init__()\n        self.ui = uic.loadUi('login_form.ui'<\/span>, self)\n\n        # authenticate when the login button is clicked<\/span>\n        self.ui.btn_login.clicked.connect(self.authenticate)\n\n        self.show()\n    \n    def<\/span> authenticate<\/span>(self)<\/span>:<\/span>\n        email = self.email_line_edit.text()\n        password = self.password_line_edit.text()\n\n        if<\/span> email == 'john@test.com'<\/span> and<\/span> password == '123456'<\/span>:\n            QMessageBox.information(self, 'Success'<\/span>,\"You're logged in!\"<\/span>)\n        else<\/span>:\n            QMessageBox.critical(self, 'Error'<\/span>,\"Invalid email or password.\"<\/span>)\n\nif<\/span> __name__ == '__main__'<\/span>:\n    app = QApplication(sys.argv)\n    login_window = Login()\n    sys.exit(app.exec())<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
      The loadUi()<\/code> function returns an instance of the QWidget<\/code> and you can reference the child widgets via the self.ui<\/code> variable.<\/p>\n\n\n\n
      When you should use Qt Designer #<\/a><\/h2>\n\n\n\n
      The .ui file generated by the Qt designer creates an abstraction layer between the available widget and the code that consumes it.<\/p>\n\n\n\n
      Therefore, if you are starting out with PyQt, you should code the UI<\/code> manually instead of using Qt Designer. By doing this, you know exactly what widgets are available in the application.<\/p>\n\n\n\n
      However, if you’re familiar with PyQt and work on a large application, you should use Qt Designer to create a good design and improve productivity.<\/p>\n\n\n\n
      Summary #<\/a><\/h2>\n\n\n\n
      • Use Qt Designer to design user interfaces for large applications.<\/li>
      • Use the pyuic6<\/code> tool to convert a .ui file into a Python source code file.<\/li>
      • Use loadUi()<\/code> function of the uic<\/code> module to load the .ui<\/code> file directly.<\/li><\/ul>\n
        \n\t
        \n\t\t
        Was this tutorial helpful ?<\/div>\n\t\t
        \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t<\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t Yes <\/span>\n\t\t\t<\/button>\n\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t<\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t No <\/span>\n\t\t\t<\/button>\n\t\t<\/div>\n\t<\/header>\n\n\t
        \n\t\t
        \n\t\t\t
        <\/div>\n\t\t\t
      Besides creating an instance of the Ui_login_form<\/code> inside the login window, you can inherit the Ui_login_form<\/code> window using multiple inheritances<\/a> and directly reference the child widgets like this:<\/p>\n\n\n
Second, create a virtual environment<\/a> using Python 3.9 using the venv<\/code> module:<\/p>\n\n\n