Voor deze tutorial moet Qt Creator geinstalleerd zijn – u kunt het gratis downloaden van de Qt website. Ga naar https://www.qt.io/download en download het Qt pakket. U kunt ervoor kiezen om tijdens de installatie alleen Creator te installeren.
Open Qt Creator en u krijgt het hoofdvenster te zien. De designer is beschikbaar via het tabblad aan de linkerkant. Om deze te activeren moet u echter eerst een .ui bestand gaan maken.
De Qt Creator interface, met links het Design gedeelte.
Om een .ui bestand te maken gaat u naar File -> New File or Project… In het venster dat verschijnt selecteert u Qt onder Files and Classes aan de linkerkant, selecteer dan Qt Designer Form aan de rechterkant. U zult zien dat er “ui” op het pictogram staat, om aan te geven welk type bestand u aan het maken bent.
Maak een nieuw Qt .ui-bestand.
In de volgende stap wordt u gevraagd welk type widget u wilt maken. Als u een applicatie start, is Main Window de juiste keuze. U kunt echter ook .ui-bestanden maken voor dialoogvensters, formulieren en aangepaste samengestelde widgets.
Selecteer het type widget dat u wilt maken, voor de meeste toepassingen zal dit Hoofdvenster zijn.
Kies vervolgens een bestandsnaam en een opslagmap voor uw bestand. Sla uw .ui-bestand op met dezelfde naam als de klasse die u gaat maken, om latere opdrachten eenvoudiger te maken.
Kies een opslagnaam en map voor uw bestand.
Tot slot kunt u ervoor kiezen om het bestand aan uw versiebeheersysteem toe te voegen, als u er een gebruikt. U kunt deze stap gerust overslaan – het heeft geen invloed op uw UI.
Optioneel kunt u het bestand toevoegen aan uw versiebeheersysteem, bijvoorbeeld Git.
Hoofdvenster maken
U krijgt nu uw nieuw gemaakte hoofdvenster in de UI-ontwerper te zien. In het begin is er niet veel te zien, alleen een grijs werkgebied dat het venster voorstelt, samen met het begin van een menubalk.
De eerste weergave van het gemaakte hoofdvenster.
U kunt de grootte van het venster aanpassen door op het venster te klikken en de blauwe handgrepen op elke hoek te verslepen.
De eerste weergave van het gemaakte hoofdvenster.
De eerste stap bij het bouwen van een applicatie is het toevoegen van een aantal widgets aan uw venster. In onze eerste applicaties hebben we geleerd dat we .setCentralWidget() moeten gebruiken om de centrale widget voor een QMainWindow in te stellen. We hebben ook gezien dat om meerdere widgets met een layout toe te voegen, we een tussenliggende QWidget nodig hebben om de layout op toe te passen, in plaats van de layout direct aan het venster toe te voegen.
Qt Creator regelt dit automatisch voor je, hoewel het niet erg duidelijk is.
Om meerdere widgets met een layout aan het hoofdvenster toe te voegen, sleep je eerst je widgets naar de QMainWindow. Hier slepen we 3 labels. Het maakt niet uit waar u ze neerzet.
Hoofdvenster met 1 labels en 1 knop toegevoegd.
We hebben 2 widgets gemaakt door ze naar het venster te slepen, waardoor ze kinderen van dat venster zijn geworden. We kunnen nu een layout toepassen.
Zoek de QMainWindow in het rechter paneel (het zou helemaal bovenaan moeten staan). Daaronder zie je centralwidget die de centrale widget van het venster voorstelt. Het icoon voor de centrale widget toont de huidige toegepaste layout. In het begin staat er een rood kruis doorheen, om aan te geven dat er geen opmaak actief is.
Rechter muisklik op het object QMainWindow, en zoek ‘Opmaak’ in de resulterende vervolgkeuzelijst.
Rechter muisklik op het hoofdvenster, en kies Opmaak.
Volgende ziet u een lijst met opmaken die u op het venster kunt toepassen. Selecteer Lay Out Horizontally en de lay-out wordt toegepast op de widget.
Selecteer lay-out om toe te passen op het hoofdvenster.
De geselecteerde lay-out wordt toegepast op de centrale widget van de QMainWindow en de widgets worden toegevoegd aan de lay-out, waarbij ze worden ingedeeld op basis van de geselecteerde lay-out. Merk op dat je in Qt Creator de widgets kunt verslepen en opnieuw kunt rangschikken binnen de layout, of een andere layout kunt kiezen, zoals je wilt. Dit is vooral handig voor het maken van prototypes en het uitproberen van dingen.
Verticale layout toegepast op widgets in het hoofdvenster.
Het gegenereerde .ui-bestand gebruiken
We hebben een heel eenvoudige UI gemaakt. De volgende stap is om dit in Python te krijgen en te gebruiken om een werkende applicatie te bouwen.
U slaat eerst uw .ui bestand op – standaard wordt het opgeslagen op de locatie die u gekozen heeft tijdens het maken, hoewel u een andere locatie kunt kiezen als u dat wilt.
Het .ui bestand is in XML formaat. Om onze UI vanuit Python te gebruiken zijn er twee alternatieve methodes beschikbaar –
- laad het in een klasse met behulp van de
.loadUI()methode - converteer het naar Python met behulp van de
pyuic5tool.
Deze twee benaderingen worden hieronder behandeld. Persoonlijk geef ik er de voorkeur aan om de UI naar een Python bestand te converteren om de dingen gelijk te houden vanuit een programmeer & verpakkings oogpunt.
Het .ui bestand direct laden
Om .ui bestanden te laden kunnen we de uic module gebruiken die bij PyQt5 zit, specifiek de uic.loadUI()methode. Deze neemt de bestandsnaam van een UI-bestand en laadt het, waardoor een volledig functioneel PyQt5 object ontstaat.
Voor PySide2 kunt u een QUiLoader instantie gebruiken en de loader.load() methode aanroepen om hetzelfde te bereiken.
Een (zeer) eenvoudige UI ontworpen in Qt Creator
Omdat de uid.loadUI() methode een instantie-object maakt, kunt u geen aangepaste __init__() code toevoegen. U kunt dit echter afhandelen via een aangepaste setup-functie
Om een UI te laden vanuit het __init__ blok van een bestaande widget (b.v. een QMainWindow) kunt u uic.loadUI(filename, self) gebruiken voor PyQt5.
De PySide2 loader ondersteunt deze aanpak niet – de tweede parameter is voor de bovenliggende widget van de widget die u aan het maken bent. Dit voorkomt dat u aangepaste code toevoegt aan de initialisatie van de widget, maar u kunt hier omheen werken met een aparte init functie.
Het omzetten van uw .ui bestand naar Python
Om een Python uitvoerbestand te genereren draait u pyuic5 vanaf de opdrachtregel, waarbij u het .ui bestand en het doelbestand voor uitvoer doorgeeft, met een -o parameter. Het volgende genereert een Python bestand met de naam MainWindow.py dat onze gemaakte UI bevat.
pyuic5 mainwindow.ui -o MainWindow.pyAls u PyQt4 gebruikt, heet het gereedschap `pyuic4`, maar is verder volledig identiek.
U kunt het resulterende MainWindow.py bestand in een editor openen om een kijkje te nemen, hoewel u dit bestand niet moet bewerken. De kracht van het gebruik van Qt Creator is de mogelijkheid om je applicatie te bewerken, tweaken en updaten terwijl je ontwikkelt. Alle wijzigingen in dit bestand gaan verloren als je het bijwerkt. U kunt echter alles overschrijven en aanpassen wat u wilt wanneer u het bestand importeert en gebruikt in uw toepassingen.
Het importeren van het resulterende Python-bestand werkt net als bij elk ander bestand. U kunt uw klasse als volgt importeren. De pyuic5 tool voegt Ui_ toe aan de naam van het object dat in Qt Creator is gedefinieerd, en het is dit object dat u wilt importeren.
from MainWindow import Ui_MainWindowOm het hoofdvenster in uw applicatie te maken, maakt u een class zoals normaal, maar met een subclassing van zowel QMainWindow als uw geïmporteerde Ui_MainWindow class. Roep tenslotte self.setupUi(self) op vanuit de __init__ om het opzetten van de interface te starten.
Dit levert precies hetzelfde resultaat op als voorheen.
Een (zeer) eenvoudige UI ontworpen in Qt Creator
Dat is het. Uw venster is nu volledig opgezet. Omdat het gebruik van een .ui-bestand de UI-specifieke code weglaat, kunt u ditzelfde patroon gebruiken om elke interface te laden die u ontwerpt.
Toepassingslogica toevoegen
U kunt met widgets die met Qt Creator zijn gemaakt net zo omgaan als met widgets die met code zijn gemaakt. Om het eenvoudiger te maken voegt uic alle kind-widgets toe aan het window-object met hun id-naam zoals gespecificeerd in Qt Creator. We zullen in het volgende deel behandelen hoe je hiermee kunt werken.