Laying Out Your GUIs With Qt Designer

Quando estiver a desenhar as suas GUIs Qt, pode ser uma tarefa bastante complicada colocar cada widget na posição certa nos seus formulários. Felizmente, Qt oferece um conjunto de gerenciadores de layout que simplificam o processo de posicionamento de widgets e permitirão que você crie facilmente qualquer tipo de layout. Para colocar o widget num formulário, você pode criar tudo em código, ou pode criar o seu layout com o Qt Designer. Neste tutorial, você aprenderá como usar os layouts do Qt com o Qt Designer para construir GUIs complexas para suas aplicações.

Adicionalmente, criaremos um exemplo de diálogo usando vários widgets com um layout coerente para reforçar seu conhecimento e colocar tudo junto em um diálogo totalmente funcional como você criaria em uma aplicação do mundo real.

Usando layouts com Qt Designer

Qt Designer é a ferramenta Qt para projetar e criar interfaces gráficas de usuário (GUI) para aplicações desktop. Com o Qt Designer, você pode criar janelas, diálogos, e formulários. Ele permite que você adicione diferentes tipos de widgets para criar suas GUIs usando formulários na tela e uma interface baseada em arrastar e soltar.

Qt Designer tem a seguinte aparência de interface principal –

Qt Designer – Interface Principal

Qt Designer tem uma interface clara e amigável que permite que você crie qualquer tipo de GUI arrastando o widget para um formulário vazio. Depois de colocar todos os widgets em seu formulário, você precisa colocá-los em um layout coerente. Isto irá garantir que todos os seus widgets serão exibidos e redimensionados corretamente quando o formulário for visualizado ou usado em uma aplicação.

Qt’s layout managers são containers estruturados que automaticamente organizam os widgets filhos garantindo que eles façam bom uso do espaço disponível. A colocação de widgets dentro de um gerenciador de layout os coloca automaticamente de acordo com as regras definidas. Uma das características mais úteis do Qt Designer é a capacidade de arrastar e soltar hierarquias dos gestores de layout para organizar os widgets em interfaces limpas e funcionais.

No Qt Designer, você pode criar objetos de layout aplicando um layout a um grupo de widgets existentes. Embora seja possível arrastar layouts para um formulário e depois arrastar os widgets para os layouts, isto pode ser um pouco complicado. A melhor prática é arrastar todos os widgets e espaçadores necessários para o formulário e depois selecionar os widgets e espaçadores relacionados e aplicar os layouts a eles. Use os seguintes passos –

1. Arraste e solte os widgets no formulário tentando colocá-los perto da posição desejada
2. Selecione os widgets que devem ser gerenciados com um determinado layout, segurando a tecla Ctrl e clicando neles
3. Aplique o layout apropriado (horizontal, vertical, grid, ou formulário) usando a barra de ferramentas do Qt Designer, menu principal, ou no menu de contexto do formulário

Antes de entrar em um exemplo, veja as opções relacionadas com o layout que o Qt Designer oferece –

1. Utilizar opções de layout na barra de ferramentas principal
2. Utilizar opções de layout no menu principal
3. Utilizar opções de layout no menu de contexto do formulário

A forma mais acessível de criar layouts é utilizando a secção de layout da barra de ferramentas principal do Qt Designer. Esta seção fica assim –

Qt Designer – Barra de ferramentas de Layout

Da esquerda para a direita, você encontrará os seguintes botões –

• Lay Out Horizontally arranja os widgets selecionados em um layout horizontal um ao lado do outro (combinação de teclas, Ctrl+1). Esta opção usa um objeto padrão QHBoxLayout
• Lay Out Verticalmente organiza os widgets selecionados em um layout vertical, um abaixo do outro (combinação de teclas, Ctrl+2). Esta opção usa um padrão QVBoxLayout object
• Lay Out Horizontally in Splitter organiza os widgets horizontalmente usando um divisor (combinação de teclas, Ctrl+3)
• Lay Out Vertical in Splitter organiza os widgets verticalmente usando um divisor (combinação de teclas, Ctrl+4)
• Lay Out em uma grade organiza os widgets em uma grade em forma de tabela (linhas e colunas). Por padrão, cada widget ocupa uma célula da grade, mas você pode modificar este comportamento e fazer com que os widgets abranjam várias células (Combinação de chaves, Ctrl+5). Esta opção usa um objeto padrão QGridLayout
• Lay Out em um Layout de Formulário organiza os widgets selecionados em um layout de duas colunas. A coluna da esquerda é normalmente para etiquetas pedindo alguma informação e a coluna da direita inclui widgets para entrar, editar, ou mostrar essa informação (Combinação de chaves, Ctrl+6)
• Break Layout esta chave permite que você freie um layout existente. Uma vez que os widgets são dispostos em um layout, você não pode movê-los e redimensioná-los individualmente, porque sua geometria é controlada pelo layout. Para modificar widgets individuais, você precisará quebrar o layout e refazê-lo posteriormente (Combinação de teclas Ctrl+0)
• Adjust Size ajusta o tamanho do layout para acomodar os widgets contidos e para garantir que cada um tenha espaço suficiente para ser visível (Combinação de teclas Ctrl+J)

Estas mesmas opções relacionadas ao layout também estão disponíveis através do menu principal do Qt Designer no menu Form e através do menu de contexto do formulário, para que possas escolher aquele que gostas mais.

Agora temos a teoria fora do caminho, podemos colocar estes layouts em prática. Nas próximas seções, estaremos usando o Qt Designer para dispor os widgets em nossos formulários e construir GUIs bonitas e elegantes para suas aplicações desktop. Mas antes de começarmos a experimentar com os diferentes gerenciadores de layout que o Qt oferece, vamos primeiro criar um widget personalizado para visualizar os layouts à medida que passamos por este tutorial.

O completo .ui completo pode ser baixado abaixo se você quiser pular este passo.

layout-labels.ui

Vá em frente e acione seu Qt Designer, então execute os seguintes passos –

1. Selecione Widget na aba templates/forms do diálogo New Form. Isto irá criar um novo formulário vazio para trabalhar em.
2. Guardar o seu formulário como layout-labels.ui.
3. Localize um widget Label no diálogo Widget Box e arraste-o para o formulário.
4. Vá para o Property Editor e defina a propriedade text para 0.
5. Abra o diálogo Text Edit e defina a cor do texto para branco. Defina o tamanho da fonte para 20 pontos e justifique o texto. Pressione OK para aplicar as alterações.
6. Vá para Property Editor e defina a propriedade autoFillBackground para True selecionando a caixa de seleção.
7. Ligue a propriedade palette e abra a caixa de diálogo Edit Palette. Use a opção Quick para definir a cor para vermelho.

Se você se sentir perdido, dê uma olhada no seguinte screencast para ver os passos em ação –

Neste exemplo, você cria uma nova janela com base no modelo Widget. Então, você adiciona uma etiqueta, define a propriedade text para 0, e define a cor de fundo para vermelho.

Para completar este exemplo, repita todos os passos para adicionar mais três etiquetas com seus respectivos textos definidos para 1, 2, e 3 e suas cores definidas para verde, amarelo, e azul. Você terminará com um formulário como este:

Qt Designer – Formulário com etiquetas coloridas

A imagem acima mostra o formulário inicial que você usará para as próximas seções. É um formulário limpo com quatro objetos de etiqueta nele. Você pode definir uma cor de fundo para cada etiqueta para poder vê-las e diferenciá-las mais facilmente nas seguintes seções.

Layoutorizontal, QHBoxLayout

Você pode usar um gerenciador de layout horizontal (QHBoxLayout) para organizar os widgets em uma linha. Para criar este tipo de layout em código, você precisa instanciar a classe QHBoxLayout e então adicionar seus widgets ao objeto layout. No Qt Designer é mais fácil de trabalhar ao contrário.

Com o seu ficheiro layout-labels.ui aberto, primeiro seleccione todas as suas etiquetas. Para fazer isso, você pode clicar em cada widget enquanto você segura a tecla Ctrl ou você também pode clicar e arrastar com o ponteiro do mouse dentro do formulário para selecionar os widgets.

Após ter seleccionado os widgets, coloque-os num esquema horizontal seleccionando o botão Lay Out Horizontally na barra de ferramentas principal do Qt Designer. Você também pode usar a opção Lay out->Lay Out Horizontally no menu de contexto mostrado abaixo ou você pode pressionar Ctrl+1. O seguinte screencast irá guiá-lo através destes passos –

Se o layout estiver errado, então você pode facilmente desfazer tudo e reiniciar o layout novamente. Para desfazer as coisas, você pode pressionar Ctrl+z ou usar o menu Edit do menu principal do Qt Designer. Se isso não for possível ou não funcionar, então você pode simplesmente quebrar o layout usando o botão Break Layout da barra de ferramentas principal do Qt Designer. Outra forma de quebrar um layout é pressionar Ctrl+0 ou escolher Break Layout no menu de contexto do formulário.

Layouts Verticais, QVBoxLayout

Pode usar um layout vertical (QVBoxLayout) para organizar seus widgets em uma coluna, uma acima da outra. Isto pode ser muito útil quando você está criando grupos de widgets e você precisa garantir que eles estejam alinhados verticalmente.

Inicie com seu arquivo original layout-labels.ui, o primeiro passo será selecionar os widgets que você precisa incluir no layout vertical. Depois disso, você pode clicar no botão Lay Out Vertically sobre a barra de ferramentas principal, ou você pode usar o menu de contexto, ou você também pode pressionar Ctrl+2. O seguinte screencast irá guiá-lo através destes passos –

Se olhar mais de perto para o screencast, poderá ver que o objecto de layout é indicado por uma fina moldura vermelha à volta das etiquetas no formulário. Esta moldura vermelha não é visível na pré-visualização ou em tempo de execução, é apenas um guia que pode usar quando estiver a desenhar o formulário. Observe também que, o objeto de layout aparece no Object Inspector e as suas propriedades (margens e restrições) são mostradas no Property Editor.

Grid Layouts, QGridLayout

Algumas vezes você precisa dispor seus widgets tanto horizontal como verticalmente dentro do mesmo layout. Para fazer isso, você pode usar um gerenciador de layout de grade (QGridLayout). Os gerenciadores de layout de grade dispõem seus widgets em uma grade quadrada ou retangular, com todos os widgets alinhados verticalmente e horizontalmente com seus vizinhos. Este tipo de layout pode lhe dar muito mais liberdade para organizar seus widgets em um formulário, enquanto mantém algum grau de estrutura. Esta disposição pode ser mais adequada do que a disposição aninhada de layouts horizontais e verticais, particularmente quando você se preocupa com o alinhamento de linhas ou colunas adjacentes.

Você pode construir um layout de grade com o Qt Designer da mesma forma que para outros layouts. O primeiro passo é selecionar o grupo de widgets que você deseja construir usando um gerenciador de layout em grade. Depois, você pode usar a barra de ferramentas, o menu de contexto, ou você pode pressionar Ctrl+5 para configurar o layout. Veja o seguinte screencast –

Neste caso, nós usamos um layout de grade 2 x 2 para organizar as etiquetas no seu formulário. Note que, para usar este tipo de layout, você deve primeiro colocar seus widgets em linhas e colunas no formulário, como mostrado no screencast acima. Qt Designer é bastante inteligente e tentará manter o seu design o mais parecido possível com o que você inicialmente criou à mão. Ele pode até mesmo criar arranjos difíceis de multi-colunas automaticamente ou preencher automaticamente células vazias.

Form Layouts, QFormLayout

Embora um QGridLayout possa ser usado para layout de formulários com entradas e etiquetas em duas colunas, Qt também fornece um layout projetado especificamente para este propósito – (QFormLayout). Este tipo de layout é ideal quando você está criando uma aplicação estruturada de entrada de dados ou banco de dados. A coluna da esquerda irá normalmente conter etiquetas que pedem alguma informação. A coluna da direita contém os widgets de entrada, tais como edição de linha (QLineEdit), caixas spin (QSpinBox), edição de data (QDateEdit), caixas combinadas (QComboBox), e assim por diante.

A vantagem de usar este layout sobre o QGridLayout é que é mais simples de trabalhar quando você só precisa de duas colunas. O seguinte screencast mostra-o em acção –

Neste exemplo, primeiro adicionamos quatro novas etiquetas. Estes rótulos vão conter informações sobre os dados que você precisa inserir ou editar na segunda coluna. Neste caso, a segunda coluna mantém os seus rótulos coloridos, mas normalmente esta coluna será usada para colocar widgets de entrada como edições de linha, caixas de spin, caixas combinadas, e assim por diante.

Splitter Layouts

Splitters são objetos de contêineres que organizam widgets horizontalmente ou verticalmente em dois painéis redimensionáveis. Com este tipo de layout, você pode ajustar livremente a quantidade de espaço que cada painel ocupa em sua forma, enquanto mantém constante o espaço total utilizado. No Qt splitter os layouts são gerenciados usando o QSplitter.

Even, embora os divisores sejam tecnicamente um widget de container (não um layout), o Qt Designer os trata como layouts que podem ser aplicados aos widgets existentes. Para colocar um grupo de widgets em um divisor, você primeiro os seleciona como normalmente e depois aplica o divisor usando o botão apropriado da barra de ferramentas, atalho de teclado, ou a opção de menu de contexto no Qt Designer Dê uma olhada no seguinte screencast –

Neste exemplo, nós aplicamos primeiro um divisor horizontal em suas etiquetas. Note que, você precisará lançar a pré-visualização do formulário se você quiser ver o divisor em ação. Você pode lançar a pré-visualização do formulário pressionando Ctrl+R. Mais tarde, aplicamos um divisor vertical às etiquetas. Em cada caso, você pode redimensionar livremente o widget usando o ponteiro do seu mouse.

Building Other Layouts With Qt Designer

Existem mais algumas coisas que você pode fazer com os layouts no Qt Designer. Por exemplo, suponha que você precisa adicionar um novo widget a um layout existente, ou usar layouts aninhados para organizar seus widgets em uma GUI complexa. Nas seções seguintes, vamos cobrir como realizar algumas dessas tarefas.

Inserindo Objetos em um Layout Existente

Objetos podem ser inseridos em um layout existente, arrastando-os de suas posições atuais e soltando-os na posição requerida no layout. Um cursor azul é exibido no layout quando um objeto é arrastado sobre ele para indicar onde o objeto será colocado.

Dê uma olhada no seguinte screencast onde colocamos três de nossas etiquetas em um layout vertical e então percebemos que deixamos a etiqueta azul fora do jogo –

Também é possível mover ou mudar a posição de um determinado widget em um layout. Para fazer isso, basta arrastar e soltar o widget para a sua nova posição no layout. Lembre-se de seguir a linha azul para obter isso corretamente.

Nesting Layouts para Construir GUIs Complexas

Você também pode aninhar os gerentes de layout um dentro do outro usando o Qt Designer. O layout interno torna-se então um filho do layout envolvente. Ao fazer isto você pode iterativamente criar interfaces de usuário muito complexas, porém bem estruturadas.

Layouts podem ser aninhados tão profundamente quanto você precisar. Por exemplo, para criar um diálogo com uma linha horizontal de botões na parte inferior e um monte de outros widgets alinhados verticalmente no formulário, você pode usar um layout horizontal para os botões e um layout vertical para o resto dos widgets, depois envolva esses layouts em um layout vertical.

Voltando ao exemplo das nossas etiquetas coloridas, o seguinte screencast mostra o processo de organizar um layout aninhado no Qt Designer –

Neste exemplo, primeiro organizamos os widgets em par usando um layout horizontal. Depois aninhamos estes dois layouts em um terceiro layout, mas desta vez um vertical. Os layouts podem ser aninhados tão profundamente quanto necessário.

Quando você seleciona um layout filho, seu layout pai pode ser selecionado pressionando a tecla Shift enquanto clica sobre ele. Isto permite que você selecione rapidamente um layout específico em uma hierarquia, o que de outra forma será difícil de fazer devido ao pequeno quadro delimitando cada gerenciador de layout.

Configurando um layout de nível superior ou principal

O passo final que você precisa executar ao construir um formulário é combinar todos os layouts e widget em um layout principal ou layout de nível superior. Este layout está no topo da hierarquia de todos os outros layouts e widgets. É vital que você tenha um layout porque senão os widgets no seu formulário não serão redimensionados quando você redimensionar a janela.

Para definir o layout principal basta clicar com o botão direito do mouse em qualquer lugar no seu formulário que não contenha um widget ou layout. Então, você pode selecionar Lay Out Horizontally, ou Lay Out Horizontally, ou você também pode selecionar Lay Out in a Grid como no seguinte screencast –

Neste exemplo, usamos cada um dos três diferentes layouts como nosso layout de nível superior por sua vez. Usamos primeiro um layout horizontal, depois quebramos o layout e usamos um layout vertical. Finalmente, definimos um layout de grade. O layout de nível superior que você escolher para seu layout de nível superior dependerá de seus requisitos específicos para seu app.

É importante que você note que layouts de nível superior não são visíveis como um objeto separado no Object Inspector. As suas propriedades aparecem abaixo das propriedades widget do formulário principal. Note também que se o seu formulário não tem um layout, então seu ícone aparece com um círculo vermelho no Object Inspector. Outra maneira de verificar se você definiu corretamente um layout principal é tentando redimensionar o formulário, se um layout principal está no lugar, então seus widgets devem redimensionar de acordo.

Como você começa a construir aplicações mais complexas, você vai descobrir que outros widgets de container também exigem que você defina um layout de nível superior, por exemplo QGroupBox, QTabWidget, QToolBox, e assim por diante. Para fazer isso, você pode executar os mesmos passos que você viu aqui, mas desta vez você precisa clicar com o botão direito no widget container.

Laying Out a Dialog With Qt Designer

Para um exemplo final e mais completo de como usar layouts com o Qt Designer, vamos agora criar um diálogo para introduzir algumas informações em uma aplicação de banco de dados. Suponha que estamos a construir um software de Gestão de Recursos Humanos para a nossa empresa Poyqote Inc.. Estamos agora trabalhando em um formulário para introduzir alguns dados sobre nossos funcionários. O diálogo deve apresentar aos usuários uma GUI amigável para introduzir os seguintes dados:

• Nome do funcionário
• Data de contratação
• Departamento
• Posição
• Salário anual
• Descrição do trabalho

Qual é a melhor maneira de apresentar este formulário? Há muitas opções, e é em grande parte uma questão de gosto e prática. Mas aqui estamos usando um QFormLayout para organizar os campos de entrada em duas colunas com etiquetas à esquerda e caixas de entrada à direita. O processo de criação do layout é mostrado no seguinte screencast –

O diálogo base é criado usando o Dialog with Buttons Bottom template do Qt Designer. Depois, adicionamos alguns labels e alguns widgets de entrada, incluindo edições de linha, edições de data, edições de texto, e caixas combinadas. De seguida, colocamos todos esses widgets num layout de formulário e finalmente definimos um layout de nível superior ou principal para o formulário.

O ficheiro .ui do diálogo terminado pode ser descarregado aqui.

Conclusion

Qt Designer é uma ferramenta poderosa quando se trata de criar GUIs usando o Qt. Uma de suas características mais simples e útil é a habilidade de organizar seus widgets em diferentes tipos de layouts. Aprender como criar layouts com o Qt Designer pode aumentar sua produtividade, particularmente quando se trata de criar GUIs complexas.

Este tutorial guiou você através do processo de criação de layouts personalizados com o Qt Designer. Você agora sabe como obter o máximo do Qt Designer ao criar suas GUIs.