Lägga ut dina GUI:er med Qt Designer

När du lägger ut dina Qt GUI:er kan det vara en ganska knepig uppgift att placera varje widget i rätt position på dina formulär. Lyckligtvis erbjuder Qt en uppsättning layouthanterare som förenklar processen med widgetplacering och gör att du enkelt kan skapa vilken typ av layout som helst. För att lägga ut widgeten i ett formulär kan du skapa allt i kod, eller så kan du skapa din layout med Qt Designer. I den här handledningen lär du dig hur du använder Qts layouter med Qt Designer för att bygga komplexa grafiska gränssnitt för dina program.

Därtill skapar vi ett exempel på en dialog med flera widgetar med en sammanhängande layout för att förstärka dina kunskaper och sätta ihop allt till en fullt fungerande dialog precis som du skulle skapa i ett verkligt program.

Användning av layouter med Qt Designer

Qt Designer är Qt-verktyget för att designa och skapa grafiska användargränssnitt (GUI) för skrivbordsprogram. Med Qt Designer kan du skapa fönster, dialogrutor och formulär. Det låter dig lägga till olika typer av widgets för att skapa dina grafiska gränssnitt med hjälp av formulär på skärmen och ett drag-och-släpp-baserat gränssnitt.

Qt Designers huvudgränssnitt ser ut på följande sätt –

Qt Designer – Huvudgränssnitt

Qt Designer har ett tydligt och användarvänligt gränssnitt som gör det möjligt för dig att skapa vilken typ av grafiskt gränssnitt som helst genom att dra widgeten till ett tomt formulär. När du har placerat alla widgets på ditt formulär måste du placera dem i en sammanhängande layout. Detta säkerställer att alla dina widgets kommer att visas och ändra storlek på rätt sätt när formuläret förhandsgranskas eller används i ett program.

Qt:s layouthanterare är strukturerade behållare som automatiskt ordnar underordnade widgets och ser till att de utnyttjar det tillgängliga utrymmet på ett bra sätt. Genom att placera widgets i en layouthanterare läggs de automatiskt ut enligt de definierade reglerna. En av Qt Designers mest användbara funktioner är möjligheten att dra och släppa hierarkier av layouthanterare för att ordna widgets i rena och funktionella gränssnitt.

I Qt Designer kan du skapa layoutobjekt genom att tillämpa en layout på en grupp befintliga widgets. Även om det är möjligt att dra layouter till ett formulär och sedan dra widgets till layouterna kan detta vara lite krångligt. Det bästa sättet är att i stället dra alla widgets och spacers som du behöver till formuläret och sedan välja relaterade widgets och spacers och tillämpa layouten på dem. Använd följande steg –

1. Släpp och dra widgetarna på formuläret och försök att placera dem nära den önskade positionen
2. Välj de widgetar som ska hanteras med en viss layout genom att hålla in Ctrl-tangenten och klicka på dem
3. Använd lämplig layout (horisontell, vertikal, rutnät eller formulär) med hjälp av Qt Designers verktygslinje, huvudmenyn, eller formulärets kontextmeny

För att gå in på ett exempel, ta en titt på de layoutrelaterade alternativ som Qt Designer erbjuder –

1. Använd layoutalternativ i huvudverktygsfältet
2. Använd layoutalternativ i huvudmenyn
3. Använd layoutalternativ i formulärets kontextmeny

Det mest lättillgängliga sättet att skapa layouter är att använda layoutdelen i Qt Designers huvudverktygsfält. Denna sektion ser ut på följande sätt –

Qt Designer – Layoutverktygsfältet

Från vänster till höger hittar du följande knappar –

