Инструмент Qt Designer в Python — использование на примерах

АвторДмитрий Захаров Часы

Инструмент Qt Designer используется для проектирования пользовательских интерфейсов для приложений PyQt в Python.

Содержание

Установка инструментов PyQt

На момент написания этого руководства инструменты PyQt6 совместимы с Python 3.9. Поэтому для продолжения руководства вам необходимо установить Python 3.9.

Обратите внимание, что если у вас есть Python 3.10 или выше, вы можете установить Python 3.9 в отдельный каталог и использовать инструменты PyQt6. Например, вы можете установить Python 3.9 в каталог C:\Python39 в Windows.

Создание новой виртуальной среды

Сначала создайте каталог для размещения проектов PyQt6, например, D:\pyqt6

mkdir pyqt6

Затем создайте виртуальную среду с помощью Python 3.9, используя модуль venv:

python -m venv D:\pyqt6\pyqt6-env

Активация виртуальной среды

  • Сначала перейдите в каталог виртуальной среды pyqt6-env:
cd D:\pyqt6\pyqt6-env
  • Во-вторых, перейдите в папку «Scripts»:
cd Scripts
  • В-третьих, активируйте виртуальную среду, выполнив файл activate.bat:
activate

В Windows отобразится следующее:

(pyqt6-env) d:\pyqt6\pyqt6-env\Scripts>

Установка PyQt6 и его инструментов

  • Сначала выполните следующую команду для установки пакета pyqt6 в виртуальную среду pyqt6-env:
pip install pyqt6
  • Во-вторых, установите пакет pyqt6-tools, содержащий Qt Designer и другие связанные инструменты:
pip install pyqt6-tools

Пакет pyqt-tools установит Qt Designer в следующее место:

D:\pyqt6\pyqt6-env\Lib\site-packages\qt6_applications\Qt\bin\designer.exe
  • В-третьих, выполните команду pyuic6(в виртуальной среде pyqt6-env), чтобы проверить версию:
pyuic6 -V

И вы увидите следующий вывод:

6.1.0

Pyuic6 — это инструмент для преобразования файла дизайна(.ui), созданного Qt Designer, в файл Python(.py).

Запуск Qt Designer

В командной строке введите команду designer для запуска Qt Designer:

(pyqt6-env) d:\pyqt6\pyqt6-env\Scripts>designer

Qt Designer будет выглядеть так:

Пример запуска Qt-Designer

Создание формы входа

Мы создадим простую форму входа с помощью конструктора Qt и загрузим ее в нашу программу Python.

Сначала выберите Файл > Создать или нажмите сочетание клавиш Ctrl-N, чтобы открыть диалоговое окно «New Form»:

Qt Designer - New

Во-вторых, выберите Widget из шаблонов\форм и нажмите кнопку Create:

Qt Designer — создание виджета

Он создаст QWidget следующим образом:

Qt Designer - Форма

Вы можете настроить макет виджета и перетаскивать виджеты из поля виджетов в форму.

Настройка свойств виджета

В редакторе свойств вы можете задать имя виджета, например login_form.

Qt Designer — Свойства виджета

и заголовок окна:

Qt Designer - Заголовок окна

Добавление виджетов в форму входа

  • Сначала добавьте на форму виджеты QLabel, QLineEdit и QPushButton:

Qt Designer - добавление виджетов

В следующей таблице перечислены поля, их типы и названия:

Поле Виджет Имя объекта
Login Window QWidget login_form
Email Address QLineEdit email_line_edit
Password QLineEdit password_line_edit
Login Button QPushButton btn_login
  • Во-вторых, установите режим эха для поля пароля на «Password»:

Qt Designer - Поле пароля

  • В-третьих, щелкните правой кнопкой мыши по виджету и установите для него макет «Form Layout»:

Qt Designer — настройка макета формы

Форма изменится на следующую:

Qt Designer — изменение макета формы

  • В-четвертых, измените размер кнопки «Login», установив для нее политику горизонтального размера значение «Fixed»:

Qt Designer - Изменение размера кнопки

  • В-пятых, сохраните форму в каталоге D:\pyqt6 как файл login_form.ui.
  • В-шестых, выберите меню Форма > Предварительный просмотр… или нажмите сочетание клавиш Ctrl-R, чтобы просмотреть форму:

Qt Designer — предварительный просмотр

  • Наконец, закройте Qt Designer.

