Ehhez a bemutatóhoz a Qt Creator telepítése szükséges – ingyenesen letölthető a Qt weboldaláról. Menj a https://www.qt.io/download oldalra, és töltsd le a Qt csomagot. A telepítés során választhatjuk, hogy csak a Creatort telepítjük-e.
Nyissuk meg a Qt Creatort, és megjelenik a főablak. A tervező a bal oldali fülön keresztül érhető el. Ennek aktiválásához azonban először el kell kezdenie egy .ui fájl létrehozását.
A Qt Creator felülete, bal oldalon a Design rész látható.
A .ui fájl létrehozásához menjen a File -> New File or Project… A megjelenő ablakban válasszuk ki a bal oldalon a Fájlok és osztályok menüpont alatt a Qt-t, majd a jobb oldalon a Qt Designer Form menüpontot. Észre fogja venni, hogy az ikonon “ui” van, ami mutatja, hogy milyen típusú fájlt hoz létre.
Új Qt .ui fájlt hoz létre.
A következő lépésben megkérdezik, hogy milyen típusú widgetet szeretne létrehozni. Ha egy alkalmazást indítunk, akkor a Main Window a megfelelő választás. Azonban létrehozhat .ui fájlokat párbeszédpanelekhez, űrlapokhoz és egyéni összetett widgetekhez is.
Válassza ki a létrehozandó widget típusát, a legtöbb alkalmazás esetében ez a Main Window lesz.
Ezután válasszon egy fájlnevet és mentési mappát a fájlnak. Mentsük a .ui fájlt ugyanazon a néven, mint a létrehozandó osztályt, csak azért, hogy a későbbi parancsok egyszerűbbek legyenek.
Válasszuk ki a fájl mentési nevét és mappáját.
Végül választhatjuk, hogy a fájlt hozzáadjuk-e a verziókezelő rendszerünkhöz, ha használunk ilyet. Ezt a lépést nyugodtan kihagyhatod – nem befolyásolja a felhasználói felületedet.
Előre választhatod, hogy a fájlt hozzáadod a verziókezelő rendszeredhez, például a Githez.
Főablakod kialakítása
A felhasználói felület tervezőjében megjelenik az újonnan létrehozott főablakod. Kezdetben nem sok mindent láthatunk, csak egy szürke munkaterületet, amely az ablakot ábrázolja, az ablak menüsorának kezdeteivel együtt.
A létrehozott főablak kezdeti nézete.
Az ablak méretét az ablakra kattintva és az egyes sarkokon lévő kék fogantyúk húzásával módosíthatjuk.
A létrehozott főablak kezdeti nézete.
Az alkalmazás létrehozásának első lépése, hogy néhány widgetet adunk az ablakhoz. Az első alkalmazásainkban megtanultuk, hogy a QMainWindow központi widget beállításához a .setCentralWidget()-t kell használnunk. Azt is láttuk, hogy ahhoz, hogy több widgetet adjunk hozzá egy elrendezéssel, szükségünk van egy köztes QWidget-ra, amelyre az elrendezést alkalmazzuk, ahelyett, hogy az elrendezést közvetlenül az ablakhoz adnánk hozzá.
AQt Creator automatikusan gondoskodik erről helyettünk, bár ez nem különösebben nyilvánvaló.
Hogy több widgetet adjunk hozzá a főablakhoz egy elrendezéssel, először húzzuk a widgeteket a QMainWindow-re. Itt most 3 címkét húzunk. Nem számít, hova húzzuk őket.
Főablak 1 címkével és 1 gomb hozzáadásával.
2 widgetet hoztunk létre az ablakra való ráhúzással, az ablak gyermekeivé tettük őket. Most alkalmazhatunk egy elrendezést.
Keresd meg a QMainWindow-t a jobb oldali panelen (pont a tetején kell lennie). Alatta az ablak központi widgetjét jelentő centralwidget látható. A központi widget ikonja mutatja az aktuálisan alkalmazott elrendezést. Kezdetben egy piros kör-kereszt van rajta, ami azt mutatja, hogy nincs aktív elrendezés.
Jobb klikk a QMainWindow objektumra, és a megjelenő legördülő listában keresse meg az ‘Elrendezés’-t.
Jobb klikk a főablakra, és válassza az elrendezést.
A következőkben megjelenik az elrendezések listája, amelyeket az ablakra alkalmazhat. Válassza a Vízszintesen elrendezni lehetőséget, és az elrendezés a widgetre kerül alkalmazásra.
A főablakra alkalmazandó elrendezés kiválasztása.
A kiválasztott elrendezés a QMainWindow központiwidgetjére kerül alkalmazásra, és a widgetek hozzáadódnak az elrendezéshez, a kiválasztott elrendezéstől függően elrendezve. Megjegyezzük, hogy a Qt Creatorban ténylegesen áthúzhatjuk és átrendezhetjük a widgeteket az elrendezésen belül, vagy tetszés szerint más elrendezést választhatunk. Ez különösen jól használható prototípusok készítéséhez és kipróbálásához.
Függőleges elrendezés a főablak widgetjeire alkalmazva.
A generált .ui fájl használata
Egy nagyon egyszerű felhasználói felületet hoztunk létre. A következő lépés az, hogy ezt bevisszük a Pythonba, és egy működő alkalmazást építünk belőle.
Először mentsük el a .ui fájlt – alapértelmezés szerint a létrehozásakor kiválasztott helyre fogja menteni, bár tetszés szerint más helyet is választhatunk.
A .ui fájl XML formátumú. Ahhoz, hogy a felhasználói felületünket Pythonból használjuk, két alternatív módszer áll rendelkezésünkre –
- betölthetjük egy osztályba a
.loadUI()módszerrel - konvertálhatjuk Pythonba a
pyuic5eszközzel.
Ezzel a két megközelítéssel foglalkozunk az alábbiakban. Személy szerint én jobban szeretem az UI-t Python fájlba konvertálni, hogy a dolgok hasonlóak maradjanak a programozás &csomagolás szempontjából.
A .ui fájl közvetlen betöltése
A .ui fájlok betöltéséhez használhatjuk a PyQt5-hez mellékelt uic modult, konkrétan a uic.loadUI()módszert. Ez fogadja egy UI fájl fájlnevét és betölti azt, létrehozva egy teljesen működőképes PyQt5 objektumot.
A PySide2 esetében használhatunk egy QUiLoader példányt és meghívhatjuk a loader.load() metódust, hogy ugyanezt elérjük.
A Qt Creatorban tervezett (nagyon) egyszerű UI
Mivel a uid.loadUI() metódus egy példány objektumot alakít át, nem csatolhatunk hozzá egyéni __init__() kódot. Ezt azonban kezelheted egy saját beállítási függvényen keresztül
Az UI betöltéséhez egy meglévő widget __init__ blokkjából (pl. egy QMainWindow) használhatod a uic.loadUI(filename, self) a PyQt5 esetében.
A PySide2 betöltője nem támogatja ezt a megközelítést – a második paraméter a létrehozott widget szülő widgetjére vonatkozik. Ez megakadályozza, hogy egyéni kódot adj hozzá a widget inicializálásához, de ezt egy külön init függvénnyel megkerülheted.
A .ui fájl Pythonra konvertálása
A Python kimeneti fájl létrehozásához futtasd a pyuic5 parancssorból, átadva a .ui fájlt és a kimenet célfájlját, egy -o paraméterrel. A következő egy MainWindow.py nevű Python fájlt generál, amely tartalmazza a létrehozott felhasználói felületünket.
pyuic5 mainwindow.ui -o MainWindow.pyHa PyQt4-et használunk, az eszköz neve `pyuic4`, de egyébként teljesen azonos.
A kapott MainWindow.py fájlt megnyithatjuk egy szerkesztőprogramban, hogy megnézzük, bár ezt a fájlt nem szabad szerkeszteni. A Qt Creator használatának ereje abban rejlik, hogy fejlesztés közben szerkesztheted, finomíthatod és frissítheted az alkalmazásodat. Az ebben a fájlban végzett bármilyen változtatás elveszik, amikor frissíti azt. Azonban felülbírálhat és módosíthat bármit, amit csak akar, amikor importálja és használja a fájlt az alkalmazásában.
A kapott Python fájl importálása ugyanúgy működik, mint bármely másé. Az osztályát a következőképpen importálhatja. A pyuic5 eszköz Ui_-t csatol a Qt Creatorban definiált objektum nevéhez, és ezt az objektumot akarod importálni.
from MainWindow import Ui_MainWindowAz alkalmazásod főablakának létrehozásához hozz létre egy osztályt a szokásos módon, de mind a QMainWindow, mind az importált Ui_MainWindow osztályodból alosztályozva. Végül hívd meg a self.setupUi(self)-t a __init__-ből, hogy elindítsd a felület beállítását.
Ez pontosan ugyanazt az eredményt adja, mint korábban.
A Qt Creatorban tervezett (nagyon) egyszerű felhasználói felület
Ez minden. Az ablakod most már teljesen be van állítva. Mivel a .ui fájl használata absztrahálja az UI-specifikus kódot, ugyanezt a mintát használhatja bármilyen általunk tervezett felület betöltéséhez.
Az alkalmazás logikájának hozzáadása
A Qt Creator segítségével létrehozott widgetekkel ugyanúgy interakcióba léphet, mint a kóddal létrehozottakkal. A dolgok egyszerűsítése érdekében uic az összes gyermek widgetet hozzáadja az ablakobjektumhoz a Qt Creatorban megadott id nevük alapján. A következő részben foglalkozunk azzal, hogyan lehet ezekkel dolgozni.