Layout af dine GUI’er med Qt Designer

Når du layouter dine Qt GUI’er, kan det være en ret vanskelig opgave at placere hver widget i den rigtige position på dine formularer. Heldigvis tilbyder Qt et sæt layoutmanagere, der forenkler processen med widget-placering, og som gør det muligt for dig nemt at oprette enhver form for layout. For at lægge widget’en ud i en formular kan du oprette alt i kode, eller du kan oprette dit layout med Qt Designer. I denne tutorial lærer du at bruge Qt’s layouts med Qt Designer til at opbygge komplekse GUI’er til dine programmer.

Dertil kommer, at vi opretter et dialogeksempel med flere widgets med et sammenhængende layout for at styrke din viden og sætte det hele sammen til en fuldt funktionel dialog, ligesom du ville oprette i et virkeligt program.

Brug af layouts med Qt Designer

Qt Designer er Qt-værktøjet til at designe og oprette grafiske brugergrænseflader (GUI) til skrivebordsprogrammer. Med Qt Designer kan du oprette vinduer, dialoger og formularer. Det giver dig mulighed for at tilføje forskellige slags widgets for at skabe dine GUI’er ved hjælp af formularer på skærmen og en træk-og-slip-baseret grænseflade.

Qt Designers hovedgrænseflade ser således ud –

Qt Designer – Hovedgrænseflade

Qt Designer har en klar og brugervenlig grænseflade, der giver dig mulighed for at oprette enhver form for GUI ved at trække widget ind på en tom formular. Når du har placeret alle widgets på din formular, skal du placere dem i et sammenhængende layout. Dette vil sikre, at alle dine widgets vil blive vist og ændre størrelsen korrekt, når formularen vises i et preview eller bruges i et program.

Qt’s layout managers er strukturerede containere, som automatisk arrangerer child widgets og sikrer, at de gør god brug af den tilgængelige plads. Ved at placere widgets i en layout manager bliver de automatisk placeret i overensstemmelse med de definerede regler. En af Qt Designers mest nyttige funktioner er muligheden for at trække og slippe hierarkier af layoutmanagere for at arrangere widgets i rene og funktionelle grænseflader.

I Qt Designer kan du oprette layoutobjekter ved at anvende et layout på en gruppe af eksisterende widgets. Selv om det er muligt at trække layouts ind på en formular og derefter trække widgets ind i layouts, kan dette være en smule besværligt. Den bedste fremgangsmåde er i stedet at trække alle de widgets og afstandsstykker, du har brug for, ind i formularen og derefter vælge relaterede widgets og afstandsstykker og anvende layouts på dem. Brug følgende trin –

1. Træk og slip widgets på formularen og prøv at placere dem i nærheden af deres ønskede position
2. Vælg de widgets, der skal håndteres med et givet layout, ved at holde Ctrl-tasten nede og klikke på dem
3. Anvend det relevante layout (vandret, lodret, gitter eller formular) ved hjælp af Qt Designers værktøjslinje, hovedmenu, eller formularens kontekstmenu

Hvor du går ind i et eksempel, skal du tage et kig på de layoutrelaterede muligheder, som Qt Designer tilbyder –

1. Brug layoutindstillinger på hovedværktøjslinjen
2. Brug layoutindstillinger i hovedmenuen
3. Brug layoutindstillinger i formularens kontekstmenu

Den mest tilgængelige måde at oprette layouts på er ved hjælp af layoutsektionen i Qt Designers hovedværktøjslinje. Denne sektion ser således ud –

Qt Designer – Layout-værktøjslinjen

Fra venstre til højre finder du følgende knapper –

• Lay Out Horizontal arrangerer valgte widgets i et vandret layout ved siden af hinanden (Tastekombination, Ctrl+1). Denne indstilling bruger et standard QHBoxLayout objekt
• Lay Out Vertically arrangerer valgte widgets i et lodret layout, den ene under den anden (nøglekombination, Ctrl+2). Denne indstilling bruger et standard QVBoxLayout-objekt
• Lay Out Horizontally in Splitter arrangerer widgets horisontalt ved hjælp af en splitter (nøglekombination, Ctrl+3)
• Lay Out Vertically in Splitter arrangerer widgets vertikalt ved hjælp af en splitter (nøglekombination, Ctrl+4)
• Lay Out in a Grid arrangerer widgets i et tabellignende gitter (rækker og kolonner). Som standard optager hver widget én celle i gitteret, men du kan ændre denne opførsel og få widgets til at spænde over flere celler (nøglekombination, Ctrl+5). Denne indstilling bruger et standard QGridLayout objekt
• Lay Out i et formularlayout arrangerer udvalgte widgets i et layout med to kolonner. Den venstre kolonne er normalt til etiketter, der beder om nogle oplysninger, og den højre kolonne indeholder widgets til indtastning, redigering eller visning af disse oplysninger (Nøglekombination, Ctrl+6)
• Bryd layout Denne nøgle giver dig mulighed for at bryde et eksisterende layout. Når widgets først er arrangeret i et layout, kan du ikke flytte og ændre størrelsen på dem individuelt, fordi deres geometri styres af layoutet. Hvis du vil ændre individuelle widgets, skal du bryde layoutet og lave det om senere (Tastekombination Ctrl+0)
• Juster størrelse justerer størrelsen af layoutet for at rumme indeholdte widgets og for at sikre, at hver enkelt har tilstrækkelig plads til at være synlig (Tastekombination Ctrl+J)

De samme layoutrelaterede indstillinger er også tilgængelige via Qt Designers hovedmenu under menuen Form og via formularens kontekstmenu, så du kan vælge den, du bedst kan lide.

Nu har vi teorien på plads, og nu kan vi omsætte disse layouts i praksis. I de næste par afsnit vil vi bruge Qt Designer til at layoute widgets på vores formularer og bygge flotte og elegante GUI’er til dine skrivebordsprogrammer. Men før vi begynder at eksperimentere med de forskellige layoutmanagere, som Qt tilbyder, vil vi først oprette en brugerdefineret widget til at visualisere layouts, mens vi gennemgår denne tutorial.

Den færdige .ui-filen kan downloades nedenfor, hvis du ønsker at springe dette trin over.

layout-labels.ui

Før videre og start din Qt Designer, og kør derefter følgende trin –

1. Vælg Widget på fanen templates/forms i New Form-dialogboksen. Dette vil oprette en ny tom formular, som du kan arbejde på.
2. Spar din formular som layout-labels.ui.
3. Opnå en Label-widget på Widget Box og træk den ind på formularen.
4. Gå til Property Editor og indstil text-egenskaben til 0.
5. Åbn Text Edit-dialogboksen, og indstil tekstfarven til hvid. Indstil skriftstørrelsen til 20 point, og retfærdiggør teksten. Tryk på OK for at anvende ændringerne.
6. Gå til Property Editor, og indstil autoFillBackground-egenskaben til True ved at markere afkrydsningsfeltet.
7. Søg palette-egenskaben, og åbn Edit Palette-dialogboksen. Brug Quick til at indstille farven til rød.

Hvis du føler dig fortabt, kan du tage et kig på følgende screencast for at se trinene i praksis –

I dette eksempel opretter du et nyt vindue baseret på Widget-skabelonen. Derefter tilføjer du en etiket, indstiller dens text-egenskab til 0 og indstiller dens baggrundsfarve til rød.

For at fuldende dette eksempel skal du gentage alle trinene for at tilføje yderligere tre etiketter med deres respektive tekst indstillet til 1, 2 og 3 og deres farver indstillet til grøn, gul og blå. Du ender med en formular som denne:

Qt Designer – Formular med farvede etiketter

Overstående skærmbillede viser den oprindelige formular, som du vil bruge i de næste par afsnit. Det er en ren formular med fire etiketobjekter på den. Du kan indstille en baggrundsfarve til hver etiket for at kunne se og skelne dem lettere i de følgende afsnit.

Horisontale layouts, QHBoxLayout

Du kan bruge en horisontal layoutmanager (QHBoxLayout) til at arrangere widgetsene i en række. Hvis du vil oprette denne type layout i kode, skal du instantiere QHBoxLayout-klassen og derefter tilføje dine widgets til layoutobjektet. I Qt Designer er det nemmere at arbejde den anden vej rundt.