Существует два способа использования login_form.ui из программы Python:

  1. Преобразуйте файл .ui в код Python и используйте сгенерированный код из программы.
  2. Непосредственно используйте файл .ui в программе.

Преобразование файла .ui в код Python

Сначала выполните следующую команду, чтобы преобразовать файл login_form.ui в файл login_form.py:

pyuic6 -o login_form.py login_form.ui

Обратите внимание, что вам необходимо запустить pyuic6 из виртуальной среды pyqt6-env.

Pyuic6 сгенерировал login_form.py из файла login_form.ui. Login_form.py содержит следующий сгенерированный код Python:

# Form implementation generated from reading ui file 'login_form.ui'
#
# Created by: PyQt6 UI code generator 6.1.0
#
# 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_login_form(object):
    def setupUi(self, login_form):
        login_form.setObjectName("login_form")
        login_form.resize(269, 108)
        self.formLayout = QtWidgets.QFormLayout(login_form)
        self.formLayout.setObjectName("formLayout")
        self.label = QtWidgets.QLabel(login_form)
        self.label.setObjectName("label")
        self.formLayout.setWidget(0, QtWidgets.QFormLayout.ItemRole.LabelRole, self.label)
        self.email_line_edit = QtWidgets.QLineEdit(login_form)
        self.email_line_edit.setObjectName("email_line_edit")
        self.formLayout.setWidget(0, QtWidgets.QFormLayout.ItemRole.FieldRole, self.email_line_edit)
        self.label_2 = QtWidgets.QLabel(login_form)
        self.label_2.setObjectName("label_2")
        self.formLayout.setWidget(1, QtWidgets.QFormLayout.ItemRole.LabelRole, self.label_2)
        self.password_line_edit = QtWidgets.QLineEdit(login_form)
        self.password_line_edit.setEchoMode(QtWidgets.QLineEdit.EchoMode.Password)
        self.password_line_edit.setObjectName("password_line_edit")
        self.formLayout.setWidget(1, QtWidgets.QFormLayout.ItemRole.FieldRole, self.password_line_edit)
        self.btn_login = QtWidgets.QPushButton(login_form)
        sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Policy.Fixed, QtWidgets.QSizePolicy.Policy.Fixed)
        sizePolicy.setHorizontalStretch(0)
        sizePolicy.setVerticalStretch(0)
        sizePolicy.setHeightForWidth(self.btn_login.sizePolicy().hasHeightForWidth())
        self.btn_login.setSizePolicy(sizePolicy)
        self.btn_login.setObjectName("btn_login")
        self.formLayout.setWidget(2, QtWidgets.QFormLayout.ItemRole.FieldRole, self.btn_login)

        self.retranslateUi(login_form)
        QtCore.QMetaObject.connectSlotsByName(login_form)

    def retranslateUi(self, login_form):
        _translate = QtCore.QCoreApplication.translate
        login_form.setWindowTitle(_translate("login_form", "Login"))
        self.label.setText(_translate("login_form", "Email Address"))
        self.label_2.setText(_translate("login_form", "Password"))
        self.btn_login.setText(_translate("login_form", "Login"))

Важно отметить, что вам никогда не следует вручную изменять файл login_form.py. Поскольку все ваши ручные настройки будут потеряны, если вы отредактируете login_form.ui в Qt Designer и снова сгенерируете login_form.py.

Во-вторых, создайте файл login.py и импортируйте файл login_ui.py:

import sys
from PyQt6.QtWidgets import QApplication, QWidget
from login_form import Ui_login_form


class Login(QWidget):
    def __init__(self):
        super().__init__()

        # use the Ui_login_form
        self.ui = Ui_login_form()       
        self.ui.setupUi(self)       
        
        # show the login window
        self.show()
    

if __name__ == '__main__':
    app = QApplication(sys.argv)
    login_window = Login()
    sys.exit(app.exec())

Как это работает.

  1. Импортируйте класс Ui_login_form из файла login_form.py
  2. Создайте новый экземпляр Ui_login_form и вызовите метод setupUi() для настройки пользовательских интерфейсов.

В-третьих, выполните файл login.py:

python login.py

Появится окно входа в систему:

Qt Designer — Окно входа

Ссылки на дочерние виджеты

Чтобы использовать дочерние виджеты виджета Ui_login_form, вы ссылаетесь на их имена с помощью переменной self.ui.

