A Qt GUI-k elrendezésekor elég trükkös feladat lehet minden widgetet a megfelelő pozícióba helyezni az űrlapokon. Szerencsére a Qt egy sor elrendezéskezelőt kínál, amelyek leegyszerűsítik a widgetek elhelyezésének folyamatát, és lehetővé teszik bármilyen elrendezés egyszerű létrehozását. A widgetek elhelyezéséhez egy űrlapon mindent létrehozhat kódban, vagy létrehozhatja az elrendezést a Qt Designerrel. Ebben a bemutatóban megtanulod, hogyan használhatod a Qt elrendezéseit a Qt Designerrel, hogy összetett grafikus felületeket hozz létre az alkalmazásaidhoz.
Emellett létrehozunk egy párbeszédpéldát több widget felhasználásával, összefüggő elrendezéssel, hogy megerősítsük a tudásodat, és mindent összerakjunk egy teljesen működőképes párbeszédpanelbe, ahogyan azt egy valós alkalmazásban is létrehoznád.
A layoutok használata a Qt Designerrel
A Qt Designer a Qt eszköze az asztali alkalmazások grafikus felhasználói felületeinek (GUI) tervezésére és létrehozására. A Qt Designer segítségével ablakokat, párbeszédpaneleket és űrlapokat hozhat létre. Lehetővé teszi különböző widgetek hozzáadását a GUI-k létrehozásához a képernyőn megjelenő űrlapok és a drag-and-drop alapú felület segítségével.
AQt Designer fő felülete a következőképpen néz ki –
Qt Designer – Fő felület
AQt Designer áttekinthető és felhasználóbarát felülettel rendelkezik, amely lehetővé teszi bármilyen GUI létrehozását a widgetek üres űrlapra történő húzásával. Miután az összes widgetet elhelyezte az űrlapon, koherens elrendezésben kell elhelyeznie őket. Ez biztosítja, hogy az összes widgeted megfelelően jelenjen meg és méretezzen át, amikor az űrlapot előnézetben vagy egy alkalmazásban használod.
AQt elrendezéskezelői strukturált konténerek, amelyek automatikusan elrendezik a gyermek widgeteket, biztosítva, hogy azok jól használják ki a rendelkezésre álló helyet. A widgetek elhelyezése egy elrendezéskezelőn belül automatikusan elrendezi őket a meghatározott szabályok szerint. A Qt Designer egyik leghasznosabb funkciója az elrendezéskezelők hierarchiáinak húzása, hogy a widgeteket tiszta és funkcionális felületekre rendezzük.
A Qt Designerben elrendezési objektumokat hozhatunk létre úgy, hogy elrendezést alkalmazunk meglévő widgetek egy csoportjára. Bár lehetséges elrendezéseket egy űrlapra húzni, majd widgeteket húzni az elrendezésekbe, ez kissé körülményes lehet. A legjobb gyakorlat az, ha ehelyett az összes szükséges widgetet és távtartót ráhúzza az űrlapra, majd kiválasztja a kapcsolódó widgeteket és távtartókat, és alkalmazza rájuk az elrendezéseket. Használjuk a következő lépéseket –
- Húzzuk a widgeteket az űrlapra, és próbáljuk őket a kívánt pozíciójuk közelében elhelyezni
- Kiválasztjuk azokat a widgeteket, amelyeket egy adott elrendezéssel kell kezelni, a
Ctrlbillentyű nyomva tartásával és a rájuk kattintással - Alkalmazzuk a megfelelő elrendezést (vízszintes, függőleges, rács vagy űrlap) a Qt Designer eszköztárának főmenüjével, vagy az űrlap kontextusmenüjét
Mielőtt belemennénk egy példába, vessünk egy pillantást a Qt Designer által kínált elrendezéssel kapcsolatos lehetőségekre –
- A fő eszköztáron lévő elrendezési lehetőségek használata
- A főmenüben lévő elrendezési lehetőségek használata
- A form kontextusmenüjében lévő elrendezési lehetőségek használata
A legkönnyebben elérhető módja az elrendezések létrehozásának a Qt Designer fő eszköztárának elrendezési szakasza. Ez a rész a következőképpen néz ki –
Qt Designer – Layout eszköztár
Balról jobbra haladva a következő gombokat találjuk –
- Lay Out Horizontally a kiválasztott widgeteket vízszintes elrendezésben egymás mellé rendezi (billentyűkombináció,
Ctrl+1). Ez az opció egy szabványosQHBoxLayoutobjektumot használ - Függőlegesen elrendezni a kiválasztott widgeteket függőleges elrendezésben, egymás alatt (billentyűkombináció,
Ctrl+2). Ez az opció egy szabványosQVBoxLayoutobjektumot használ - Lay Out Horizontally in Splitter vízszintesen elrendezi a widgeteket egy osztó segítségével (kulcskombináció,
Ctrl+3) - Lay Out Vertically in Splitter függőlegesen elrendezi a widgeteket egy osztó segítségével (kulcskombináció,
Ctrl+4) - Lay Out in a Grid táblázatszerű rácsba (sorok és oszlopok) rendezi a widgeteket. Alapértelmezés szerint minden widget a rács egy celláját foglalja el, de módosíthatja ezt a viselkedést, és elérheti, hogy a widgetek több cellára is kiterjedjenek (Kulcskombináció,
Ctrl+5). Ez az opció egy szabványosQGridLayoutobjektumot használ - Lay Out in a Form Layout a kiválasztott widgeteket két oszlopos elrendezésben rendezi el. A bal oldali oszlop általában valamilyen információt kérő címkéket tartalmaz, a jobb oldali oszlop pedig az információ bevitelére, szerkesztésére vagy megjelenítésére szolgáló widgeteket (Kulcskombináció,
Ctrl+6) - Elrendezés megszakítása ez a kulcs lehetővé teszi egy meglévő elrendezés megszakítását. Miután a widgetek elrendezésre kerültek egy elrendezésben, nem lehet őket külön-külön mozgatni és átméretezni, mivel geometriájukat az elrendezés szabályozza. Az egyes widgetek módosításához meg kell törni az elrendezést, és később újra meg kell csinálni (
Ctrl+0billentyűkombináció) - Adjust Size (Méret beállítása) Az elrendezés méretének beállítása a benne lévő widgetek elhelyezéséhez és ahhoz, hogy mindegyiknek elegendő helye legyen a láthatósághoz (
Ctrl+Jbillentyűkombináció)
Ugyanezek az elrendezéssel kapcsolatos beállítások a Qt Designer főmenüjében a Form menüben és az űrlap kontextusmenüjében is elérhetők, így kiválaszthatja azt, amelyik jobban tetszik.
Most, hogy az elméleten túl vagyunk, ezeket az elrendezéseket a gyakorlatba is átültethetjük. A következő fejezetekben a Qt Designer segítségével fogjuk elrendezni a widgeteket az űrlapjainkon, és szép és elegáns GUI-kat fogunk készíteni az asztali alkalmazásainkhoz. Mielőtt azonban elkezdenénk kísérletezni a Qt által kínált különböző elrendezéskezelőkkel, először is létrehozunk egy egyéni widgetet az elrendezések megjelenítéséhez, miközben végigmegyünk ezen az oktatóprogramon.
A kész .ui fájl alább letölthető, ha ezt a lépést át szeretné ugrani.
layout-labels.ui
Elindítjuk a Qt Designert, majd a következő lépéseket hajtjuk végre –
- Válasszuk ki a
Widget-et aNew Formpárbeszédpaneltemplates/formslapján. Ez létrehoz egy új üres űrlapot, amin dolgozhatunk. - Mentsük el az űrlapot
layout-labels.uinéven. - Keresünk egy Label widgetet a
Widget Box-en, és húzzuk rá az űrlapra. - Menjünk a
Property Editor-re, és állítsuk atexttulajdonságot0-ra. - Nyissuk meg a
Text Editpárbeszédpanelt, és állítsuk a szöveg színét fehérre. Állítsa be a betűméretet20pontra, és igazítsa ki a szöveget. Nyomja meg aOKbillentyűt a módosítások alkalmazásához. - Menjen a
Property Editorpárbeszédpanelre, és aautoFillBackgroundtulajdonságot állítsaTrueértékre a jelölőnégyzet bejelölésével. - Keresze meg a
palettetulajdonságot, és nyissa meg aEdit Palettepárbeszédpanelt. AQuicklehetőséggel állítsa a színt pirosra.
Ha elveszettnek érzi magát, nézze meg a következő képernyőképet, hogy lássa a lépéseket működés közben –
Ebben a példában egy új ablakot hoz létre a Widget sablon alapján. Ezután hozzáad egy Címkét, beállítja a text tulajdonságát 0-ra, és a háttérszínét pirosra állítja.
A példa befejezéséhez ismételje meg az összes lépést további három címke hozzáadásához, amelyek szövegét 1, 2 és 3 értékre, színét pedig zöldre, sárgára és kékre állítja. A végeredmény egy ilyen űrlap lesz:
Qt Designer – Form with colored labels
A fenti képernyőképen látható a kezdeti űrlap, amelyet a következő szakaszokban fog használni. Ez egy tiszta űrlap négy címkeobjektummal rajta. Minden címkének beállíthat egy háttérszínt, hogy a következő szakaszokban könnyebben láthassa és megkülönböztethesse őket.
Horizontális elrendezések, QHBoxLayout
A widgetek egy sorba rendezéséhez egy vízszintes elrendezéskezelőt (QHBoxLayout) használhat. Egy ilyen elrendezés kódban történő létrehozásához a QHBoxLayout osztályt kell példányosítani, majd hozzáadni a widgeteket a layout objektumhoz. A Qt Designerben egyszerűbb fordítva dolgozni.
Az layout-labels.ui fájl megnyitása után először jelöljük ki az összes címkét. Ehhez kattinthatsz az egyes widgetekre sorban, miközben nyomva tartod a Ctrl billentyűt, vagy az űrlapon belül az egérmutatóval kattintva és húzva is kijelölheted a widgeteket.
Amint kijelölte a widgeteket, helyezze őket vízszintes elrendezésbe a Qt Designer fő eszköztárában található Lay Out Horizontally gomb kiválasztásával. Használhatja az alább látható kontextusmenü Lay out->Lay Out Horizontally opcióját is, vagy megnyomhatja a Ctrl+1 billentyűt. A következő képernyőkép végigvezeti Önt ezeken a lépéseken –
Ha az elrendezés rossz, akkor könnyen visszavonhat mindent, és újra kezdheti a dolgok újbóli elrendezését. A dolgok visszavonásához megnyomhatja a Ctrl+z gombot, vagy használhatja a Edit menüt a Qt Designer fő menüsorában. Ha ez nem lehetséges vagy nem működik, akkor egyszerűen megszakíthatja az elrendezést a Qt Designer fő eszköztárának Break Layout gombjával. Az elrendezés megtörésének másik módja a Ctrl+0 gomb megnyomása vagy az űrlap kontextusmenüjéből a Break Layout kiválasztása.
Vertikális elrendezések, QVBoxLayout
Függőleges elrendezéssel (QVBoxLayout) elrendezhetjük a widgeteket egy oszlopban egymás fölé. Ez nagyon hasznos lehet, amikor widgetcsoportokat hoz létre, és biztosítania kell, hogy azok függőlegesen igazodjanak egymáshoz.
Az eredeti layout-labels.ui fájlból kiindulva az első lépés az lesz, hogy kiválasztja azokat a widgeteket, amelyeket a függőleges elrendezésbe kell foglalnia. Ezt követően a fő eszköztár fölötti Lay Out Vertically gombra kattintva, vagy a kontextusmenü segítségével, de akár a Ctrl+2 billentyűt is megnyomhatja. A következő képernyőkép végigvezeti Önt ezeken a lépéseken –
Ha jobban megnézi a képernyőképet, akkor láthatja, hogy az elrendezési objektumot egy vékony piros keret jelzi az űrlapon lévő címkék körül. Ez a piros keret nem látható előnézetben vagy futási időben, ez csak egy útmutató, amelyet az űrlap tervezésekor használhat. Azt is észrevehetjük, hogy az elrendezési objektum megjelenik az Object Inspectorban, tulajdonságai (margók és korlátok) pedig a Property Editorban.
Grid Layouts, QGridLayout
Néha szükség van arra, hogy a widgeteket vízszintesen és függőlegesen is elrendezze ugyanazon az elrendezésen belül. Ehhez használhatunk egy rácsos elrendezéskezelőt (QGridLayout). A rácsos elrendezéskezelők négyzet vagy téglalap alakú rácsban helyezik el a widgeteket, és minden widget függőlegesen és vízszintesen igazodik a szomszédjaihoz. Ez a fajta elrendezés sokkal nagyobb szabadságot ad a widgetek elrendezésében egy űrlapon, miközben bizonyos fokú struktúrát is fenntart. Ez az elrendezés alkalmasabb lehet, mint a vízszintes és függőleges elrendezések egymásba ágyazott elrendezése, különösen akkor, ha fontos a szomszédos sorok vagy oszlopok igazítása.
A Qt Designerrel ugyanúgy készíthet rácsos elrendezést, mint más elrendezéseknél. Első lépésként ki kell választani a widgetek azon csoportját, amelyet a rácsos elrendezéskezelő segítségével szeretnénk elrendezni. Ezután az eszköztár, a kontextusmenü vagy a Ctrl+5 billentyű lenyomásával állíthatja be az elrendezést. Nézze meg a következő képernyőképet –
Ebben az esetben 2 x 2 rácsos elrendezést használunk a címkék elrendezéséhez az űrlapon. Vegye figyelembe, hogy az ilyen elrendezés használatához először sorokba és oszlopokba kell elhelyeznie a widgeteket az űrlapon, ahogy a fenti screencastban látható. A Qt Designer elég okos, és igyekszik a lehető legjobban hasonlítani a kialakításodat ahhoz, amit eredetileg kézzel készítettél. Még a bonyolult, több oszlopos elrendezéseket is képes automatikusan létrehozni, vagy automatikusan kitölteni az üres cellákat.
Űrlapok elrendezése, QFormLayout
Míg a QGridLayout használható a két oszlopban lévő bemeneteket és címkéket tartalmazó űrlapok elrendezésére, a Qt egy kifejezetten erre a célra tervezett elrendezést is biztosít – (QFormLayout). Ez a fajta elrendezés ideális, ha strukturált adatbeviteli vagy adatbázis-alkalmazást készítünk. A bal oldali oszlop általában olyan címkéket tartalmaz, amelyek valamilyen információt kérnek. A jobb oldali oszlop tartalmazza a beviteli widgeteket, például a sorszerkesztőket (QLineEdit), pörgős dobozokat (QSpinBox), dátumszerkesztőket (QDateEdit), kombinált dobozokat (QComboBox) és így tovább.
A QGridLayouttal szemben ennek az elrendezésnek az az előnye, hogy egyszerűbb vele dolgozni, ha csak két oszlopra van szükség. A következő screencast mutatja be működés közben –
Ebben a példában először négy új címkét adunk hozzá. Ezek a címkék tartalmazzák majd a második oszlopba beírandó vagy szerkesztendő adatokra vonatkozó információkat. Ebben az esetben a második oszlop tartalmazza a tesztek színes címkéit, de általában ezt az oszlopot olyan beviteli widgetek elhelyezésére használjuk, mint a sorszerkesztők, pörgős dobozok, kombinált dobozok és így tovább.
Splitter elrendezések
A splitterek olyan konténerobjektumok, amelyek a widgeteket vízszintesen vagy függőlegesen két átméretezhető panelben rendezik el. Ezzel a fajta elrendezéssel szabadon beállíthatja, hogy az egyes panelek mekkora helyet foglaljanak el az űrlapon, miközben a teljes felhasznált hely állandó marad. A Qt-ben az osztott elrendezéseket a QSplitter segítségével kezeljük.
Noha az osztók technikailag konténer widgetek (nem elrendezések), a Qt Designer elrendezésekként kezeli őket, amelyeket meglévő widgetekre lehet alkalmazni. Ahhoz, hogy widgetek egy csoportját osztóba helyezzük, először általában kijelöljük őket, majd az osztót a Qt Designer megfelelő eszköztárgombjának, billentyűparancsának vagy a kontextusmenü opciójának használatával alkalmazzuk az osztót Nézzük meg a következő screencastot –
Ebben a példában először egy vízszintes osztót alkalmazunk a címkékre. Vegye észre, hogy, el kell indítania az űrlap előnézetét, ha látni szeretné az osztót működés közben. Az űrlap előnézetét a Ctrl+R megnyomásával indíthatja el. Később egy függőleges osztót alkalmazunk a címkékre. Minden esetben szabadon átméretezheti a widgetet az egér mutatójával.
Más elrendezések készítése a Qt Designerrel
A Qt Designerben még néhány dolgot tehetünk az elrendezésekkel. Tegyük fel például, hogy új widgetet kell hozzáadni egy meglévő elrendezéshez, vagy egymásba ágyazott elrendezéseket kell használni a widgetek elrendezéséhez egy összetett GUI-ban. A következő néhány szakaszban bemutatjuk, hogyan lehet néhány ilyen feladatot elvégezni.
Objektek beillesztése egy meglévő elrendezésbe
Az objektumok beilleszthetők egy meglévő elrendezésbe úgy, hogy az aktuális pozíciójukról áthúzzuk őket, és az elrendezésben a kívánt pozícióba helyezzük őket. Az objektum áthúzásakor egy kék kurzor jelenik meg az elrendezésben, amely jelzi, hogy az objektum hová kerül.
Nézzük meg a következő screencastot, ahol három címkénket helyeztük el egy függőleges elrendezésben, majd rájövünk, hogy a kék címkét kihagytuk a játékból –
Az is lehetséges, hogy egy adott widget pozícióját áthelyezzük vagy megváltoztassuk egy elrendezésben. Ehhez csak húzzuk a widgetet az új pozíciójába az elrendezésben. Ne feledje, hogy kövesse a kék vonalat, hogy ezt jól csinálja.
Layoutok egymásba fészkelése összetett GUI-k építéséhez
A Qt Designer segítségével az elrendezéskezelőket is egymásba fészkelheti. A belső elrendezés ilyenkor a burkoló elrendezés gyermeke lesz. Ezzel iteratív módon nagyon összetett, mégis jól strukturált felhasználói felületeket hozhat létre.
A layoutokat olyan mélyen lehet egymásba fészkelni, amilyen mélyen csak szükséges. Például egy olyan párbeszédpanel létrehozásához, amelynek alján egy vízszintes gombsor és egy csomó más widget van függőlegesen elrendezve az űrlapon, használhat egy vízszintes elrendezést a gombokhoz és egy függőleges elrendezést a többi widgethez, majd ezeket az elrendezéseket egy függőleges elrendezésbe csomagolhatja.
A színes címkék példánkhoz visszatérve, a következő screencast bemutatja az egymásba ágyazott elrendezés folyamatát a Qt Designerben –
Ebben a példában először vízszintes elrendezéssel párban rendezzük el a widgeteket. Ezután mindkét elrendezést egy harmadik, de ezúttal függőleges elrendezésbe fészkeljük be. Az elrendezések tetszőleges mélységben egymásba ágyazhatók.
A gyermek elrendezés kiválasztásakor a Shift billentyű lenyomásával, miközben rákattintunk, a szülő elrendezést is kiválaszthatjuk. Ez lehetővé teszi egy adott elrendezés gyors kiválasztását a hierarchiában, amit egyébként nehéz lenne megtenni az egyes elrendezéskezelőket határoló kis keret miatt.
Felső szintű vagy fő elrendezés beállítása
Az utolsó lépés, amit egy űrlap létrehozásakor el kell végezni, az összes elrendezés és widget egyetlen fő vagy legfelső szintű elrendezésbe történő egyesítése. Ez az elrendezés áll az összes többi elrendezés és widget hierarchiájának tetején. Létfontosságú, hogy legyen egy elrendezés, mert különben az űrlapon lévő widgetek nem fognak átméreteződni, amikor átméretezi az ablakot.
A fő elrendezés beállításához egyszerűen kattintson a jobb gombbal bárhol az űrlapon, ahol nincs widget vagy elrendezés. Ezután kiválaszthatja a Lay Out Horizontally, vagy a Lay Out Horizontally, vagy a Lay Out in a Grid opciót is, mint az alábbi képernyőképen –
Ebben a példában a három különböző elrendezés mindegyikét felváltva használjuk legfelső szintű elrendezésként. Először egy vízszintes elrendezést használunk, majd megszakítjuk az elrendezést, és egy függőleges elrendezést használunk. Végül egy rácsos elrendezést állítunk be. Az, hogy melyik legfelső szintű elrendezést választja a legfelső szintű elrendezéshez, az alkalmazással szemben támasztott egyedi követelményektől függ.
Fontos megjegyezni, hogy a legfelső szintű elrendezések nem láthatók különálló objektumként az Objektumellenőrben. Tulajdonságai a fő űrlap widget-tulajdonságai alatt jelennek meg. Azt is vegye figyelembe, hogy ha az űrlapja nem rendelkezik elrendezéssel, akkor annak ikonja piros körrel jelenik meg az Object Inspectorban. Egy másik módja annak, hogy ellenőrizzük, hogy megfelelően állítottuk-e be a fő elrendezést, ha megpróbáljuk átméretezni az űrlapot, ha van fő elrendezés, akkor a widgeteknek ennek megfelelően kell átméretezniük.
Amint elkezdünk összetettebb alkalmazásokat készíteni, felfedezzük, hogy más konténer widgetek is igénylik a legfelső szintű elrendezés beállítását, például a QGroupBox, QTabWidget, QToolBox és így tovább. Ehhez ugyanazokat a lépéseket futtathatjuk, mint amiket itt láttunk, de ezúttal a jobb gombbal kell kattintanunk a konténer widgetre.
Párbeszéd elrendezése a Qt Designerrel
Egy utolsó és teljesebb példa a Qt Designerrel való elrendezések használatára, most egy párbeszédpanelt fogunk létrehozni néhány információ bemutatására egy adatbázis-alkalmazásban. Tegyük fel, hogy a Poyqote Inc. cégünk számára egy humánerőforrás-kezelő szoftvert készítünk. Most egy űrlapon dolgozunk, hogy bemutassunk néhány adatot az alkalmazottainkról. A párbeszédablaknak egy felhasználóbarát felhasználói felületet kell bemutatnia a felhasználóknak a következő adatok bevezetéséhez:
- Munkavállaló neve
- Munkavállalás dátuma
- Tartomány
- Tisztség
- Éves fizetés
- Munkakör leírása
Mi a legjobb módja az űrlap kialakításának? Számos lehetőség van, és ez nagyrészt ízlés és gyakorlat kérdése. Itt azonban egy QFormLayout-t használunk, hogy a beviteli mezőket két oszlopba rendezzük, bal oldalon címkékkel, jobb oldalon pedig beviteli mezőkkel. Az elrendezés létrehozásának folyamata a következő screencastban látható –
Az alap párbeszédpanel a Qt Designer Dialog with Buttons Bottom sablonjával készült. Ezután hozzáadunk néhány címkét és néhány beviteli widgetet, beleértve a sorszerkesztést, a dátumszerkesztést, a szövegszerkesztést és a kombinált dobozokat. Ezután ezeket a widgeteket egy űrlap elrendezésbe helyezzük, és végül meghatározzuk az űrlap felső szintű vagy fő elrendezését.
A kész párbeszéd .ui fájl letölthető innen.
Következtetés
A Qt Designer egy hatékony eszköz, amikor a Qt segítségével grafikus felületeket készítünk. Az egyik legegyszerűbb és leghasznosabb funkciója az, hogy a widgeteket különböző típusú elrendezésekbe rendezhetjük. Ha megtanuljuk, hogyan hozzunk létre hatékonyan elrendezéseket a Qt Designerrel, az egekbe szökhet a termelékenységünk, különösen összetett GUI-k készítésekor.
Ez a bemutató végigvezet minket az egyéni elrendezések létrehozásának folyamatán a Qt Designerrel. Most már tudja, hogyan hozhatja ki a legtöbbet a Qt Designerből a GUI-k elrendezésekor.