Denne vejledning kræver, at Qt Creator er installeret – du kan downloade det gratis fra Qt-webstedet. Gå til https://www.qt.io/download og hent Qt-pakken. Du kan vælge kun at installere Creator under installationen.
Åbn Qt Creator, og du vil blive præsenteret for hovedvinduet. Designeren er tilgængelig via fanen i venstre side. For at aktivere denne skal du dog først begynde at oprette en .ui-fil.
Grænsefladen til Qt Creator, med Design-sektionen vist til venstre.
For at oprette en .ui-fil skal du gå til File -> New File or Project… I det vindue, der vises, skal du vælge Qt under Files and Classes til venstre og derefter vælge Qt Designer Form til højre. Du vil bemærke, at der står “ui” på ikonet, hvilket viser, hvilken type fil du opretter.
Opret en ny Qt .ui-fil.
I det næste trin bliver du spurgt, hvilken type widget du vil oprette. Hvis du starter et program, er Main Window det rigtige valg. Du kan dog også oprette .ui-filer til dialogbokse, formularer og brugerdefinerede sammensatte widgets.
Vælg den type widget, der skal oprettes, for de fleste programmer vil det være Main Window.
Vælg dernæst et filnavn og en gemmappe til din fil. Gem din .ui fil med samme navn som den klasse, du vil oprette, bare for at gøre de efterfølgende kommandoer enklere.
Vælg gemme navn og mappe din fil.
Slutteligt kan du vælge at tilføje filen til dit versionskontrolsystem, hvis du bruger et. Du er velkommen til at springe dette trin over – det påvirker ikke din brugergrænseflade.
Optionelt kan du tilføje filen til din versionskontrol, f.eks. Git.
Lægning af dit hovedvindue
Du vil blive præsenteret for dit nyoprettede hovedvindue i brugergrænsefladedesigneren. Der er ikke meget at se til at begynde med, kun et gråt arbejdsområde, der repræsenterer vinduet, sammen med begyndelsen af en menulinje i vinduet.
Den første visning af det oprettede hovedvindue.
Du kan ændre størrelsen på vinduet ved at klikke på vinduet og trække i de blå håndtag på hvert hjørne.
Den første visning af det oprettede hovedvindue.
Det første skridt i opbygningen af et program er at tilføje nogle widgets til dit vindue. I vores første programmer lærte vi, at for at indstille den centrale widget for en QMainWindow skal vi bruge .setCentralWidget(). Vi så også, at for at tilføje flere widgets med et layout har vi brug for et mellemliggende QWidget at anvende layoutet på, i stedet for at tilføje layoutet direkte til vinduet.
Qt Creator tager sig af dette for dig automatisk, selv om det ikke er særlig tydeligt om det.
For at tilføje flere widgets til hovedvinduet med et layout skal du først trække dine widgets ind i QMainWindow. Her trækker vi 3 etiketter. Det er ligegyldigt, hvor du trækker dem hen.
Hovedvindue med 1 etiketter og 1 knap tilføjet.
Vi har oprettet 2 widgets ved at trække dem ind i vinduet og gjort dem til børn af dette vindue. Vi kan nu anvende et layout.
Find QMainWindow i det højre panel (det skal være helt oppe i toppen). Herunder ser du centralwidget, der repræsenterer vinduets centrale widget. Ikonet for den centrale widget viser det aktuelle layout, der er anvendt. I første omgang har det et rødt cirkel-kors igennem, hvilket viser, at der ikke er noget aktivt layout.
Højreklik på QMainWindow-objektet, og find ‘Layout’ i den resulterende dropdown-liste.
Højreklik på hovedvinduet, og vælg layout.
Dernæst får du vist en liste over layouts, som du kan anvende på vinduet. Vælg Lay Out Horizontal, og layoutet vil blive anvendt på widget’en.
Vælg layout til at anvende på hovedvinduet.
Det valgte layout anvendes på den centralewidget i QMainWindow, og widgets tilføjes layoutet, idet de lægges ud afhængigt af det valgte layout. Bemærk, at du i Qt Creator faktisk kan trække og omarrangere widgets inden for layoutet eller vælge et andet layout, som du vil. Dette gør det særligt rart at lave prototyper og afprøve ting.
Vertikalt layout anvendt på widgets i hovedvinduet.
Anvendelse af din genererede .ui-fil
Vi har skabt en meget simpel brugergrænseflade. Det næste skridt er at få dette ind i Python og bruge det til at konstruere et fungerende program.
Saml først din .ui-fil – som standard vil den blive gemt på den placering, du valgte, da du oprettede den, men du kan vælge en anden placering, hvis du vil.
Den .ui-fil er i XML-format. For at bruge vores brugergrænseflade fra Python har vi to alternative metoder til rådighed –
- indlæs den i en klasse ved hjælp af
.loadUI()-metoden - konverter den til Python ved hjælp af
pyuic5-værktøjet.
Disse to fremgangsmåder er dækket nedenfor. Personligt foretrækker jeg at konvertere brugergrænsefladen til en Python-fil for at holde tingene ens fra et programmering & pakningssynspunkt.
Ladning af .ui-filen direkte
For at indlæse .ui-filer kan vi bruge uicmodulet, der er inkluderet i PyQt5, specifikt uic.loadUI()metoden. Denne tager filnavnet på en UI-fil og indlæser den og skaber et fuldt funktionsdygtigt PyQt5-objekt.
For PySide2 kan du bruge en QUiLoader-instans og kalde loader.load()-metoden for at opnå det samme.
En (meget) simpel UI designet i Qt Creator
Da uid.loadUI()-metoden vender et instansobjekt, kan du ikke vedhæfte brugerdefineret __init__()-kode. Du kan dog håndtere dette via en brugerdefineret opsætningsfunktion
For at indlæse et UI fra __init__-blokken i en eksisterende widget (f.eks. en QMainWindow) kan du bruge uic.loadUI(filename, self) til PyQt5.
PySide2-loader understøtter ikke denne fremgangsmåde – den anden parameter er for den overordnede widget for den widget, du opretter. Dette forhindrer dig i at tilføje brugerdefineret kode til initialiseringen af widgeten, men du kan omgå dette med en separat init-funktion.
Konvertering af din .ui-fil til Python
For at generere en Python-uddatafil skal du køre pyuic5 fra kommandolinjen og overdrage .ui-filen og målfilen til output med en -o-parameter. Følgende vil generere en Python-fil ved navn MainWindow.py, som indeholder vores oprettede brugergrænseflade.
pyuic5 mainwindow.ui -o MainWindow.pyHvis du bruger PyQt4, hedder værktøjet `pyuic4`, men er ellers helt identisk.
Du kan åbne den resulterende MainWindow.py-fil i en editor for at tage et kig, selv om du ikke bør redigere denne fil. Styrken ved at bruge Qt Creator er, at du kan redigere, justere og opdatere dit program, mens du udvikler. Alle ændringer, der foretages i denne fil, går tabt, når du opdaterer den. Du kan dog tilsidesætte og justere alt det, du vil, når du importerer og bruger filen i dine programmer.
Import af den resulterende Python-fil fungerer som for enhver anden fil. Du kan importere din klasse på følgende måde. Værktøjet pyuic5 tilføjer Ui_ til navnet på det objekt, der er defineret i Qt Creator, og det er dette objekt, du vil importere.
from MainWindow import Ui_MainWindowFor at oprette hovedvinduet i dit program skal du oprette en klasse som normalt, men som underklasses fra både QMainWindow og din importerede Ui_MainWindow-klasse. Til sidst kalder du self.setupUi(self) fra __init__ for at udløse opsætningen af grænsefladen.
Det giver præcis det samme resultat som før.
En (meget) simpel brugergrænseflade designet i Qt Creator
Det er det. Dit vindue er nu fuldt opsat. Da brugen af en .ui-fil abstraherer den UI-specifikke kode, kan du bruge det samme mønster til at indlæse enhver grænseflade, du designer.
Tilføjelse af programlogik
Du kan interagere med widgets, der er oprettet via Qt Creator, ligesom du ville gøre med widgets, der er oprettet med kode. For at gøre tingene enklere uic tilføjer alle underordnede widgets til vinduesobjektet ved deres id-navn som angivet i Qt Creator. Vi vil dække hvordan man arbejder med disse i næste del.