Primeiro passo com Qt Designer

Este tutorial requer que o Qt Creator seja instalado – você pode baixá-lo gratuitamente do site Qt. Vá para https://www.qt.io/download e faça o download do pacote Qt. Você pode optar por instalar apenas o Creator durante a instalação.

Abra o Qt Creator e você será apresentado com a janela principal. O designer está disponível através da aba do lado esquerdo. No entanto, para ativar isto você precisa primeiro começar a criar um arquivo ..ui

A interface do Qt Creator, com a seção Design mostrada à esquerda.

Para criar um arquivo .ui vá para File -> New File or Project… Na janela que aparece selecione Qt em Arquivos e Classes à esquerda, depois selecione Qt Designer Form do lado direito. Você vai notar que o ícone tem “ui” nele, mostrando o tipo de arquivo que você está criando.

Criar um novo arquivo Qt .ui.

No próximo passo você será perguntado que tipo de widget você quer criar. Se você estiver iniciando uma aplicação, então a Janela Principal é a escolha certa. No entanto, você também pode criar .ui arquivos para caixas de diálogo, formulários e widgets compostos personalizados.

Selecione o tipo de widget a criar, para a maioria das aplicações isto será Janela Principal.

Próximo escolha um nome de arquivo e salve a pasta do seu arquivo. Salve seu arquivo .ui com o mesmo nome da classe que você estará criando, apenas para tornar os comandos subsequentes mais simples.

Selecione salvar o nome e a pasta do seu arquivo.

Finalmente, você pode escolher adicionar o arquivo ao seu sistema de controle de versão se você estiver usando um. Sinta-se livre para pular este passo – ele não afeta sua UI.

Obviamente adicione o arquivo ao seu controle de versão, por exemplo, Git.

Laying out your Main Window

Você será apresentado com sua janela principal recém-criada no designer da UI. Não há muito para ver para começar, apenas uma área de trabalho cinza representando a janela, juntamente com os inícios de uma barra de menu da janela.

A vista inicial da janela principal criada.

Você pode redimensionar a janela clicando na janela e arrastando as alças azuis em cada canto.

A vista inicial da janela principal criada.

O primeiro passo na construção de uma aplicação é adicionar alguns widgets à sua janela. Nas nossas primeiras aplicações aprendemos que para definir o widget central para um QMainWindow precisamos de usar .setCentralWidget(). Também vimos que para adicionar múltiplos widgets com um layout, precisamos de um intermediário QWidget para aplicar o layout, em vez de adicionar o layout à janela diretamente.

Qt Creator cuida disso para você automaticamente, embora não seja particularmente óbvio sobre isso.

Para adicionar múltiplos widgets à janela principal com um layout, primeiro arraste seus widgets para o QMainWindow. Aqui estamos arrastando 3 etiquetas. Não importa onde você os solte.

Janela principal com 1 etiqueta e 1 botão adicionado.

Criamos 2 widgets arrastando-os para a janela, tornando-os filhos daquela janela. Agora podemos aplicar um layout.

Localizar o QMainWindow no painel da direita (deve estar bem no topo). Abaixo você vê o centralwidget representando o widget central da janela. O ícone para o widget central mostra o layout atual aplicado. Inicialmente ele tem um círculo vermelho-cruzado através dele, mostrando que não há nenhum layout ativo.

Clique direito no objeto QMainWindow, e encontre ‘Layout’ no dropdown resultante.

Clique direito na janela principal, e escolha layout.

Próximo você verá uma lista de layouts que você pode aplicar à janela. Seleccione Lay Out Horizontally e o layout será aplicado ao widget.

Select layout para aplicar à janela principal.

O layout seleccionado é aplicado ao centralwidget do QMainWindow e os widgets são adicionados ao layout, sendo o layout aplicado dependendo do layout seleccionado. Note que no Qt Creator você pode realmente arrastar e reordenar os widgets dentro do layout, ou selecionar um layout diferente, como você quiser. Isto torna especialmente agradável fazer protótipos e experimentar coisas.