• Lay Out Horizontalally arrangerar valda widgets i en horisontell layout bredvid varandra (Nyckelkombination, Ctrl+1). Det här alternativet använder ett standard QHBoxLayout objekt
• Lay Out Vertically arrangerar valda widgets i en vertikal layout, en under en annan (Nyckelkombination, Ctrl+2). Det här alternativet använder ett standard QVBoxLayout objekt
• Lay Out Horizontal in Splitter ordnar widgetarna horisontellt med hjälp av en splitter (Nyckelkombination, Ctrl+3)
• Lay Out Vertically in Splitter ordnar widgetarna vertikalt med hjälp av en splitter (Nyckelkombination, Ctrl+4)
• Lay Out in a Grid ordnar widgetarna i ett tabellliknande rutnät (rader och kolumner). Som standard upptar varje widget en cell i rutnätet, men du kan ändra detta beteende och få widgetarna att sträcka sig över flera celler (Nyckelkombination, Ctrl+5). Det här alternativet använder ett standard QGridLayout objekt
• Lay Out in a Form Layout arrangerar utvalda widgetar i en tvåkolonnslayout. Den vänstra kolumnen är vanligtvis för etiketter som frågar efter viss information och den högra kolumnen innehåller widgetar för att skriva in, redigera eller visa informationen (Nyckelkombination, Ctrl+6)
• Bryt layout med den här nyckeln kan du bryta en befintlig layout. När widgetar har arrangerats i en layout kan du inte flytta och ändra storlek på dem individuellt, eftersom deras geometri styrs av layouten. Om du vill ändra enskilda widgets måste du bryta layouten och göra om den senare (Nyckelkombination Ctrl+0)
• Justera storlek justerar storleken på layouten för att rymma de widgets som finns i den och för att se till att varje widget har tillräckligt med utrymme för att vara synlig (Nyckelkombination Ctrl+J)

Dessa samma layoutrelaterade alternativ finns också tillgängliga via Qt Designers huvudmeny under menyn Form och via formulärets kontextmeny, så du kan välja det som du tycker bäst om.

När vi nu har teorin ur vägen kan vi omsätta dessa layouter i praktiken. I de kommande avsnitten kommer vi att använda Qt Designer för att layouta widgets på våra formulär och bygga snygga och eleganta grafiska gränssnitt för dina skrivbordsprogram. Men innan vi börjar experimentera med de olika layouthanterare som Qt erbjuder ska vi först skapa en egen widget för att visualisera layouterna när vi går igenom den här handledningen.

Den färdiga .ui-filen kan laddas ner nedan om du vill hoppa över detta steg.

layout-labels.ui

Förbered dig på att starta din Qt Designer och kör sedan följande steg –

1. Välj Widget på fliken templates/forms i dialogrutan New Form. Detta skapar ett nytt tomt formulär att arbeta på.
2. Spara ditt formulär som layout-labels.ui.
3. Leta efter en Label-widget på Widget Box och dra den till formuläret.
4. Gå till Property Editor och ställ in text-egenskapen till 0.
5. Öppna dialogrutan Text Edit och ställ in textfärgen till vit. Ställ in teckensnittsstorleken till 20 punkter och justifiera texten. Tryck på OK för att tillämpa ändringarna.
6. Gå till Property Editor och ställ in egenskapen autoFillBackground till True genom att markera kryssrutan.
7. Sök upp egenskapen palette och öppna dialogrutan Edit Palette. Använd alternativet Quick för att ställa in färgen till rött.

Om du känner dig vilsen kan du ta en titt på följande screencast för att se stegen i praktiken –

I det här exemplet skapar du ett nytt fönster baserat på mallen Widget. Sedan lägger du till en etikett, ställer in dess text-egenskap till 0 och ställer in dess bakgrundsfärg till rött.

För att slutföra exemplet upprepar du alla steg för att lägga till ytterligare tre etiketter med respektive text till 1, 2 och 3 och färgerna till grönt, gult och blått. Du kommer att få ett formulär som detta:

Qt Designer – Formulär med färgade etiketter

Skärmdumpen ovan visar det ursprungliga formuläret som du kommer att använda i de kommande avsnitten. Det är ett rent formulär med fyra etikettobjekt på det. Du kan ställa in en bakgrundsfärg på varje etikett för att lättare kunna se och skilja dem åt i de följande avsnitten.

Horisontella layouter, QHBoxLayout

Du kan använda en horisontell layouthanterare (QHBoxLayout) för att ordna widgetarna i en rad. För att skapa den här typen av layout i kod måste du instantiera QHBoxLayout-klassen och sedan lägga till dina widgets i layoutobjektet. I Qt Designer är det enklare att arbeta tvärtom.

Med din layout-labels.ui-fil öppen markerar du först alla dina etiketter. För att göra detta kan du klicka på varje widget i tur och ordning medan du håller in Ctrl-tangenten eller så kan du också klicka och dra med muspekaren inne i formuläret för att välja widgets.

När du har valt widgetarna sätter du dem i en horisontell layout genom att välja knappen Lay Out Horizontally i Qt Designers huvudverktygsfält. Du kan också använda alternativet Lay out->Lay Out Horizontally i kontextmenyn som visas nedan eller trycka på Ctrl+1. Följande screencast guidar dig genom dessa steg –

Om layouten är fel kan du enkelt ångra allt och börja layouten på nytt. För att ångra saker och ting kan du trycka på Ctrl+z eller använda menyn Edit från Qt Designers huvudmenyrad. Om detta inte är möjligt eller inte fungerar kan du bara bryta layouten med hjälp av knappen Break Layout från Qt Designers huvudverktygsfält. Ett annat sätt att bryta en layout är att trycka på Ctrl+0 eller välja Break Layout från formulärets kontextmeny.

Vertikala layouter, QVBoxLayout

Du kan använda en vertikal layout (QVBoxLayout) för att ordna dina widgetar i en kolumn över varandra. Detta kan vara mycket användbart när du skapar grupper av widgets och du måste se till att de är vertikalt anpassade.

Det första steget är att börja med din ursprungliga layout-labels.ui-fil och välja ut de widgets som ska ingå i den vertikala layouten. Därefter kan du klicka på knappen Lay Out Vertically över huvudverktygsfältet, du kan använda kontextmenyn eller du kan också trycka på Ctrl+2. Följande screencast guidar dig genom dessa steg –

Om du tittar närmare på screencasten kan du se att layoutobjektet indikeras av en tunn röd ram som omger etiketterna på formuläret. Denna röda ram är inte synlig vid förhandsgranskning eller vid körning, den är bara en vägledning som du kan använda när du utformar formuläret. Observera också att, layoutobjektet visas i Object Inspector och dess egenskaper (marginaler och begränsningar) visas i Property Editor.

Grid Layouts, QGridLayout

Ibland behöver du lägga ut dina widgets både horisontellt och vertikalt inom samma layout. För att göra detta kan du använda en rutnätslayouthanterare (QGridLayout). Rutnätslayouthanterare lägger ut dina widgets i ett kvadratiskt eller rektangulärt rutnät, där alla widgets är vertikalt och horisontellt anpassade till sina grannar. Den här typen av layout kan ge dig mycket större frihet att arrangera dina widgets på ett formulär, samtidigt som du behåller en viss grad av struktur. Det här arrangemanget kan vara lämpligare än inbäddade arrangemang av horisontella och vertikala layouter, särskilt när du bryr dig om inriktningen av intilliggande rader eller kolumner.

Du kan bygga en rutnätslayout med Qt Designer på samma sätt som för andra layouter. Det första steget är att välja den grupp av widgets som du vill lägga upp med hjälp av en rutnätlayouthanterare. Därefter kan du använda verktygsfältet, kontextmenyn eller trycka på Ctrl+5 för att ställa in layouten. Titta på följande screencast –

I det här fallet använder vi en 2 x 2 rutnätslayout för att ordna etiketterna på formuläret. Observera att om du vill använda den här typen av layout ska du först placera dina widgets i rader och kolumner på formuläret, vilket visas i skärmdumpen ovan. Qt Designer är ganska smart och kommer att försöka hålla din design så lik den du ursprungligen skapade för hand som möjligt. Den kan till och med skapa svåra arrangemang med flera kolumner automatiskt eller automatiskt fylla tomma celler.

Formulärlayouter, QFormLayout

