Usando PyQt4 - Parte 2 - Criando uma interface

Olá pessoal!

Vamos continuar falando de PyQt4?

Pra começar, você deve ter seguido a primeira parte do tutorial para ter instalada alguma das ferramentas de criação do Qt4.

Se não viu a primeira parte, segue o link abaixo:

Usando PyQt4 - Parte 1 - Instalação 

Vamos então por as mãos na massa?

 

Bom, se tiver instalado o QtCreator, crie um novo projeto, selecionando Qt Widget Project e Qt Gui Application.

Dê um nome ao projeto, escolha o diretório onde ficarão os arquivos, e posteriormente pode seguir somente com as opções padrão.

Na esquerda da aplicação haverá uma árvore de diretórios. Selecione Forms e o arquivo .ui que estiver dentro dele (para mim mainwindow.ui).

Assim será aberta a interface de criação de interfaces de forma gráfica.

Para quem tiver instalado o Qt4Designer, abra-o, selecione a opção de template Main Window e crie o form com os demais valores padrão.

Salve o arquivo (pode salvar como mainwindow.ui para este tutorial).

Em ambos os casos, você terá a interface de criação aberta com uma janela principal no centro, onde podemos colocar os widgets que estão na lista à esquerda. à direita temos o editor de propriedades e o inspetor de objetos. Pode haver outras caixas de ferramentas à direita e abaixo, dependendo de qual aplicativo está sendo usado.

Para este tutorial usaremos somente as opções mais simples, assim, não serão relevantes as diferenças entre os aplicativos.

Interface do QtDesigner

 

Vamos criar um aplicativo simples que calcula seu IMC, assim, coloque na interface 3 Lables, 2 Line Edits e 1 Push Button. Para isto, basta arrastar os itens das listas à esquerda para a janela do centro e posicioná-los.

Posicione-os segundo a sua vontade, formando algo assim:

Acrescentando Widgets à interface

Agora, clicando 2 vezes sobre o primeiro Label, troque o valor para Altura. Faça o mesmo no segundo trocando por Peso e no terceiro por IMC.

Da mesma forma, troque o texto do Push Button para Calcular.

O resultado deve ser algo como a imagem a seguir.

Interface Criada

 

Finalmente, você pode visualizar a interface criada em Form>Preview ou Ctrl+R.

Visualizando a Interface

Por hoje é só pessoal! Na próxima parte veremos como usar a interface que criamos no nosso código Python.

Assim, guardem seus arquivos .ui gerados, pois usaremos novamente.

Espero que tenham gostado e fiquem à vontade para postarem dúvidas ou opiniões nos comentários!

Abraços!