Layout vertical aplicado aos widgets na janela principal.

Usando o ficheiro .ui gerado

Criámos uma interface muito simples. O próximo passo é colocar isto em Python e usá-lo para construir uma aplicação funcional.

Primeiro salvar seu arquivo .ui – por padrão ele será salvo no local escolhido durante a criação, embora você possa escolher outro local se quiser.

O arquivo .ui está no formato XML. Para usar a nossa interface do Python temos dois métodos alternativos disponíveis –

1. load into a class using the .loadUI() method
2. convertê-lo para Python usando a ferramenta pyuic5.

Estas duas abordagens são abordadas abaixo. Pessoalmente eu prefiro converter a IU para um arquivo Python para manter coisas similares de um ponto de vista de programação & empacotamento.

Loading the .ui file directly

To load .ui files we can use the uic module included with PyQt5, specifically the uic.loadUI()method. Isto pega no nome de um ficheiro UI e carrega-o criando um objecto PyQt5 totalmente funcional.

Para PySide2 pode usar uma instância QUiLoader e chamar o método loader.load() para realizar a mesma coisa.

A (muito) simples UI desenhada em Qt Creator

Como o método uid.loadUI() torna um objecto de instância você não pode anexar código __init__() personalizado. Você pode, no entanto, lidar com isso através de uma função de configuração personalizada

Para carregar uma IU a partir do bloco __init__ de um widget existente (por exemplo, um QMainWindow) você pode usar uic.loadUI(filename, self) para PyQt5.

O carregador PySide2 não suporta essa abordagem – o segundo parâmetro é para o widget pai do widget que você está criando. Isto impede que você adicione código personalizado à inicialização do widget, mas você pode trabalhar em torno disso com uma função init separada.

Convertendo seu arquivo .ui para Python

Para gerar um arquivo de saída Python execute pyuic5 a partir da linha de comando, passando o arquivo .ui e o arquivo alvo para saída, com um parâmetro -o. O seguinte irá gerar um ficheiro Python chamado MainWindow.py que contém a nossa UI.

pyuic5 mainwindow.ui -o MainWindow.py

Se estiver a utilizar o PyQt4 a ferramenta chama-se `pyuic4`, mas de resto é completamente idêntica.

Pode abrir o ficheiro resultante MainWindow.py num editor para dar uma vista de olhos, embora não deva editar este ficheiro. O poder de usar o Qt Creator está sendo capaz de editar, ajustar e atualizar sua aplicação enquanto você desenvolve. Qualquer alteração feita neste arquivo será perdida quando você o atualizar. No entanto, você pode sobrepor e ajustar o que quiser quando importar e usar o arquivo em suas aplicações.

Importar o arquivo Python resultante funciona como para qualquer outro. Você pode importar a sua classe da seguinte forma. A ferramenta pyuic5 acrescenta Ui_ ao nome do objeto definido no Qt Creator, e é este objeto que você quer importar.

from MainWindow import Ui_MainWindow

Para criar a janela principal em sua aplicação, crie uma classe como normal, mas subclassificando de ambos QMainWindow e sua classe importada Ui_MainWindow. Finalmente, chame self.setupUi(self) de dentro da __init__ para acionar a configuração da interface.

Isso produz exatamente o mesmo resultado de antes.

A (muito) simples UI projetada no Qt Creator

É isso aí. A sua janela está agora totalmente configurada. Como o uso de um arquivo .ui resume o código específico da IU, você pode usar esse mesmo padrão para carregar qualquer interface que você projetou.

Adicionando lógica de aplicação

Você pode interagir com widgets criados através do Qt Creator da mesma forma que você interagiria com aqueles criados com código. Para tornar as coisas mais simples uic adiciona todos os widgets filhos ao objeto da janela pelo seu nome de id, como especificado no Qt Creator. Nós cobriremos como trabalhar com estes na próxima parte.