Med din layout-labels.ui-fil åben skal du først vælge alle dine etiketter. For at gøre dette kan du klikke på hver widget på skift, mens du holder Ctrl-tasten nede, eller du kan også klikke og trække med musemarkøren inde i formularen for at vælge widgetsne.

Når du har valgt widgets, skal du placere dem i et vandret layout ved at vælge knappen Lay Out Horizontally i Qt Designers hovedværktøjslinje. Du kan også bruge indstillingen Lay out->Lay Out Horizontally fra kontekstmenuen vist nedenfor, eller du kan trykke på Ctrl+1. Følgende screencast guider dig gennem disse trin –

Hvis layoutet er forkert, kan du nemt fortryde alting og starte forfra med at lægge tingene ud igen. For at fortryde tingene kan du trykke på Ctrl+z eller bruge menuen Edit fra Qt Designers hovedmenubar. Hvis det ikke er muligt eller ikke virker, kan du bare bryde layoutet ved hjælp af knappen Break Layout fra Qt Designers hovedværktøjslinje. En anden måde at bryde et layout på er at trykke på Ctrl+0 eller vælge Break Layout fra formularens kontekstmenu.

Vertikale layouts, QVBoxLayout

Du kan bruge et vertikalt layout (QVBoxLayout) til at arrangere dine widgets i en kolonne oven på hinanden. Dette kan være meget nyttigt, når du opretter grupper af widgets, og du skal sikre, at de er lodret justeret.

Det første skridt, når du starter op med din oprindelige layout-labels.ui-fil, er at vælge de widgets, som du skal medtage i det lodrette layout. Herefter kan du klikke på knappen Lay Out Vertically over hovedværktøjslinjen, eller du kan bruge kontekstmenuen, eller du kan også trykke på Ctrl+2. Følgende screencast guider dig gennem disse trin –

Hvis du kigger nærmere på screencastet, så kan du se, at layoutobjektet er angivet ved en tynd rød ramme, der omgiver etiketterne på formularen. Denne røde ramme er ikke synlig i forhåndsvisning eller ved kørselstid, den er blot en vejledning, som du kan bruge, når du designer formularen. Bemærk også, at layoutobjektet vises i Object Inspector, og dets egenskaber (marginer og begrænsninger) vises i Property Editor.

Grid Layouts, QGridLayout

Sommetider har du brug for at lægge dine widgets både horisontalt og vertikalt i det samme layout. For at gøre dette kan du bruge en gitterlayoutmanager (QGridLayout). Gitterlayoutmanagere udlægger dine widgets i et kvadratisk eller rektangulært gitter, hvor alle widgets flugter vertikalt og horisontalt med deres naboer. Denne form for layout kan give dig meget mere frihed til at arrangere dine widgets på en formular, samtidig med at du bevarer en vis grad af struktur. Denne opstilling kan være mere velegnet end indlejret opstilling af horisontale og vertikale layouts, især når du er opmærksom på justeringen af tilstødende rækker eller kolonner.

Du kan opbygge et gitterlayout med Qt Designer på samme måde som for andre layouts. Det første trin er at vælge den gruppe af widgets, som du ønsker at lægge ud ved hjælp af en gitterlayoutmanager. Derefter kan du bruge værktøjslinjen, kontekstmenuen eller trykke på Ctrl+5 for at opsætte layoutet. Se følgende screencast –

I dette tilfælde bruger vi et 2 x 2 gitterlayout til at arrangere etiketterne på din formular. Bemærk, at for at bruge denne form for layout skal du først placere dine widgets i rækker og kolonner på formularen, som vist i screencastet ovenfor. Qt Designer er ret smart og vil forsøge at holde dit design så ens som muligt med det, du oprindeligt skabte i hånden. Den kan endda oprette vanskelige flerkolonnearrangementer automatisk eller automatisk udfylde tomme celler.

Formularlayouts, QFormLayout

Mens en QGridLayout kan bruges til at layoute formularer med indgange og etiketter i to kolonner, tilbyder Qt også et layout, der er designet specielt til dette formål – (QFormLayout). Denne type layout er ideel, når du opretter et struktureret dataindtastnings- eller databaseprogram. Den venstre kolonne vil normalt indeholde etiketter, der beder om nogle oplysninger. Den højre kolonne indeholder indtastningswidgets som f.eks. linjebearbejdninger (QLineEdit), spinbokse (QSpinBox), databearbejdninger (QDateEdit), kombinationsbokse (QComboBox) osv.

Førdelen ved at bruge dette layout frem for QGridLayout er, at det er enklere at arbejde med, når du kun har brug for to kolonner. Følgende screencast viser det i praksis –

I dette eksempel tilføjer vi først fire nye etiketter. Disse etiketter vil indeholde oplysninger om de data, som du har brug for at indtaste eller redigere i den anden kolonne. I dette tilfælde indeholder den anden kolonne dine testfarvede etiketter, men normalt vil denne kolonne blive brugt til at placere input-widget’er som f.eks. linjeledninger, spinbokse, kombinationsbokse osv.

Splitter Layouts

Splitters er containerobjekter, der arrangerer widgets horisontalt eller vertikalt i to paneler, hvis størrelse kan ændres. Med denne form for layout kan du frit justere den mængde plads, som hvert panel optager på din formular, mens du kan holde den samlede plads, der bruges, konstant. I Qt splitter layouts styres ved hjælp af QSplitter.

Selv om splittere teknisk set er en container-widget (ikke et layout), behandler Qt Designer dem som layouts, der kan anvendes på eksisterende widgets. Hvis du vil placere en gruppe widgets i en splitter, skal du først vælge dem som normalt og derefter anvende splitteren ved hjælp af den relevante knap på værktøjslinjen, tastaturgenvej eller kontekstmenuindstilling i Qt Designer Tag et kig på følgende screencast –

I dette eksempel anvender vi først en vandret splitter på dine etiketter. Bemærk, at du skal starte formularfremvisningen, hvis du vil se splitteren i aktion. Du kan starte formularfremvisningen ved at trykke på Ctrl+R. Senere anvender vi en lodret splitter på etiketterne. I hvert tilfælde kan du frit ændre størrelsen på widget’en ved hjælp af musens markør.

Opbygning af andre layouts med Qt Designer

Der er et par andre ting, du kan gøre med layouts i Qt Designer. Lad os for eksempel antage, at du har brug for at tilføje en ny widget til et eksisterende layout eller at bruge indlejrede layouts til at arrangere dine widgets i en kompleks GUI. I de følgende afsnit vil vi gennemgå, hvordan du udfører nogle af disse opgaver.

Indsætning af objekter i et eksisterende layout

Objekter kan indsættes i et eksisterende layout ved at trække dem fra deres nuværende positioner og slippe dem på den ønskede position i layoutet. Der vises en blå markør i layoutet, når et objekt trækkes hen over det for at angive, hvor objektet skal placeres.

Se følgende screencast, hvor vi placerer tre af vores etiketter i et lodret layout og derefter indser, at vi har glemt den blå etiket –

Det er også muligt at flytte eller ændre positionen for en given widget i et layout. For at gøre dette skal du blot trække og slippe widget’en til dens nye position i layoutet. Husk at følge den blå linje for at få dette korrekt.

Nesting Layouts to Build Complex GUI’s

Du kan også nestre layoutmanagere i hinanden ved hjælp af Qt Designer. Det indre layout bliver så et barn af det omsluttende layout. Ved at gøre dette kan du iterativt skabe meget komplekse, men alligevel velstrukturerede brugergrænseflader.

Layouts kan indlejres så dybt, som du har brug for. Hvis du f.eks. vil oprette en dialogboks med en vandret række knapper nederst og en masse andre widgets, der er placeret lodret på formularen, kan du bruge et vandret layout for knapperne og et lodret layout for resten af widgets og derefter pakke disse layouts ind i et lodret layout.

For at vende tilbage til vores eksempel med farvede etiketter viser følgende screencast processen med at arrangere et indlejret layout i Qt Designer –

I dette eksempel arrangerer vi først widgets i par ved hjælp af et vandret layout. Derefter nesting vi begge disse layouts i et tredje layout, men denne gang et lodret layout. Layouts kan nested så dybt som nødvendigt.

Når du vælger et underlayout, kan dets overordnede layout vælges ved at trykke på tasten Shift, mens du klikker på det. Dette giver dig mulighed for hurtigt at vælge et bestemt layout i et hierarki, hvilket ellers vil være svært at gøre på grund af den lille ramme, der afgrænser hver layoutmanager.