Например, вы можете добавить простую аутентификацию, когда пользователь вводит адрес электронной почты и пароль и нажимает кнопку «Войти» следующим образом:

import sys
from PyQt6.QtWidgets import QApplication, QWidget, QMessageBox
from login_form import Ui_login_form


class Login(QWidget):
    def __init__(self):
        super().__init__()

        # use the Ui_login_form
        self.ui = Ui_login_form()       
        self.ui.setupUi(self)       

        # authenticate when the login button is clicked
        self.ui.btn_login.clicked.connect(self.authenticate)
        
        # show the login window
        self.show()

    def authenticate(self):
        email = self.ui.email_line_edit.text()
        password = self.ui.password_line_edit.text()

        if email == '[email protected]' and password == '123456':
            QMessageBox.information(self, 'Success',"You're logged in!")
        else:
            QMessageBox.critical(self, 'Error',"Invalid email or password.")
    

if __name__ == '__main__':
    app = QApplication(sys.argv)
    login_window = Login()
    sys.exit(app.exec())

Как это работает.

  • Сначала подключите сигнал нажатия кнопки к методу аутентификации. Обратите внимание, что мы ссылаемся на кнопку btn_login через переменную self.ui:
self.ui.btn_login.clicked.connect(self.authenticate)
  • Во-вторых, определите метод authenticate(), который получает значения из email_line_edit и password_line_edit, и выполните простую проверку этих значений на соответствие жестко запрограммированным значениям:
def authenticate(self):
    email = self.ui.email_line_edit.text()
    password = self.ui.password_line_edit.text()

    if email == '[email protected]' and password == '123456':
        QMessageBox.information(self, 'Success',"You're logged in!")
    else:
        QMessageBox.critical(self, 'Error',"Invalid email or password.")

Уведомление о безопасности: никогда не делайте этого в реальных приложениях.

Помимо создания экземпляра Ui_login_form внутри окна входа, вы можете наследовать окно Ui_login_form, используя множественное наследование, и напрямую ссылаться на дочерние виджеты следующим образом:

import sys
from PyQt6.QtWidgets import QApplication, QWidget, QMessageBox
from login_form import Ui_login_form


class Login(QWidget,Ui_login_form):
    def __init__(self):
        super().__init__()

        # setup the UI
        self.setupUi(self)       

        # authenticate when the login button is clicked
        self.btn_login.clicked.connect(self.authenticate)
        
        # show the login window
        self.show()

    def authenticate(self):
        email = self.email_line_edit.text()
        password = self.password_line_edit.text()

        if email == '[email protected]' and password == '123456':
            QMessageBox.information(self, 'Success',"You're logged in!")
        else:
            QMessageBox.critical(self, 'Error',"Invalid email or password.")
    

if __name__ == '__main__':
    app = QApplication(sys.argv)
    login_window = Login()
    sys.exit(app.exec())

Использование файла .ui напрямую

Другой способ использования дизайна, созданного Qt Designer, — это загрузка файла .ui напрямую с помощью функции loadUi() модуля uic:

from PyQt6.QtWidgets import QApplication, QWidget, QMessageBox
from PyQt6 import uic
import sys

class Login(QWidget):
    def __init__(self):
        super().__init__()
        self.ui = uic.loadUi('login_form.ui', self)

        # authenticate when the login button is clicked
        self.ui.btn_login.clicked.connect(self.authenticate)

        self.show()
    
    def authenticate(self):
        email = self.email_line_edit.text()
        password = self.password_line_edit.text()

        if email == '[email protected]' and password == '123456':
            QMessageBox.information(self, 'Success',"You're logged in!")
        else:
            QMessageBox.critical(self, 'Error',"Invalid email or password.")

if __name__ == '__main__':
    app = QApplication(sys.argv)
    login_window = Login()
    sys.exit(app.exec())

Функция loadUi() возвращает экземпляр QWidget, и вы можете ссылаться на дочерние виджеты через переменную self.ui.

Когда следует использовать Qt Designer

Файл .ui, созданный дизайнером Qt, создает уровень абстракции между доступным виджетом и кодом, который его использует. Поэтому, если вы начинаете с PyQt, вам следует кодировать UI вручную, а не использовать Qt Designer. Делая это, вы точно знаете, какие виджеты доступны в приложении.

Однако если вы знакомы с PyQt и работаете над большим приложением, вам следует использовать Qt Designer для создания хорошего дизайна и повышения производительности.

Python Web Developer

Похожие посты
Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *