Layout Your GUIs With Qt Designer

Bij het layouten van je Qt GUIs kan het een lastige taak zijn om elke widget op de juiste plaats op je formulieren te zetten. Gelukkig biedt Qt een set layout managers die het proces van widget positionering vereenvoudigen en je in staat stellen om gemakkelijk elke soort layout te maken. Om de widget in een formulier te plaatsen, kun je alles in code maken, of je kunt je layout maken met Qt Designer. In deze tutorial leer je hoe je Qt’s layouts kunt gebruiken met Qt Designer om complexe GUIs te bouwen voor je applicaties.

Daarnaast maken we een voorbeeld van een dialoog met verschillende widgets met een coherente layout om je kennis te versterken en alles samen te voegen tot een volledig functionele dialoog zoals je die in een echte applicatie zou maken.

Layouts gebruiken met Qt Designer

Qt Designer is het Qt gereedschap voor het ontwerpen en maken van grafische gebruikersinterfaces (GUI’s) voor desktop applicaties. Met Qt Designer kunt u vensters, dialoogvensters en formulieren maken. Het stelt je in staat om verschillende soorten widgets toe te voegen om je GUI’s te maken met behulp van on-screen formulieren en een drag-and-drop gebaseerde interface.

Qt Designer’s hoofd interface ziet er als volgt uit –

Qt Designer – Main Interface

Qt Designer heeft een duidelijke en gebruikersvriendelijke interface waarmee je elk soort GUI kunt maken door widget te slepen naar een leeg formulier. Nadat je alle widgets op je formulier hebt geplaatst, moet je ze in een samenhangende layout plaatsen. Dit zorgt ervoor dat al je widgets goed worden weergegeven en van grootte worden veranderd wanneer het formulier wordt bekeken of wordt gebruikt in een applicatie.

Qt’s layout managers zijn gestructureerde containers die automatisch kind-widgets rangschikken zodat ze goed gebruik maken van de beschikbare ruimte. Door widgets in een layout manager te plaatsen, worden ze automatisch ingedeeld volgens de gedefinieerde regels. Een van de handigste functies van Qt Designer is de mogelijkheid om hiërarchieën van layout-beheerders te slepen en neer te zetten om widgets in schone en functionele interfaces te rangschikken.

In Qt Designer kun je layout-objecten maken door een layout toe te passen op een groep van bestaande widgets. Hoewel het mogelijk is om layouts naar een formulier te slepen en dan widgets naar de layouts te slepen, kan dit een beetje onhandig zijn. Het beste is om in plaats daarvan alle widgets en afstandhouders die je nodig hebt naar het formulier te slepen en dan gerelateerde widgets en afstandhouders te selecteren en de lay-outs op hen toe te passen. Gebruik de volgende stappen –

1. Sleep de widgets op het formulier en probeer ze zo dicht mogelijk bij hun gewenste positie te plaatsen
2. Selecteer de widgets die met een bepaalde layout moeten worden beheerd, door de Ctrl toets ingedrukt te houden en erop te klikken
3. Toepassen van de juiste layout (horizontaal, verticaal, raster, of vorm) met behulp van Qt Designer’s toolbar, hoofdmenu, of het contextmenu van het formulier

Voordat u in een voorbeeld duikt, eerst een blik op de opmaak-gerelateerde opties die Qt Designer biedt –

1. Opmaak-opties gebruiken op de hoofdwerkbalk
2. Opmaak-opties gebruiken op het hoofdmenu
3. Opmaak-opties gebruiken op het contextmenu van het formulier

De meest toegankelijke manier om lay-outs te maken is met behulp van de lay-out-sectie van de hoofdwerkbalk van Qt Designer. Deze sectie ziet er als volgt uit –

Qt Designer – Opmaakwerkbalk

Van links naar rechts vindt u de volgende knoppen –

• Horizontaal uitlijnen rangschikt geselecteerde widgets in een horizontale lay-out naast elkaar (Toetscombinatie, Ctrl+1). Deze optie gebruikt een standaard QHBoxLayout object
• Lay Out Verticaal rangschikt geselecteerde widgets in een verticale lay-out, de een onder de ander (Toetscombinatie, Ctrl+2). Deze optie gebruikt een standaard QVBoxLayout object
• Lay Out Horizontally in Splitter rangschikt de widgets horizontaal met behulp van een splitter (Toetscombinatie, Ctrl+3)
• Lay Out Vertically in Splitter rangschikt de widgets verticaal met behulp van een splitter (Toetscombinatie, Ctrl+4)
• Lay Out in a Grid rangschikt de widgets in een tabel-achtig raster (rijen en kolommen). Standaard neemt elke widget een cel van het raster in, maar u kunt dit gedrag veranderen en de widgets meerdere cellen laten overspannen (Toetscombinatie, Ctrl+5). Deze optie gebruikt een standaard QGridLayout object
• Lay Out in a Form Layout rangschikt geselecteerde widgets in een twee-koloms layout. De linker kolom is meestal voor labels die om bepaalde informatie vragen en de rechter kolom bevat widgets voor het invoeren, bewerken of tonen van die informatie (Toetscombinatie, Ctrl+6)
• Break Layout deze toets stelt u in staat een bestaande layout te remmen. Als widgets eenmaal in een layout zijn gerangschikt, kunt u ze niet meer afzonderlijk verplaatsen of de grootte ervan wijzigen, omdat hun geometrie door de layout wordt bepaald. Om individuele widgets aan te passen, moet je de layout breken en later opnieuw doen (Toetscombinatie Ctrl+0)
• Grootte aanpassen past de grootte van de layout aan om plaats te bieden aan de widgets en ervoor te zorgen dat ze genoeg ruimte hebben om zichtbaar te zijn (Toetscombinatie Ctrl+J)

Dezelfde layout-gerelateerde opties zijn ook beschikbaar in het hoofdmenu van Qt Designer onder het Form menu en in het contextmenu van het formulier, dus u kunt kiezen welke u het beste bevalt.

Nu we de theorie uit de doeken hebben gedaan, kunnen we deze lay-outs in de praktijk brengen. In de volgende secties zullen we Qt Designer gebruiken om de widgets op onze formulieren op te maken en mooie en elegante GUIs te bouwen voor je desktop applicaties. Maar voordat we gaan experimenteren met de verschillende layout managers die Qt biedt, gaan we eerst een widget maken om de layouts te visualiseren terwijl we deze tutorial doorlopen.

Het voltooide .ui bestand kan hieronder worden gedownload als u deze stap wilt overslaan.

layout-labels.ui

Ga uw gang en start uw Qt Designer, voer dan de volgende stappen uit –

1. Selecteer Widget op het templates/forms tabblad van het New Form dialoogvenster. Dit maakt een nieuw leeg formulier om op te werken.
2. Sla uw formulier op als layout-labels.ui.
3. Zoek een Label widget op de Widget Box en sleep het op het formulier.
4. Ga naar de Property Editor en stel de text eigenschap in op 0.
5. Open het Text Edit dialoogvenster en stel de tekstkleur in op wit. Stel de lettergrootte in op 20 punten en justeer de tekst. Druk op OK om de wijzigingen toe te passen.
6. Ga naar Property Editor en stel de autoFillBackground eigenschap in op True door het selectievakje te selecteren.
7. Open de palette eigenschap en open het Edit Palette dialoogvenster. Gebruik de Quick optie om de kleur in te stellen op rood.

Als u zich verloren voelt, bekijk dan de volgende screencast om de stappen in actie te zien –

In dit voorbeeld maakt u een nieuw venster op basis van de Widget template. Vervolgens voegt u een Label toe, stelt u de text eigenschap in op 0, en stelt u de achtergrondkleur in op rood.

Om dit voorbeeld af te ronden, herhaalt u alle stappen om nog drie labels toe te voegen met hun respectievelijke tekst ingesteld op 1, 2, en 3 en hun kleuren ingesteld op groen, geel, en blauw. U krijgt dan een formulier zoals dit:

Qt Designer – Formulier met gekleurde labels

De bovenstaande schermafbeelding toont het eerste formulier dat u voor de volgende secties zult gebruiken. Het is een schoon formulier met vier etiket-objecten erop. Je kunt een achtergrond kleur instellen voor elk label om ze makkelijker te kunnen zien en onderscheiden in de volgende secties.

Horizontale Layouts, QHBoxLayout

Je kunt een horizontale layout manager (QHBoxLayout) gebruiken om de widgets in een rij te zetten. Om zo’n layout in code te maken, moet je de QHBoxLayout class instantiëren en dan je widgets aan het layout object toevoegen. In Qt Designer is het makkelijker om andersom te werken.

Met je layout-labels.ui bestand open, selecteer je eerst al je labels. Om dit te doen, kunt u op elke widget om de beurt klikken terwijl u de Ctrl toets ingedrukt houdt of u kunt ook klikken en slepen met de muisaanwijzer binnen het formulier om de widgets te selecteren.

Nadat u de widgets heeft geselecteerd, zet u ze in een horizontale layout door de Lay Out Horizontally knop te selecteren in de hoofdwerkbalk van de Qt Designer. U kunt ook de optie Lay out->Lay Out Horizontally uit het contextmenu hieronder gebruiken of u kunt op Ctrl+1 drukken. De volgende screencast leidt u door deze stappen –

Als de lay-out verkeerd is, kunt u alles eenvoudig ongedaan maken en opnieuw beginnen met de lay-out. Om dingen ongedaan te maken, kunt u op Ctrl+z drukken of het Edit-menu gebruiken in de hoofdmenubalk van Qt Designer. Als dat niet mogelijk is of niet werkt, dan kunt u de opmaak afbreken met de knop Break Layout op de hoofdwerkbalk van Qt Designer. Een andere manier om een layout te breken is door op Ctrl+0 te drukken of Break Layout te kiezen in het contextmenu van het formulier.

Verticale layouts, QVBoxLayout

U kunt een verticale layout (QVBoxLayout) gebruiken om uw widgets in een kolom boven elkaar te plaatsen. Dit kan erg handig zijn wanneer je groepen widgets maakt en je er zeker van moet zijn dat ze verticaal uitgelijnd zijn.

Startend met je originele layout-labels.ui bestand, zal de eerste stap zijn om de widgets te selecteren die je in de verticale layout wilt opnemen. Daarna kunt u klikken op de Lay Out Vertically knop boven de hoofd werkbalk, of u kunt het context menu gebruiken, of u kunt ook op Ctrl+2 drukken. De volgende screencast leidt u door deze stappen –

Als u de screencast van dichtbij bekijkt, dan kunt u zien dat het opmaakobject wordt aangegeven door een dun rood kader rond de labels op het formulier. Dit rode kader is niet zichtbaar in de preview of tijdens runtime, het is slechts een leidraad die je kunt gebruiken bij het ontwerpen van het formulier. Merk ook op dat het layout-object verschijnt in de Object Inspector en dat de eigenschappen (marges en restricties) worden getoond in de Property Editor.

Grid Layouts, QGridLayout

Soms moet je je widgets zowel horizontaal als verticaal in dezelfde layout plaatsen. Om dit te doen, kun je een grid layout manager (QGridLayout) gebruiken. Grid lay-out managers plaatsen je widgets in een vierkant of rechthoekig raster, waarbij alle widgets verticaal en horizontaal uitgelijnd zijn met hun buren. Dit soort opmaak kan je veel meer vrijheid geven om je widgets op een formulier te rangschikken, terwijl je toch een zekere mate van structuur behoudt. Deze indeling kan geschikter zijn dan geneste opstellingen van horizontale en verticale layouts, vooral wanneer je de uitlijning van aangrenzende rijen of kolommen belangrijk vindt.

Je kunt een rasterindeling met Qt Designer op dezelfde manier maken als voor andere indelingen. De eerste stap is het selecteren van de groep widgets die u wilt indelen met behulp van een raster lay-out manager. Daarna kunt u de werkbalk gebruiken, het contextmenu, of u kunt op Ctrl+5 drukken om de layout op te zetten. Bekijk de volgende screencast –

In dit geval gebruiken we een 2 x 2 raster layout om de labels op uw formulier te rangschikken. Merk op dat, om dit soort layout te gebruiken, je eerst je widgets in rijen en kolommen op het formulier moet plaatsen, zoals te zien is in de screencast hierboven. Qt Designer is heel slim en zal proberen je ontwerp zo veel mogelijk te laten lijken op wat je in eerste instantie met de hand hebt gemaakt. Het kan zelfs moeilijke multi-kolom arrangementen automatisch maken of automatisch lege cellen vullen.

Formulier Layouts, QFormLayout

Terwijl een QGridLayout kan worden gebruikt om formulieren met invoer en labels in twee kolommen op te maken, biedt Qt ook een lay-out die speciaal voor dit doel is ontworpen – (QFormLayout). Dit type layout is ideaal wanneer u een gestructureerde data-invoer of database applicatie maakt. De linkerkolom bevat meestal labels die om informatie vragen. De rechterkolom bevat de invoer widgets zoals regelbewerkingen (QLineEdit), spinboxen (QSpinBox), datumbewerkingen (QDateEdit), comboboxen (QComboBox), enzovoort.

Het voordeel van het gebruik van deze layout boven QGridLayout is dat het eenvoudiger is om mee te werken als je maar twee kolommen nodig hebt. De volgende screencast laat het in actie zien –

In dit voorbeeld voegen we eerst vier nieuwe labels toe. Deze labels bevatten informatie over de gegevens die in de tweede kolom moeten worden ingevoerd of bewerkt. In dit geval bevat de tweede kolom de gekleurde labels voor de tests, maar gewoonlijk wordt deze kolom gebruikt om invoer widgets te plaatsen, zoals lijn bewerkingen, spin boxen, combo boxen, enzovoort.

Splitter Layouts

Splitters zijn container objecten die widgets horizontaal of verticaal rangschikken in twee aanpasbare panelen. Met dit soort lay-outs kun je de hoeveelheid ruimte die elk paneel inneemt op je formulier vrij aanpassen, terwijl de totale gebruikte ruimte constant blijft. In Qt splitter worden layouts beheerd met QSplitter.

Ondanks dat splitters technisch gezien een container-widget zijn (en geen layout), behandelt Qt Designer ze als layouts die kunnen worden toegepast op bestaande widgets. Om een groep widgets in een splitter te plaatsen, selecteer je ze eerst als normaal en pas je vervolgens de splitter toe met behulp van de juiste werkbalkknop, sneltoetscombinatie of contextmenu-optie in Qt Designer. Kijk eens naar de volgende screencast –

In dit voorbeeld passen we eerst een horizontale splitter toe op je labels. Merk op dat je het formuliervoorbeeld moet starten als je de splitter in actie wilt zien. U kunt het formulier-voorbeeld starten door op Ctrl+R te drukken. Later passen we een verticale splitter toe op de etiketten. In beide gevallen kunt u de grootte van de widget vrij aanpassen met de muisaanwijzer.

Andere layouts bouwen met Qt Designer

Er zijn nog een paar dingen die u kunt doen met layouts in Qt Designer. Stel bijvoorbeeld dat je een nieuwe widget wilt toevoegen aan een bestaande layout, of dat je geneste layouts wilt gebruiken om je widgets te rangschikken in een complexe GUI. In de volgende paragrafen behandelen we hoe u een aantal van deze taken kunt uitvoeren.

Objecten in een bestaande lay-out invoegen

Objecten kunnen in een bestaande lay-out worden ingevoegd door ze van hun huidige positie te slepen en ze op de gewenste positie in de lay-out te laten vallen. Een blauwe cursor wordt getoond in de layout wanneer een object er overheen wordt gesleept om aan te geven waar het object zal worden geplaatst.

Kijk eens naar de volgende screencast waar we drie van onze labels in een verticale layout plaatsen en ons dan realiseren dat we het blauwe label buiten het spel hebben gelaten –

Het is ook mogelijk om de positie van een gegeven widget in een layout te verplaatsen of te veranderen. Om dit te doen, sleep je de widget naar zijn nieuwe positie in de layout. Vergeet niet de blauwe lijn te volgen om dit goed te doen.

Nesting Layouts to Build Complex GUIs

U kunt ook layout managers in elkaar nesten met behulp van Qt Designer. De binnenste layout wordt dan een kind van de omringende layout. Door dit te doen kunt u iteratief zeer complexe, maar goed gestructureerde gebruikersinterfaces maken.

Layouts kunnen zo diep worden genest als u nodig hebt. Om bijvoorbeeld een dialoogvenster te maken met een horizontale rij knoppen onderaan en een heleboel andere widgets verticaal uitgelijnd op het formulier, kun je een horizontale layout gebruiken voor de knoppen en een verticale layout voor de rest van de widgets, en deze layouts dan verpakken in een verticale layout.

Terugkomend op ons voorbeeld van gekleurde labels, toont de volgende screencast het proces van het rangschikken van een geneste layout in Qt Designer –

In dit voorbeeld rangschikken we eerst widgets in paren met behulp van een horizontale layout. Daarna nestelen we beide layouts in een derde lay-out, maar deze keer een verticale. De layouts kunnen zo diep genest worden als nodig is.

