Designer Qt

Resumo : neste tutorial, você aprenderá como usar a ferramenta Qt Designer para projetar interfaces de usuário para aplicativos PyQt.

Instale as ferramentas PyQt

As ferramentas PyQt6 são compatíveis com Python 3.9 no momento em que este tutorial foi escrito. Portanto, você precisa instalar o Python 3.9 para continuar o tutorial.

Observe que se você tiver o Python 3.10 ou superior, poderá instalar o Python 3.9 em um diretório separado e usar as ferramentas PyQt6. Por exemplo, você pode instalar o Python 3.9 no diretório C:\Python39 no Windows.

Crie um novo ambiente virtual

Primeiro, crie um diretório para hospedar os projetos PyQt6, por exemplo, D:\pyqt6

mkdir pyqt6Linguagem de código:  Python  ( python )

Segundo, crie um ambiente virtual usando Python 3.9 usando o venvmódulo:

python -m venv D:\pyqt6\pyqt6-envLinguagem de código:  Python  ( python )

Ative o ambiente virtual

Primeiro, navegue até o pyqt6-envdiretório do ambiente virtual:

cd D:\pyqt6\pyqt6-envLinguagem de código:  Python  ( python )

Segundo, navegue até a Scriptspasta:

cd ScriptsLinguagem de código:  Python  ( python )

Terceiro, ative o ambiente virtual executando o arquivo activate.bat:

activateLinguagem de código:  Python  ( python )

Ele mostrará o seguinte no Windows:

(pyqt6-env) d:\pyqt6\pyqt6-env\Scripts>Linguagem de código:  Python  ( python )

Instale PyQt6 e suas ferramentas

Primeiro, execute o seguinte comando para instalar pyqt6o pacote no pyqt6-envambiente virtual:

pip install pyqt6Linguagem de código:  Python  ( python )

Segundo, instale o pyqt6-toolspacote que contém o Qt Designer e outras ferramentas relacionadas:

pip install pyqt6-toolsLinguagem de código:  Python  ( python )

O pyqt-toolspacote instalará o Qt Designer no seguinte local:

D:\pyqt6\pyqt6-env\Lib\site-packages\qt6_applications\Qt\bin\designer.exeLinguagem de código:  Python  ( python )

Terceiro, execute o pyuic6comando (dentro do pyqt6-envambiente virtual) para verificar a versão:

pyuic6 -VLinguagem de código:  Python  ( python )

E você verá a seguinte saída:

6.1.0Linguagem de código:  Python  ( python )

O pyuic6 é uma ferramenta para converter um arquivo de design ( .ui) gerado pelo Qt Designer para um arquivo Python ( .py).

Inicie o Qt Designer

No Shell, digite o designercomando para iniciar o Qt Designer:

(pyqt6-env) d:\pyqt6\pyqt6-env\Scripts>designerLinguagem de código:  Python  ( python )

O Qt Designer ficará assim:

Designer Qt

Criando um formulário de login

Criaremos um formulário de login simples usando o designer Qt e o carregaremos em nosso programa Python.

Primeiro, selecione File > Newou pressione Ctrl-No atalho do teclado para abrir a caixa de diálogo Novo formulário:

Designer Qt - Novo

Em segundo lugar, selecione Widgete templates\formsclique no Createbotão:

Qt Designer - Crie um widget

Ele criará um QWidgetda seguinte forma:

Designer Qt - Formulário

Você pode definir o layout do widget e arrastar e soltar widgets da caixa de widgets para o formulário.

Configurando propriedades do widget

No Editor de propriedades, você pode definir um nome para o widget, por exemplo,login_form

Qt Designer - Propriedades do widget

e o título da janela:

Qt Designer -Título da janela

Adicionando widgets ao formulário de login

Primeiro, adicione os widgets QLabel, QLineEdite QPushButtonao formulário:

Designer Qt - widgets

A tabela a seguir lista os campos, seus tipos e nomes:

Campo Ferramenta Nome do objeto
Janela de login QWidget login_form
Endereço de email QLineEdit email_line_edit
Senha QLineEdit password_line_edit
Botão de login QPushButton btn_login

Segundo, defina o modo de eco do campo de senha para Password:

Qt Designer - Campo de senha

Terceiro, clique com o botão direito no widget e defina seu layout como Form Layout :

Qt Designer - Definir layout de formulário

