Första stegen med Qt Designer

Den här handledningen kräver att Qt Creator är installerad – du kan ladda ner den gratis från Qts webbplats. Gå till https://www.qt.io/download och ladda ner Qt-paketet. Du kan välja att bara installera Creator under installationen.

Öppna Qt Creator och du kommer att få se huvudfönstret. Designern är tillgänglig via fliken på vänster sida. För att aktivera denna måste du dock först börja skapa en .ui-fil.

Gränssnittet för Qt Creator, med avsnittet Design visas till vänster.

För att skapa en .ui-fil går du till File -> New File or Project… I fönstret som visas väljer du Qt under Files and Classes till vänster och sedan Qt Designer Form till höger. Du märker att ikonen har ”ui” på sig, vilket visar vilken typ av fil du skapar.

Skapa en ny Qt .ui-fil.

I nästa steg blir du tillfrågad om vilken typ av widget du vill skapa. Om du startar ett program är Main Window det rätta valet. Du kan dock även skapa .ui-filer för dialogrutor, formulär och anpassade sammansatta widgets.

Välj vilken typ av widget du vill skapa, för de flesta tillämpningar blir det Huvudfönster.

Nästan välj ett filnamn och en sparmapp för din fil. Spara din .ui-fil med samma namn som den klass du ska skapa, bara för att göra efterföljande kommandon enklare.

Välj sparnamn och mapp för din fil.

Slutligt kan du välja att lägga till filen i ditt versionskontrollsystem om du använder ett sådant. Hoppa gärna över det här steget – det påverkar inte ditt användargränssnitt.

Och lägg till filen i din versionskontroll, t.ex. Git.

Lägga ut ditt huvudfönster

Du kommer att presenteras för ditt nyskapade huvudfönster i användargränssnittsdesignern. Det finns inte mycket att se till att börja med, bara ett grått arbetsområde som representerar fönstret, tillsammans med början på ett fönstermenyfält.

Den första vyn av det skapade huvudfönstret.

Du kan ändra storleken på fönstret genom att klicka på fönstret och dra de blå handtagen i varje hörn.

Den första vyn av det skapade huvudfönstret.

Det första steget i byggandet av ett program är att lägga till några widgetar till ditt fönster. I våra första applikationer lärde vi oss att för att ställa in den centrala widgeten för en QMainWindow måste vi använda .setCentralWidget(). Vi såg också att för att lägga till flera widgets med en layout behöver vi en mellanliggande QWidget att tillämpa layouten på, istället för att lägga till layouten direkt i fönstret.

Qt Creator tar hand om detta automatiskt, även om det inte är särskilt uppenbart om det.

För att lägga till flera widgets i huvudfönstret med en layout drar du först dina widgets till QMainWindow. Här drar vi tre etiketter. Det spelar ingen roll var du släpper dem.

Huvudfönster med 1 etiketter och 1 knapp tillagd.

Vi har skapat 2 widgets genom att dra dem på fönstret, gjort dem till barn till det fönstret. Vi kan nu tillämpa en layout.

Hitta QMainWindow i den högra panelen (den ska vara högst upp). Under den ser du centralwidget som representerar fönstrets centrala widget. Ikonen för den centrala widgeten visar den aktuella layouten som tillämpas. Inledningsvis har den ett rött cirkelkors genom den, vilket visar att ingen layout är aktiv.

Högerklicka på QMainWindow-objektet och hitta ”Layout” i den resulterande rullgardinsmenyn.

Högerklicka på huvudfönstret och välj layout.

Nästan ser du en lista med layouter som du kan tillämpa på fönstret. Välj Lay Out Horizontal och layouten kommer att tillämpas på widgeten.

Välj layout för att tillämpa på huvudfönstret.

Den valda layouten tillämpas på den centrala widgeten i QMainWindow och widgeten läggs till layouten och läggs ut beroende på den valda layouten. Observera att du i Qt Creator faktiskt kan dra och ordna om widgetarna inom layouten, eller välja en annan layout, som du vill. Detta gör det särskilt trevligt för att skapa prototyper och prova saker.

