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 pyqt6
Linguagem de código: Python ( python )
Segundo, crie um ambiente virtual usando Python 3.9 usando o venv
módulo:
python -m venv D:\pyqt6\pyqt6-env
Linguagem de código: Python ( python )
Ative o ambiente virtual
Primeiro, navegue até o pyqt6-env
diretório do ambiente virtual:
cd D:\pyqt6\pyqt6-env
Linguagem de código: Python ( python )
Segundo, navegue até a Scripts
pasta:
cd Scripts
Linguagem de código: Python ( python )
Terceiro, ative o ambiente virtual executando o arquivo activate.bat:
activate
Linguagem 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 pyqt6
o pacote no pyqt6-env
ambiente virtual:
pip install pyqt6
Linguagem de código: Python ( python )
Segundo, instale o pyqt6-tools
pacote que contém o Qt Designer e outras ferramentas relacionadas:
pip install pyqt6-tools
Linguagem de código: Python ( python )
O pyqt-tools
pacote instalará o Qt Designer no seguinte local:
D:\pyqt6\pyqt6-env\Lib\site-packages\qt6_applications\Qt\bin\designer.exe
Linguagem de código: Python ( python )
Terceiro, execute o pyuic6
comando (dentro do pyqt6-env
ambiente virtual) para verificar a versão:
pyuic6 -V
Linguagem de código: Python ( python )
E você verá a seguinte saída:
6.1.0
Linguagem 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 designer
comando para iniciar o Qt Designer:
(pyqt6-env) d:\pyqt6\pyqt6-env\Scripts>designer
Linguagem de código: Python ( python )
O Qt Designer ficará assim:
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 > New
ou pressione Ctrl-N
o atalho do teclado para abrir a caixa de diálogo Novo formulário:
Em segundo lugar, selecione Widget
e templates\forms
clique no Create
botão:
Ele criará um QWidget
da seguinte forma:
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
e o título da janela:
Adicionando widgets ao formulário de login
Primeiro, adicione os widgets QLabel
, QLineEdit
e QPushButton
ao formulário:
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
:
Terceiro, clique com o botão direito no widget e defina seu layout como Form Layout :
O formulário mudará para o seguinte:
Quarto, altere o tamanho do Login
botão definindo sua Política de Tamanho Horizontal como Fixa:
Quinto, salve o formulário no D:\pyqt6
diretório como login_form.ui
arquivo.
Sexto, selecione Form > Preview...
o menu ou o atalho de teclado Ctrl-R
para visualizar o formulário:
Finalmente, feche o Qt Designer.
Existem duas maneiras de usar o login_form
.ui de um programa Python:
- Converta o arquivo .ui em código Python e use o código gerado no programa.
- Use diretamente o arquivo .ui no programa.
Convertendo arquivo .ui em código Python
Primeiro, execute o seguinte comando para converter o login_form.ui
arquivo em login_form.py
arquivo:
pyuic6 -o login_form.py login_form.ui
Linguagem de código: Python ( python )
Observe que você precisa executar a pyuic6
partir do ambiente virtual pyqt6-env.
O pyuic6
gerado a login_form.py
partir do login_form.ui
arquivo. O login_form.py
conté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.ui
Qt Designer e regenerar login_form.py
novamente.
Segundo, crie o login.py
arquivo 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.
- Importar
Ui_login_form
classe dologin_form.py
arquivo - Crie uma nova instância
Ui_login_form
e chame osetupUi()
método para configurar as interfaces do usuário.
Terceiro, execute o login.py
arquivo:
python login.py
Linguagem de código: Python ( python )
Ele mostrará a janela de login:
Referenciando widgets filhos
Para usar os widgets filhos do Ui_login_form
widget, você referencia seus nomes usando a self.ui
variá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_login
botão por meio da self.ui
variá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_edit
e password_line_edit
e 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_form
da janela de login, você pode herdar a Ui_login_form
janela 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 .ui
arquivo diretamente utilizando a loadUi()
função do uic
mó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 QWidget
e você pode referenciar os widgets filhos por meio da self.ui
variá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 UI
manualmente 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
pyuic6
ferramenta para converter um arquivo .ui em um arquivo de código-fonte Python. - Use
loadUi()
a função douic
módulo para carregar o.ui
arquivo diretamente.