um fluxo de trabalho eficaz do Desenhador Python + PyQt

Antes de começarmos, assume-se que tem um conhecimento intermédio A avançado do Python. Isto inclui tipos de dados básicos (especialmente dicionários), declarações e funções. O conhecimento sobre a programação orientada a objetos (OOP) seria útil, mas não necessário.

Este será um tutorial rápido sobre fazer uma GUI Python usando uma combinação da biblioteca PyQt Python e Designer. O Designer é um programa que vem com o PyQt e lhe permite criar a interface gráfica visualmente. Vamos usar apenas o Designer e um editor de IDE/texto Python. A GUI Python não precisa ser complicada!

Vamos olhar para a criação de um Python GUI fluxo de trabalho com estas características:

• Um arquivo de configuração para personalizar as configurações de usuário
• Várias janelas dentro do programa
• Adicionar funções para os botões, caixas de entrada, e outros itens clicáveis
• Imagens e logotipos

Este é realmente tudo que você precisa para uma simples, mas robusto Python GUI. Neste tutorial vamos apenas criar um conversor de moeda simples.

usaremos o Python 3.6 Neste tutorial e eu estaremos criando este tutorial em um ambiente virtual usando o Windows 10. Neste tutorial só precisaremos instalar o PyQt5 para a interface gráfica e os pedidos para o nosso projeto de exemplo. Isto será feito usando o pip. É importante notar que o Designer não vem com a instalação pip PyQt5 e tem que ser instalado separadamente. O bloco de código abaixo mostra os comandos que você precisa digitar:

pip install PyQt5
pip install PyQt5Designer
pip install requests

Once it is installed, just search for “Designer” in your computer and it should pop up.

Dados de Moeda

podemos obter grátis de Forex dados de ExchangeRate-API, que convenientemente tem uma API que pode usar. A API retorna um objeto JSON com a informação da moeda que pode ser navegada usando um dicionário Python. As taxas de câmbio são baseadas na moeda principal que você especificar.

no exemplo abaixo queremos olhar para o Forex usando o Dólar americano (USD) como moeda principal.

import requestsurl = 'https://api.exchangerate-api.com/v4/latest/USD'
response = requests.get(url)
data = response.json()# The data variable will look like the dictionary below
{
"base": "USD",
"date": "2020-14-20",
"time_last_updated": 1553092232,
"rates": {
"USD": 1,
"AUD": 1.4882,
"CAD": 1.325097,
"...": 1.311357,
"...": 7.4731, etc. etc.
}
}

criando a interface gráfica

Agora vem a parte divertida. A criar o GUI!

Quando abrir o Qt Designer, esta linha de comandos irá abrir. Quero começar com uma área de desenho vazia, para que possa escolher “Janela Sem botões” e depois carregar em “Criar”.

Agora você tem um vazio janela de diálogo para trabalhar. Você pode começar a adicionar widgets usando a lista à esquerda. Adiciona estes elementos, arrastando-os e largando-os na sua janela GUI. Embora existam muitos elementos, neste tutorial, só irei cobrir os seguintes elementos:

• etiquetas
• botão de pressão
• linha de edição
• Combo Box

a lista também é conhecida como lista e você poderá preencher esta lista Se fizer duplo-click sobre o objecto da lista no Designer, ele dar-lhe-á uma janela onde poderá adicionar itens. Neste caso, vamos adicionar as moedas que estamos usando. Isto permitirá ao utilizador decidir qual a moeda que pretende utilizar como moeda de referência.

Quando você começar a adicionar esses widgets você deve se certificar de que eles são nomeados de forma adequada, para que você possa consultá-los facilmente em código Python. Isto é feito usando o nome do objecto no Editor de propriedades à direita. Normalmente eu apenas adiciono sua função ao nome existente, como labelTitle ou lineEditLocationDetails. Este estilo de nomear me ajuda a lembrar com que tipo de objeto GUI estou trabalhando quando estou digitando o código Python.

o Estilo de como você deseja, mas para aqueles que seguem este tutorial criar uma interface gráfica semelhante a este abaixo:

isto é flutuante “Logo” o texto é um espaço reservado para uma imagem que vamos carregar. Isso será explicado mais tarde!

Qt Designer para Python

gravar o ficheiro UI na sua pasta do projecto como “mainDialog.ui”, eu gosto de criar uma sub-pasta chamada ” ui ” e, em seguida, salvá-lo lá para que possamos manter a pasta de projeto organizado.uma vez gravado, temos de convertê-lo em algo que o Python realmente compreende. Usando a linha de comandos, navegue para a sub-pasta ui. Se você também está fazendo isso em um ambiente virtual, certifique-se de que você também está em seu ambiente virtual que contém instalação PyQt5.

escreva este código para navegar para a pasta que contém o ficheiro ui e converter o .ficheiro ui para um ficheiro .py:

cd "your/ui/folder/here"
pyuic5 mainDialog.ui -o mainDialog.py

na raiz da pasta do projecto, crie um ficheiro Python chamado “main.py”. insira este código:

main.py ficheiro com o seu interpretador Python. Parabéns! Agora o Python pode executar o código e a sua interface gráfica aparecerá. Explicarei as partes importantes do Código até agora:

• Linha 5: mainDialog.py ficheiro de dentro da sub-pasta ui. Eu uso um pseudônimo “mainDialog” para tornar o nome mais fácil.
• linha 10: Esta classe contém todas as funções relacionadas com a sua janela de diálogo principal que acabou de fazer. O primeiro argumento chama sobre o objeto QDialog que é o tipo de GUI que estamos usando. O segundo argumento é baseado no pseudônimo que declaramos e é a classe Ui_Dialog dentro do arquivo Python que foi gerado a partir do .conversão de arquivos ui
• linha 12:a função _ _ init__ é importante porque é o código que você deseja executar quando o programa inicia. Então é aqui que está o eu.setupUi (self) entra porque você quer que a UI para executar quando você abrir o programa. Vamos colocar coisas como carregar arquivos de configuração e funcionalidade de botões aqui porque queremos que eles funcionem assim que executarmos o software.
• linha 20: Este é o código que executa e abre a interface gráfica.

adicionando funções aos botões e objectos

Agora temos a nossa bela interface gráfica. Como o fazemos fazer Forex? Vamos adicionar a função para carregar as últimas taxas Forex que eu mostrei no início deste post. Então, vamos colocar o código para conectar os objetos ao código Python.

ao tentar se conectar aos objetos que você criou no Designer, você tem que começar com o “eu”.”. Então, se seu objeto em PyQt Designer foi chamado labelTitle, você vai chamar o objeto digitando em si mesmo.labelTitle. Se seu objeto foi chamado lineEditInputDirectory então você vai chamá-lo escrevendo self.a linha precisa de ser perfeita e assim por diante.

Check out the Github gist and the explanation below:

linha 16: Esta função é chamada quando o utilizador clica o botão para carregar as taxas Forex. O objeto em si é o si mesmo.pushButtonLoadRates but we attach functionality when the user cliques it by adding .clicar.conectar(). Esta função tem algumas nuances específicas. O argumento a favor .connect () só aceita a função sem parêntesis, então neste caso, self.load_ rates. Se você precisar adicionar argumentos, devido às exigências da função em Python, você precisa usar um lambda, consulte o bloco de código abaixo:

self.pushButton.clicked.connect(lambda:self.load_rates(arg1,arg2,...)) 

a Linha 19: .currentText () obtém o texto actual do objecto comboBox, que será a nossa moeda de referência. Então, se o usuário seleciona o USD, ele irá retornar as taxas Forex em relação a 1 USD. Este texto é adicionado ao URL que é usado para se conectar à API na próxima linha.

linhas 24-26: estas são usadas para carregar os nossos dados nos objectos lineEdit. Usamos .setText () para modificar o texto nos objectos lineEdit. Ele só aceita strings, então os números da API devem ser convertidos para string.

A adição de um Arquivo de Configuração

Esta parte é um pouco complicado e é onde o Python existente de conhecimento será útil. Nesta seção vamos cobrir as seguintes características:

• a Abertura de uma nova janela dentro do programa
• Criando e usando um arquivo de configuração

Agora que temos um programa de trabalho, digamos que, a título de exemplo, diferentes pessoas em seu departamento têm necessidades diferentes, e todos eles trabalham com a diferença de moedas. Nós podemos tornar suas vidas mais fáceis adicionando um arquivo de configuração para que eles não tenham que usar a lista todas as vezes. Usando um arquivo de configuração podemos salvar suas configurações únicas e, em seguida, carregá-lo quando o programa começa.

é aqui que entra o Botão” Config”. Vamos criar uma nova janela para o usuário modificar suas configurações. Fazendo isso nos permite manter a janela principal limpa e organizada.

Guardar isso em sua interface de pasta como configDialog.ui e como fizemos anteriormente neste tutorial, converta-o usando o mesmo comando pyuic5 como visto no bloco de código abaixo:

cd "your/ui/folder/here"
pyuic5 configDialog.ui -o configDialog.py

Agora aqui está o que o código atualizado deve parecer abaixo. As explicações para o novo código de adições estão abaixo desta gist do Github:

• Linha 6: adicione o diálogo config janela através desta declaração de importação
• Linha 10-11: Novas declarações de importação que são relevantes para ter um bom arquivo de configuração do fluxo de trabalho. pickle e os ambos vêm com o seu ambiente Python padrão e não precisam de instalações adicionais.
• linha 13-14: A localização do arquivo de configuração é usada em todo o script em todas as classes, então nós declaramos como um global e torná-lo all-caps uma vez que é uma constante.
• Linha 17: esta classe contém toda a informação relevante para a janela de configuração. Se você quiser chamar objetos no arquivo UI de configuração que você fez é recomendado que a chamada seja feita nesta classe, não na classe MainDialog.
• linha 23: carregamos o ficheiro de configuração existente. Fazemos isso para que possamos mostrar qual é a configuração atual para o usuário.linha 26: Usando o ficheiro de configuração carregado, configuramos a lista de texto para qualquer que seja a configuração actual.
• linha 33: Quando gravamos a configuração, queremos atualizar o dicionário armazenado em si mesmo.configuração antes de gravar o ficheiro de configuração.
• linha 39: isto fecha a janela de Parâmetros de configuração.
• linha 48-54: esta é a lógica ao carregar o ficheiro de configuração na janela principal. Por qualquer Razão, O arquivo de configuração pode faltar e, em seguida, o programa não será lançado devido a erros. Se o arquivo de configuração estiver faltando, crie um arquivo de configuração com parâmetros padrão para que o usuário ainda possa lançar o programa e, em seguida, modificar os parâmetros mais tarde.
• linha 56: carregamos a configuração personalizada e configuramos a lista para a moeda preferida do utilizador.
• linha 62-63: isto lança a janela de Parâmetros de configuração. Isto baseia-se no nome da classe da janela de configuração. Neste caso, a classe é chamada de Configurameters.
• linha 65-68: depois de o utilizador terminar a configuração e a janela estar fechada. O programa irá se atualizar e carregar o arquivo de configuração novamente antes de atualizar a lista de moeda de referência.

Este fluxo de trabalho permite ao utilizador gravar as suas configurações únicas e o programa continuará a funcionar se o ficheiro de configuração faltar. Você quer tentar explicar todos os problemas que seu programa vai encontrar.

adicionando imagens

Agora você tem um programa totalmente funcional, vamos adicionar os retoques finais: um logo. Embora possa haver um ficheiro de recurso PyQt onde você pode armazenar imagens, eu prefiro apenas carregar imagens usando etiquetas e pixmaps. Isto é muito rápido.

linha 56-58: carregamos o logótipo que gravei na pasta ui. Então eu configuro o objeto labelLogo para carregar a imagem e definir o conteúdo para escalar o tamanho do objeto labelLogo.

Final Thoughts

Hopefully this tutorial gives some clarity on how PyQt5 Designer works. Passei inúmeras horas a pesquisar estas coisas no Google e até a dar explicações sobre o Udemy foram um pouco inúteis.