Indstilling af et topniveau- eller hovedlayout

Det sidste trin, du skal udføre, når du opbygger en formular, er at kombinere alle layouts og widgets i ét hovedlayout eller topniveau-layout. Dette layout står øverst i hierarkiet af alle andre layouts og widgets. Det er vigtigt, at du har et layout, da widgets på din formular ellers ikke ændrer størrelsen, når du ændrer størrelsen på vinduet.

For at indstille hovedlayoutet skal du blot højreklikke et sted på din formular, der ikke indeholder en widget eller et layout. Derefter kan du vælge Lay Out Horizontally, eller Lay Out Horizontally, eller du kan også vælge Lay Out in a Grid som i følgende screencast –

I dette eksempel bruger vi skiftevis hvert af de tre forskellige layouts som vores toplayout. Vi bruger først et vandret layout, derefter bryder vi layoutet og bruger et lodret layout. Til sidst indstiller vi et gitterlayout. Hvilket topniveaulayout du vælger til dit topniveaulayout, afhænger af dine specifikke krav til din app.

Det er vigtigt, at du er opmærksom på, at topniveaulayouts ikke er synlige som et separat objekt i Object Inspector. Dets egenskaber vises under widget-egenskaberne for hovedformularen. Bemærk også, at hvis din formular ikke har et layout, vises dens ikon med en rød cirkel i Object Inspector. En anden måde at kontrollere, om du har indstillet et hovedlayout korrekt, er at prøve at ændre størrelsen på formularen, hvis der er et hovedlayout på plads, så bør dine widgets ændre størrelse i overensstemmelse hermed.

Når du begynder at bygge mere komplekse programmer, vil du opdage, at andre container-widgets også kræver, at du indstiller et layout på øverste niveau, f.eks. QGroupBox, QTabWidget, QToolBox osv. For at gøre dette kan du køre de samme trin, som du har set her, men denne gang skal du højreklikke på container-widget’en.

Layout af en dialog med Qt Designer

For et sidste og mere komplet eksempel på, hvordan man bruger layouts med Qt Designer, vil vi nu oprette en dialog for at introducere nogle oplysninger i et databaseprogram. Lad os antage, at vi er ved at opbygge et program til forvaltning af menneskelige ressourcer for vores firma Poyqote Inc. Vi arbejder nu i en formular for at indføre nogle data om vores medarbejdere. Dialogen skal præsentere brugerne for en brugervenlig GUI til at introducere følgende data:

• Medarbejdernavn
• Anbudsdato
• Afdeling
• Stilling
• Årsløn
• Jobbeskrivelse

Hvad er den bedste måde at layoute denne formular på? Der er mange muligheder, og det er i høj grad et spørgsmål om smag og øvelse. Men her bruger vi en QFormLayout til at arrangere indtastningsfelterne i to kolonner med etiketter til venstre og indtastningsfelter til højre. Processen med at oprette layoutet er vist i følgende screencast –

Grunddialogboksen er oprettet ved hjælp af Qt Designers skabelon Dialog with Buttons Bottom (Dialog med knapper nederst) fra Qt Designer. Derefter tilføjer vi nogle etiketter og nogle input widget, herunder linjebearbejdninger, datobearbejdninger, tekstbearbejdninger og kombinationsbokse. Dernæst placerer vi alle disse widgets i et formularlayout og definerer til sidst et topniveau eller hovedlayout for formularen.

Den færdige dialog .ui-fil kan downloades her.

Konklusion

Qt Designer er et kraftfuldt værktøj, når det gælder om at skabe GUI’er ved hjælp af Qt. En af dets mest ligetil og nyttige funktioner er muligheden for at arrangere dine widgets i forskellige typer layouts. Hvis du lærer, hvordan du effektivt opretter layouts med Qt Designer, kan du få din produktivitet til at skyde i vejret, især når du opretter komplekse GUI’er.

Denne vejledning guidede dig gennem processen med at oprette brugerdefinerede layouts med Qt Designer. Du ved nu, hvordan du får mest muligt ud af Qt Designer, når du udlægger dine GUI’er.