Wanneer u een kind-layout selecteert, kan de ouder-layout geselecteerd worden door op de Shift toets te drukken terwijl u er op klikt. Hierdoor kunt u snel een specifieke lay-out in een hiërarchie selecteren, wat anders moeilijk te doen is vanwege het kleine kader dat elke lay-outmanager begrenst.

Een hoofdindeling of hoofdindeling instellen

De laatste stap die u moet uitvoeren bij het bouwen van een formulier is het combineren van alle lay-outs en widget tot één hoofdindeling of hoofdindeling. Deze layout staat bovenaan in de hiërarchie van alle andere layouts en widgets. Het is van vitaal belang dat je een lay-out hebt, omdat anders de widgets op je formulier niet van grootte veranderen als je het venster aanpast.

Om de hoofd lay-out in te stellen, klik je met de rechter muisknop op een willekeurige plaats op je formulier die geen widget of lay-out bevat. Vervolgens kunt u Lay Out Horizontally selecteren, of Lay Out Horizontally, maar u kunt ook Lay Out in a Grid selecteren zoals in de volgende screencast –

In dit voorbeeld gebruiken we achtereenvolgens elk van de drie verschillende lay-outs als ons hoogste niveau lay-out. We gebruiken eerst een horizontale lay-out, breken dan de lay-out en gebruiken een verticale lay-out. Tenslotte stellen we een rasteropmaak in. Welke lay-out u kiest voor uw top-level lay-out hangt af van uw specifieke vereisten voor uw app.

Het is belangrijk dat u opmerkt dat top-level lay-outs niet zichtbaar zijn als een afzonderlijk object in de Object Inspector. De eigenschappen ervan verschijnen onder de widget-eigenschappen van het hoofdformulier. Merk ook op dat als je formulier geen lay-out heeft, het icoon ervan verschijnt met een rode cirkel in de Object Inspector. Een andere manier om te controleren of je de layout goed hebt ingesteld, is door de grootte van het formulier aan te passen. Als er een hoofdlayout is, dan zouden de widgets mee moeten veranderen.

Als je complexere applicaties begint te bouwen, zul je ontdekken dat je voor andere container-widgets ook een top-level layout moet instellen, bijvoorbeeld QGroupBox, QTabWidget, QToolBox, enzovoorts. Om dit te doen, kunt u dezelfde stappen uitvoeren die u hier hebt gezien, maar deze keer moet u met de rechter muisknop op de container widget klikken.

Een Dialoog Opstellen Met Qt Designer

Voor een laatste en completer voorbeeld van het gebruik van layouts met Qt Designer, gaan we nu een dialoogvenster maken om wat informatie in te voeren in een database applicatie. Stel dat we een Human Resources Management software aan het bouwen zijn voor ons bedrijf Poyqote Inc. We werken nu aan een formulier om wat gegevens over onze werknemers in te voeren. De dialoog moet gebruikers een gebruikersvriendelijke GUI bieden voor het invoeren van de volgende gegevens:

• Werknemersnaam
• Werknemersdatum
• Dienst
• Positie
• Jaarsalaris
• Baanbeschrijving

Wat is de beste manier om dit formulier op te maken? Er zijn veel mogelijkheden, en het is vooral een kwestie van smaak en praktijk. Maar hier gebruiken we een QFormLayout om de invoervelden in twee kolommen te verdelen, met links labels en rechts invoervelden. Het proces van het maken van de layout wordt getoond in de volgende screencast –

Het basisdialoogvenster is gemaakt met behulp van Qt Designer’s Dialog with Buttons Bottom template. Vervolgens voegen we enkele labels en invoerwidgets toe, waaronder regelbewerkingen, datumbewerkingen, tekstbewerkingen en comboboxen. Vervolgens plaatsen we al deze widgets in een formulier layout en tenslotte definiëren we een top level of hoofd layout voor het formulier.

Het voltooide dialog .ui bestand kan hier worden gedownload.

Conclusie

Qt Designer is een krachtig gereedschap als het gaat om het maken van GUIs met behulp van Qt. Een van de meest eenvoudige en nuttige functies is de mogelijkheid om je widgets te rangschikken in verschillende soorten lay-outs. Leren hoe je effectief layouts maakt met Qt Designer kan je productiviteit omhoog stuwen, vooral bij het maken van complexe GUIs.

Deze tutorial heeft je door het proces van het maken van aangepaste layouts met Qt Designer geleid. Je weet nu hoe je het meeste uit Qt Designer kunt halen bij het opmaken van je GUI’s.