Samtidigt som en QGridLayout kan användas för att layouta formulär med inmatningar och etiketter i två kolumner, tillhandahåller Qt också en layout som är utformad speciellt för detta ändamål – (QFormLayout). Den här typen av layout är idealisk när du skapar ett strukturerat datainmatnings- eller databasprogram. Den vänstra kolumnen innehåller vanligen etiketter som frågar efter viss information. Den högra kolumnen innehåller inmatningswidgetar, t.ex. radredigeringar (QLineEdit), spinboxar (QSpinBox), datumredigeringar (QDateEdit), kombinationsrutor (QComboBox) och så vidare.

Fördelen med att använda den här layouten jämfört med QGridLayout är att den är enklare att arbeta med när du bara behöver två kolumner. Följande screencast visar den i praktiken –

I det här exemplet lägger vi först till fyra nya etiketter. Dessa etiketter kommer att innehålla information om de data som du behöver skriva in eller redigera i den andra kolumnen. I det här fallet innehåller den andra kolumnen dina testfärgade etiketter, men vanligtvis används den här kolumnen för att placera inmatningswidgetar som radredigering, snurrboxar, kombinationsrutor och så vidare.

Splitterlayouter

Splitters är behållarobjekt som ordnar widgetar horisontellt eller vertikalt i två paneler som kan ändras i storlek. Med den här typen av layout kan du fritt justera det utrymme som varje panel tar upp på formuläret, samtidigt som det totala utrymmet som används hålls konstant. I Qt splitterlayouter hanteras layouter med hjälp av QSplitter.

Även om splitters tekniskt sett är en containerwidget (inte en layout) behandlar Qt Designer dem som layouter som kan tillämpas på befintliga widgets. För att placera en grupp widgets i en splitter markerar du dem först som vanligt och tillämpar sedan splittern med hjälp av lämplig verktygsfältsknapp, tangentbordsgenväg eller kontextmenyalternativ i Qt Designer Ta en titt på följande screencast –

I det här exemplet tillämpar vi först en horisontell splitter på dina etiketter. Observera att du måste starta förhandsgranskningen av formuläret om du vill se delaren i aktion. Du kan starta förhandsgranskningen av formuläret genom att trycka på Ctrl+R. Senare tillämpar vi en vertikal delare på etiketterna. I varje fall kan du fritt ändra storlek på widgeten med hjälp av musens pekare.

Bygga andra layouter med Qt Designer

Det finns ytterligare några saker du kan göra med layouter i Qt Designer. Anta till exempel att du behöver lägga till en ny widget i en befintlig layout, eller att du behöver använda inbäddade layouter för att ordna dina widgets i ett komplext grafiskt gränssnitt. I de följande avsnitten kommer vi att behandla hur du utför några av dessa uppgifter.

Insättning av objekt i en befintlig layout

Objekt kan sättas in i en befintlig layout genom att dra dem från sina nuvarande positioner och släppa dem på den önskade positionen i layouten. En blå markör visas i layouten när ett objekt dras över den för att ange var objektet kommer att placeras.

Ta en titt på följande skärmdump där vi placerar tre av våra etiketter i en vertikal layout och sedan inser att vi glömde bort den blå etiketten –

Det är också möjligt att flytta eller ändra positionen för en viss widget i en layout. För att göra detta är det bara att dra och släppa widgeten till dess nya position i layouten. Kom ihåg att följa den blå linjen för att få detta rätt.

Nesting Layouts to Build Complex GUI

Du kan också nestla layouthanterare i varandra med hjälp av Qt Designer. Den inre layouten blir då ett barn till den omslutande layouten. Genom att göra detta kan du iterativt skapa mycket komplexa men ändå välstrukturerade användargränssnitt.

Layouter kan nästlas in så djupt som du behöver. Om du till exempel vill skapa en dialogruta med en horisontell rad knappar längst ner och en massa andra widgets som är vertikalt placerade på formuläret, kan du använda en horisontell layout för knapparna och en vertikal layout för resten av widgetarna och sedan linda in dessa layouter i en vertikal layout.

Om vi återvänder till vårt exempel med färgade etiketter visar följande screencast hur man arrangerar en nästlad layout i Qt Designer –

I det här exemplet arrangerar vi först widgets i par med hjälp av en horisontell layout. Sedan nästlar vi in båda dessa layouter i en tredje layout, men den här gången en vertikal layout. Layouterna kan nästlas in så djupt som behövs.

När du väljer en underlayout kan dess överordnade layout väljas genom att trycka på tangenten Shift samtidigt som du klickar på den. På så sätt kan du snabbt välja en specifik layout i en hierarki, vilket annars är svårt att göra på grund av den lilla ram som avgränsar varje layouthanterare.

Inställning av en topplayout eller huvudlayout

Det sista steget som du måste utföra när du bygger ett formulär är att kombinera alla layouter och widget till en huvudlayout eller topplayout. Den här layouten ligger högst upp i hierarkin för alla andra layouter och widgets. Det är viktigt att du har en layout eftersom widgetarna på formuläret annars inte ändrar storlek när du ändrar storleken på fönstret.

För att ställa in huvudlayouten högerklickar du bara var som helst på ditt formulär som inte innehåller en widget eller layout. Sedan kan du välja Lay Out Horizontally, eller Lay Out Horizontally, eller du kan också välja Lay Out in a Grid som i följande screencast –

I det här exemplet använder vi i tur och ordning var och en av de tre olika layouterna som vår huvudlayout. Först använder vi en horisontell layout, sedan bryter vi layouten och använder en vertikal layout. Slutligen ställer vi in en rutnätlayout. Vilken topplayout du väljer för din topplayout beror på dina specifika krav för din app.

Det är viktigt att du noterar att topplayouter inte är synliga som ett separat objekt i objektinspektören. Dess egenskaper visas under widgetegenskaperna för huvudformuläret. Observera också att om ditt formulär inte har en layout så visas dess ikon med en röd cirkel i Object Inspector. Ett annat sätt att kontrollera om du har ställt in en huvudlayout på rätt sätt är att försöka ändra storleken på formuläret, om en huvudlayout finns på plats bör dina widgetar ändra storlek i enlighet med detta.

När du börjar bygga mer komplexa program kommer du att upptäcka att andra containerwidgetar också kräver att du ställer in en huvudlayout, t.ex. QGroupBox, QTabWidget, QToolBox, och så vidare. För att göra detta kan du köra samma steg som du har sett här, men den här gången måste du högerklicka på containerwidgeten.

Läggning av en dialog med Qt Designer

För ett sista och mer komplett exempel på hur du kan använda layouter med Qt Designer ska vi nu skapa en dialog för att introducera viss information i ett databasprogram. Anta att vi bygger ett program för personaladministration för vårt företag Poyqote Inc. Vi arbetar nu i ett formulär för att introducera några uppgifter om våra anställda. Dialogrutan ska presentera användarna med ett användarvänligt GUI för att introducera följande data:

• Anställdas namn
• Anställningsdatum
• Avdelning
• Position
• Årslön
• Arbetsbeskrivning

Vilket är det bästa sättet att lägga upp detta formulär? Det finns många alternativ, och det är till stor del en fråga om smak och praxis. Men här använder vi en QFormLayout för att ordna inmatningsfälten i två kolumner med etiketter till vänster och inmatningsrutor till höger. Processen för att skapa layouten visas i följande screencast –

Den grundläggande dialogrutan skapas med hjälp av Qt Designers mall Dialog with Buttons Bottom (Dialog med knappar i botten). Sedan lägger vi till några etiketter och några inmatningswidgetar, bland annat radredigering, datumredigering, textredigering och kombinationsrutor. Därefter placerar vi alla dessa widgetar i en formulärlayout och definierar slutligen en toppnivå eller huvudlayout för formuläret.

Den färdiga dialogen .ui-filen kan laddas ner här.

Slutsats

Qt Designer är ett kraftfullt verktyg när det gäller att skapa grafiska gränssnitt med Qt. En av dess enklaste och mest användbara funktioner är möjligheten att ordna dina widgets i olika typer av layouter. Om du lär dig att effektivt skapa layouter med Qt Designer kan din produktivitet skjuta i höjden, särskilt när du skapar komplexa GUI:er.

Denna handledning guidar dig genom processen att skapa anpassade layouter med Qt Designer. Du vet nu hur du får ut det mesta av Qt Designer när du lägger upp dina grafiska gränssnitt.