Vertikal layout tillämpas på widgets i huvudfönstret.

Användning av din genererade .ui-fil

Vi har skapat ett mycket enkelt användargränssnitt. Nästa steg är att få in detta i Python och använda det för att konstruera ett fungerande program.

Spara först din .ui-fil – som standard sparas den på den plats som du valde när du skapade den, men du kan välja en annan plats om du vill.

Den .ui-filen är i XML-format. För att använda vårt användargränssnitt från Python har vi två alternativa metoder –

1. ladda in i en klass med hjälp av .loadUI()-metoden
2. konvertera den till Python med hjälp av pyuic5-verktyget.

Dessa två tillvägagångssätt behandlas nedan. Personligen föredrar jag att konvertera UI till en Python-fil för att hålla saker och ting likadana från en programmerings & paketeringssynpunkt.

Ladda .ui-filen direkt

För att ladda .ui-filer kan vi använda uicmodulen som ingår i PyQt5, specifikt uic.loadUI()metoden. Denna tar filnamnet på en UI-fil och laddar den och skapar ett fullt fungerande PyQt5-objekt.

För PySide2 kan du använda en QUiLoader-instans och anropa loader.load()-metoden för att åstadkomma samma sak.

Ett (mycket) enkelt UI som är utformat i Qt Creator

Eftersom uid.loadUI()-metoden förvandlar ett instansobjekt kan du inte bifoga anpassad __init__()kod. Du kan dock hantera detta genom en anpassad inställningsfunktion

För att ladda ett användargränssnitt från __init__-blocket i en befintlig widget (t.ex. en QMainWindow) kan du använda uic.loadUI(filename, self) för PyQt5.

PySide2-loader har inte stöd för det här tillvägagångssättet – den andra parametern gäller för den överordnade widgeten för widgeten som du skapar. Detta förhindrar att du lägger till anpassad kod till initialiseringen av widgeten, men du kan arbeta runt detta med en separat init-funktion.

Konvertering av din .ui-fil till Python

För att generera en Python-utgångsfil kör pyuic5 från kommandoraden och överlämnar .ui-filen och målfilen för utmatning, med en -o-parameter. Följande kommer att generera en Python-fil med namnet MainWindow.py som innehåller vårt skapade användargränssnitt.

pyuic5 mainwindow.ui -o MainWindow.py

Om du använder PyQt4 heter verktyget `pyuic4`, men är i övrigt helt identiskt.

Du kan öppna den resulterande MainWindow.py-filen i en redigeringsverktyg för att ta en titt, även om du inte bör redigera denna fil. Styrkan med att använda Qt Creator är att kunna redigera, finjustera och uppdatera din applikation medan du utvecklar. Alla ändringar som görs i den här filen kommer att gå förlorade när du uppdaterar den. Du kan dock åsidosätta och justera allt du vill när du importerar och använder filen i dina program.

Import av den resulterande Python-filen fungerar som för vilken annan fil som helst. Du kan importera din klass på följande sätt. Verktyget pyuic5 lägger till Ui_ till namnet på det objekt som definieras i Qt Creator, och det är detta objekt du vill importera.

from MainWindow import Ui_MainWindow

För att skapa huvudfönstret i ditt program skapar du en klass som vanligt, men med underklasser från både QMainWindow och din importerade Ui_MainWindow-klass. Slutligen anropar du self.setupUi(self) från __init__ för att utlösa installationen av gränssnittet.

Detta ger exakt samma resultat som tidigare.

Ett (mycket) enkelt gränssnitt designat i Qt Creator

Det är allt. Ditt fönster är nu helt inställt. Eftersom användningen av en .ui-fil abstraherar den UI-specifika koden kan du använda samma mönster för att ladda vilket gränssnitt som helst som du designar.

Lägga till programlogik

Du kan interagera med widgetar som skapats med hjälp av Qt Creator på samma sätt som du skulle göra med widgetar som skapats med kod. För att göra saker och ting enklare uic lägger till alla underordnade widgets till fönsterobjektet med deras id-namn som anges i Qt Creator. Vi kommer att täcka hur man arbetar med dessa i nästa del.