Ensimmäiset askeleet Qt Designerilla

Tämä opetusohjelma vaatii Qt Creatorin asennuksen – voit ladata sen ilmaiseksi Qt:n verkkosivuilta. Siirry osoitteeseen https://www.qt.io/download ja lataa Qt-paketti. Voit halutessasi asentaa vain Creatorin asennuksen aikana.

Avaa Qt Creator ja sinulle avautuu pääikkuna. Suunnittelija on käytettävissä vasemmanpuoleisen välilehden kautta. Tämän aktivoimiseksi sinun on kuitenkin ensin aloitettava .ui-tiedoston luominen.

Qt Creatorin käyttöliittymä, jossa vasemmalla näkyy Design-osio.

Luoaksesi .ui-tiedoston mene kohtaan File -> New File or Project… Avautuvassa ikkunassa valitse vasemmalla puolella Files and Classes -kohdasta Qt ja sitten oikealla puolella Qt Designer Form. Huomaat, että kuvakkeessa on ”ui”, mikä osoittaa, minkä tyyppistä tiedostoa olet luomassa.

Luo uusi Qt.ui-tiedosto.

Seuraavassa vaiheessa sinulta kysytään, minkä tyyppisen widgetin haluat luoda. Jos olet aloittamassa sovellusta, niin Main Window on oikea valinta. Voit kuitenkin luoda .ui-tiedostoja myös valintaikkunoita, lomakkeita ja mukautettuja yhdistelmäwidgettejä varten.

Valitse luotavan widgetin tyyppi, useimmille sovelluksille tämä on Main Window.

Valitse seuraavaksi tiedostonimi ja tallennuskansio tiedostollesi. Tallenna .ui-tiedostosi samalla nimellä kuin luomaasi luokkaa, jotta myöhempien komentojen tekeminen olisi helpompaa.

Valitse tallennusnimi ja kansio tiedostollesi.

Viimeiseksi voit valita, haluatko lisätä tiedoston versiohallintajärjestelmääsi, jos käytät sellaista. Voit vapaasti ohittaa tämän vaiheen – se ei vaikuta käyttöliittymääsi.

Vaihtoehtoisesti voit lisätä tiedoston versionhallintaasi, esim. Gitiin.

Pääikkunan asettaminen

Sinulle näytetään juuri luotu pääikkunasi käyttöliittymäsuunnittelijassa. Aluksi ei ole paljon nähtävää, vain harmaa työskentelyalue, joka edustaa ikkunaa, sekä ikkunan valikkorivin alkeet.

Luotu pääikkunan aloitusnäkymä.

Voit muuttaa ikkunan kokoa napsauttamalla ikkunaa ja vetämällä sinisiä kahvoja jokaisessa kulmassa.

Luotu pääikkunan aloitusnäkymä.

Ensimmäisenä askeleena sovelluksen tekemisessä on lisätä ikkunaan joitain widgetejä. Ensimmäisissä sovelluksissamme opimme, että QMainWindow:n keskimmäisen widgetin asettamiseen on käytettävä .setCentralWidget(). Näimme myös, että useiden widgettien lisäämiseen asettelun kanssa tarvitsemme välissä olevan QWidget:n, johon sovellamme asettelua, sen sijaan, että lisäisimme asettelun suoraan ikkunaan.

Qt Creator huolehtii tästä puolestasi automaattisesti, vaikkei se olekaan erityisen ilmeinen siitä.

Lisätäksesi useita widgettejä pääikkunaan asettelun kanssa raahaa ensin widgetit QMainWindow:n päälle. Tässä raahaamme 3 tarraa. Sillä ei ole väliä, mihin ne pudotat.

Pääikkuna, johon on lisätty 1 tarra ja 1 painike.

Loimme 2 widgettiä raahaamalla ne ikkunaan, teimme niistä ikkunan lapsia. Voimme nyt soveltaa asettelua.

Etsitään QMainWindow oikeanpuoleisesta paneelista (sen pitäisi olla aivan yläreunassa). Sen alla näkyy centralwidget, joka edustaa ikkunan keskimmäistä widgettiä. Keskuswidgetin kuvake näyttää nykyisen sovelletun asettelun. Aluksi sen läpi on punainen ympyrän risti, joka osoittaa, että asettelua ei ole aktiivisena.

Klikkaa hiiren oikealla painikkeella QMainWindow-objektia ja etsi tuloksena olevasta pudotusvalikosta ’Layout’.

Klikkaa hiiren oikealla painikkeella pääikkunaa ja valitse layout.

Seuraavaksi saat näkyviin luettelon asetteluista, joita voit soveltaa ikkunaan. Valitse Lay Out Horizontally (Asettele vaakasuoraan), jolloin asettelua sovelletaan widgettiin.

Valitse asettelua sovellettavaksi pääikkunaan.

Valittua asettelua sovelletaan QMainWindow:n keskimmäiseenwidgettiin, ja widgetit lisätään asetteluun, jolloin ne asetellaan valitun asettelun mukaan. Huomaa, että Qt Creatorissa voit itse asiassa raahata ja järjestää widgetit uudelleen asettelun sisällä tai valita toisen asettelun haluamallasi tavalla. Tämä tekee siitä erityisen mukavan prototyyppien luomiseen ja asioiden kokeilemiseen.

Pystysuora asettelu sovellettuna pääikkunan widgetteihin.

Luotujen .ui-tiedostojen käyttäminen

Loimme hyvin yksinkertaisen käyttöliittymän. Seuraava askel on saada tämä Pythoniin ja käyttää sitä toimivan sovelluksen rakentamiseen.

Tallenna ensin .ui-tiedostosi – oletusarvoisesti se tallentuu paikkaan, jonka valitsit sitä luodessasi, vaikka voit halutessasi valita toisen paikan.

.ui-tiedosto on XML-muodossa. Käyttääksesi käyttöliittymäämme Pythonista käsin meillä on kaksi vaihtoehtoista menetelmää –

1. lataat sen luokkaan .loadUI()-menetelmällä
2. muunnat sen Pythoniksi pyuic5-työkalulla.

Näitä kahta lähestymistapaa käsitellään alla. Henkilökohtaisesti pidän parempana muuntaa käyttöliittymä Python-tiedostoksi, jotta asiat pysyvät samanlaisina ohjelmoinnin &pakkaamisen kannalta.

Lataaminen .ui-tiedostosta suoraan

Tiedostojen lataamiseen voimme käyttää PyQt5:n mukana tulevaa uic-moduulia, tarkemmin sanottuna uic.loadUI()metodia. Tämä ottaa UI-tiedoston tiedostonimen ja lataa sen luoden täysin toimivan PyQt5-olion.

PySide2:ssa voit käyttää QUiLoader-instanssia ja kutsua loader.load()-metodia saavuttaaksesi saman asian.

(Hyvin) yksinkertainen UI, joka on suunniteltu Qt Creatorilla

Koska uid.loadUI()-metodi kääntää instanssi-olion, et voi liittää siihen muokattua __init__() koodia. Voit kuitenkin hoitaa tämän mukautetulla asetusfunktiolla

Lataaksesi UI:n olemassa olevan widgetin (esim. QMainWindow) __init__-lohkosta voit käyttää uic.loadUI(filename, self) PyQt5:ssä.

PySide2:n lataaja ei tue tätä lähestymistapaa – toinen parametri on luotavan widgetin vanhempaa widgettiä varten. Tämä estää sinua lisäämästä mukautettua koodia widgetin alustukseen, mutta voit kiertää tämän erillisellä init-funktiolla.

Ui-tiedoston muuntaminen Pythoniksi

Tuoaksesi Python-tulostustiedoston suorita pyuic5 komentoriviltä välittäen .ui-tiedoston ja kohdetiedoston tulostusta varten -o-parametrilla. Seuraava tuottaa Python-tiedoston nimeltä MainWindow.py, joka sisältää luodun käyttöliittymämme.

pyuic5 mainwindow.ui -o MainWindow.py

Jos käytät PyQt4:ää, työkalu on nimeltään `pyuic4`, mutta on muuten täysin identtinen.

Voit avata tuloksena syntyvän MainWindow.py-tiedoston editorilla katsellaksesi sitä, vaikkakaan sinun ei kannata muokata tätä tiedostoa. Qt Creatorin käytön voima on siinä, että voit muokata, viritellä ja päivittää sovellustasi samalla kun kehität sitä. Kaikki tähän tiedostoon tehdyt muutokset menetetään, kun päivität sitä. Voit kuitenkin ohittaa ja muokata mitä tahansa haluamaasi, kun tuot ja käytät tiedostoa sovelluksissasi.

Tuloksena syntyvän Python-tiedoston tuonti toimii kuten minkä tahansa muun tiedoston. Voit tuoda luokkasi seuraavasti. pyuic5-työkalu liittää Ui_ Qt Creatorissa määritellyn objektin nimeen, ja haluat tuoda juuri tämän objektin.

from MainWindow import Ui_MainWindow

Luot sovelluksesi pääikkunan luodaksesi luokan normaaliin tapaan, mutta aliluokittaen sekä QMainWindow-luokasta että tuodusta Ui_MainWindow-luokasta. Lopuksi kutsu self.setupUi(self) __init__:n sisältä käynnistääksesi käyttöliittymän asennuksen.

Tämä tuottaa täsmälleen saman tuloksen kuin aiemmin.

(Hyvin) yksinkertainen käyttöliittymä, joka on suunniteltu Qt Creatorilla

Tässä se on. Ikkunasi on nyt täysin valmis. Koska .ui-tiedoston käyttö abstrahoi käyttöliittymäkohtaisen koodin, voit käyttää samaa kaavaa minkä tahansa suunnittelemasi käyttöliittymän lataamiseen.

Sovelluslogiikan lisääminen

Voit olla vuorovaikutuksessa Qt Creatorilla luotujen widgettien kanssa aivan kuten koodilla luotujen widgettien kanssa. Asioiden yksinkertaistamiseksi uic lisää kaikki lapsiwidgetit ikkunaobjektiin niiden Qt Creatorissa määritellyn id-nimen mukaan. Käsittelemme näiden kanssa työskentelyä seuraavassa osassa.