O formulário mudará para o seguinte:

Qt Designer - Layout de formulário

Quarto, altere o tamanho do Loginbotão definindo sua Política de Tamanho Horizontal como Fixa:

Qt Designer - Altere o tamanho do botão

Quinto, salve o formulário no D:\pyqt6diretório como login_form.uiarquivo.

Sexto, selecione Form > Preview...o menu ou o atalho de teclado Ctrl-Rpara visualizar o formulário:

Designer Qt - Visualização

Finalmente, feche o Qt Designer.

Existem duas maneiras de usar o login_form.ui de um programa Python:

  1. Converta o arquivo .ui em código Python e use o código gerado no programa.
  2. Use diretamente o arquivo .ui no programa.

Convertendo arquivo .ui em código Python

Primeiro, execute o seguinte comando para converter o login_form.uiarquivo em login_form.pyarquivo:

pyuic6 -o login_form.py login_form.uiLinguagem de código:  Python  ( python )

Observe que você precisa executar a pyuic6partir do ambiente virtual pyqt6-env.

O pyuic6gerado a login_form.pypartir do login_form.uiarquivo. O login_form.pycontém o seguinte código Python gerado:

# 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"))Linguagem de código:  Python  ( python )

É importante observar que você nunca deve alterar manualmente o arquivo login_form.py. Porque todos os seus ajustes manuais serão perdidos se você editar no login_form.uiQt Designer e regenerar login_form.pynovamente.

Segundo, crie o login.pyarquivo e importe-o 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())Linguagem de código:  Python  ( python )

Como funciona.

  1. Importar Ui_login_formclasse do login_form.pyarquivo
  2. Crie uma nova instância Ui_login_forme chame o setupUi()método para configurar as interfaces do usuário.

Terceiro, execute o login.pyarquivo:

python login.pyLinguagem de código:  Python  ( python )

Ele mostrará a janela de login:

Qt Designer - Janela de Login

Referenciando widgets filhos

Para usar os widgets filhos do Ui_login_formwidget, você referencia seus nomes usando a self.uivariável.

Por exemplo, você pode adicionar uma autenticação simples quando o usuário insere um endereço de e-mail e senha e clica no botão Login da seguinte forma:

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())Linguagem de código:  Python  ( python )

Como funciona.

Primeiro, conecte o sinal clicado do botão ao método de autenticação. Observe que referenciamos o btn_loginbotão por meio da self.uivariável:

self.ui.btn_login.clicked.connect(self.authenticate)Linguagem de código:  Python  ( python )

Segundo, defina o authenticate()método que obtém valores de email_line_edite password_line_edite execute uma verificação simples desses valores em relação aos valores codificados:

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.")Linguagem de código:  Python  ( python )

Aviso de segurança: Nunca faça isso em aplicações reais.

Além de criar uma instância dentro Ui_login_formda janela de login, você pode herdar a Ui_login_formjanela usando múltiplas heranças e referenciar diretamente os widgets filhos assim:

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())Linguagem de código:  Python  ( python )

Usando o arquivo .ui diretamente

Outra forma de utilizar o design gerado pelo Qt Designer é carregar o .uiarquivo diretamente utilizando a loadUi()função do uicmódulo:

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())Linguagem de código:  Python  ( python )

A loadUi()função retorna uma instância de QWidgete você pode referenciar os widgets filhos por meio da self.uivariável.

Quando você deve usar o Qt Designer

O arquivo .ui gerado pelo designer Qt cria uma camada de abstração entre o widget disponível e o código que o consome.

Portanto, se você está começando com PyQt, você deve codificá-lo UImanualmente em vez de usar o Qt Designer. Ao fazer isso, você sabe exatamente quais widgets estão disponíveis no aplicativo.

No entanto, se você estiver familiarizado com PyQt e trabalhar em um aplicativo grande, deverá usar o Qt Designer para criar um bom design e melhorar a produtividade.

Resumo

  • Use o Qt Designer para projetar interfaces de usuário para aplicativos grandes.
  • Use a pyuic6ferramenta para converter um arquivo .ui em um arquivo de código-fonte Python.
  • Use loadUi()a função do uicmódulo para carregar o .uiarquivo diretamente.
PyQt QTreeWidget
Anterior
PyQt QTreeWidget

Próximo
PyQtQThread

PyQtQThread

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *