Rozvržení grafických uživatelských rozhraní pomocí Qt Designeru

Při rozvržení grafických uživatelských rozhraní Qt může být poměrně složitý úkol umístit každý widget na správné místo ve formulářích. Naštěstí Qt nabízí sadu správců rozvržení, které proces umisťování widgetů zjednodušují a umožní vám snadno vytvořit jakýkoli druh rozvržení. Chcete-li widgety ve formuláři rozvrhnout, můžete vše vytvořit v kódu nebo můžete rozvržení vytvořit pomocí nástroje Qt Designer. V tomto výukovém kurzu se naučíte používat rozvržení Qt pomocí Qt Designeru k vytváření složitých grafických uživatelských rozhraní pro vaše aplikace.

Dále vytvoříme příklad dialogu s použitím několika widgetů s uceleným rozvržením, abychom si upevnili vaše znalosti a poskládali vše do plně funkčního dialogu tak, jak byste ho vytvořili v reálné aplikaci.

Používání rozvržení pomocí Qt Designeru

Qt Designer je nástroj Qt pro návrh a vytváření grafických uživatelských rozhraní (GUI) pro desktopové aplikace. Pomocí nástroje Qt Designer můžete vytvářet okna, dialogová okna a formuláře. Umožňuje přidávat různé druhy widgetů a vytvářet grafická uživatelská rozhraní pomocí formulářů na obrazovce a rozhraní založeného na přetahování.

Hlavní rozhraní programu Qt Designer vypadá následovně –

Qt Designer – hlavní rozhraní

Qt Designer má přehledné a uživatelsky přívětivé rozhraní, které umožňuje vytvářet libovolný druh grafického uživatelského rozhraní přetažením widgetu na prázdný formulář. Po umístění všech widgetů na formulář je třeba je umístit do souvislého rozvržení. Tím zajistíte, že se všechny vaše widgety při náhledu formuláře nebo při jeho použití v aplikaci správně zobrazí a změní svou velikost.

Správci rozvržení Qt jsou strukturované kontejnery, které automaticky uspořádají podřízené widgety a zajistí, aby dobře využily dostupný prostor. Umístění widgetů do správce rozvržení je automaticky rozvrhne podle definovaných pravidel. Jednou z nejužitečnějších funkcí Qt Designeru je možnost přetahovat hierarchie správců rozvržení a uspořádat tak widgety do přehledných a funkčních rozhraní.

V Qt Designeru můžete vytvářet objekty rozvržení použitím rozvržení na skupinu existujících widgetů. Ačkoli je možné rozvržení přetáhnout na formulář a poté do něj přetáhnout widgety, může to být poněkud krkolomné. Nejlepším postupem je místo toho přetáhnout na formulář všechny widgety a distanční prvky, které potřebujete, a poté vybrat související widgety a distanční prvky a použít na ně rozložení. Použijte následující kroky –

1. Přetáhněte widgety na formulář a snažte se je umístit poblíž jejich požadované pozice
2. Vyberte widgety, které mají být spravovány s daným rozložením, podržením klávesy Ctrl a kliknutím na ně
3. Použijte příslušné rozložení (horizontální, vertikální, mřížka nebo formulář) pomocí panelu nástrojů Qt Designer, hlavní nabídky, nebo kontextové nabídky formuláře

Předtím, než se pustíte do příkladu, podívejte se na možnosti související s rozvržením, které Qt Designer nabízí –

1. Použít možnosti rozvržení na hlavním panelu nástrojů
2. Použít možnosti rozvržení v hlavní nabídce
3. Použít možnosti rozvržení v kontextové nabídce formuláře

Nejpřístupnějším způsobem vytváření rozvržení je použití části rozvržení na hlavním panelu nástrojů Qt Designeru. Tato část vypadá následovně –

Qt Designer – panel nástrojů Rozložení

Zleva doprava najdete následující tlačítka –

• Rozložit horizontálně uspořádá vybrané widgety do horizontálního rozložení vedle sebe (kombinace kláves, Ctrl+1). Tato možnost používá standardní objekt QHBoxLayout
• Lay Out Vertically uspořádá vybrané widgety ve svislém rozložení jeden pod druhým (kombinace kláves, Ctrl+2). Tato možnost používá standardní objekt QVBoxLayout
• Rozložit horizontálně v rozdělovači uspořádá widgety horizontálně pomocí rozdělovače (kombinace kláves, Ctrl+3)
• Rozložit vertikálně v rozdělovači uspořádá widgety vertikálně pomocí rozdělovače (kombinace kláves, Ctrl+4)
• Rozložit v mřížce uspořádá widgety do mřížky podobné tabulce (řádky a sloupce). Ve výchozím nastavení zabírá každý widget jednu buňku mřížky, ale toto chování můžete upravit tak, aby widgety pokrývaly více buněk (kombinace kláves, Ctrl+5). Tato možnost používá standardní objekt QGridLayout
• Rozložení ve formuláři Rozložení uspořádá vybrané widgety do dvousloupcového rozložení. Levý sloupec je obvykle určen pro popisky požadující nějaké informace a pravý sloupec obsahuje widgety pro zadávání, úpravy nebo zobrazení těchto informací (kombinace kláves, Ctrl+6)
• Rozložení přerušit tento klíč umožňuje zabrzdit existující rozložení. Jakmile jsou widgety uspořádány v rozvržení, nelze s nimi samostatně pohybovat a měnit jejich velikost, protože jejich geometrie je řízena rozvržením. Chcete-li upravit jednotlivé widgety, musíte rozvržení přerušit a později jej znovu vytvořit (kombinace kláves Ctrl+0)
• Upravit velikost upraví velikost rozvržení tak, aby se do něj vešly obsažené widgety a aby každý z nich měl dostatek místa a byl viditelný (kombinace kláves Ctrl+J)

Tytéž možnosti související s rozvržením jsou dostupné také prostřednictvím hlavní nabídky aplikace Qt Designer v nabídce Form a prostřednictvím kontextové nabídky formuláře, takže si můžete vybrat tu, která vám více vyhovuje.

Teď už máme teorii za sebou, můžeme tato rozložení uvést do praxe. V několika následujících kapitolách budeme používat Qt Designer k rozvržení widgetů na našich formulářích a k vytváření pěkných a elegantních grafických uživatelských rozhraní pro vaše desktopové aplikace. Než však začneme experimentovat s různými správci rozvržení, které Qt nabízí, vytvoříme si nejprve vlastní widget pro vizualizaci rozvržení v průběhu tohoto kurzu.

Dokončený .ui si můžete stáhnout níže, pokud chcete tento krok přeskočit.

layout-labels.ui

Pokračujte a spusťte Qt Designer, poté proveďte následující kroky –

1. V dialogovém okně New Form na kartě templates/forms vyberte Widget. Tím vytvoříte nový prázdný formulář, na kterém budete pracovat.
2. Uložíte formulář jako layout-labels.ui.
3. Vyhledejte widget Label na kartě Widget Box a přetáhněte jej na formulář.
4. Přejděte na kartu Property Editor a nastavte vlastnost text na 0.
5. Otevřete dialogové okno Text Edit a nastavte barvu textu na bílou. Nastavte velikost písma na 20 bodů a text zarovnejte. Stisknutím tlačítka OK změny aplikujte.
6. Přejděte na Property Editor a zaškrtnutím políčka nastavte vlastnost autoFillBackground na True.
7. Vyhledejte vlastnost palette a otevřete dialogové okno Edit Palette. Pomocí možnosti Quick nastavte barvu na červenou.

Pokud se cítíte ztraceni, podívejte se na následující ukázku, abyste viděli kroky v akci –

V tomto příkladu vytvoříte nové okno na základě šablony Widget. Poté přidáte štítek, nastavíte jeho vlastnost text na 0 a barvu pozadí na červenou.

Pro dokončení tohoto příkladu zopakujte všechny kroky a přidejte další tři štítky s příslušnými texty nastavenými na 1, 2 a 3 a jejich barvami nastavenými na zelenou, žlutou a modrou. Nakonec získáte formulář, který bude vypadat takto:

Qt Designer – Formulář s barevnými štítky

Výše uvedený snímek obrazovky ukazuje počáteční formulář, který budete používat v několika následujících částech. Je to čistý formulář se čtyřmi objekty štítků. Každému štítku můžete nastavit barvu pozadí, abyste je v následujících částech lépe viděli a rozlišili.

Horizontální rozvržení, QHBoxLayout

K uspořádání widgetů do jedné řady můžete použít správce horizontálního rozvržení (QHBoxLayout). Chcete-li vytvořit tento druh rozložení v kódu, musíte instancovat třídu QHBoxLayout a poté přidat své widgety do objektu rozložení. V Qt Designeru je jednodušší pracovat opačným způsobem.

Při otevřeném souboru layout-labels.ui nejprve vyberte všechny popisky. To provedete tak, že postupně kliknete na jednotlivé widgety a zároveň podržíte klávesu Ctrl nebo také můžete widgety vybrat kliknutím a tažením ukazatele myši uvnitř formuláře.

Jakmile widgety vyberete, umístěte je do horizontálního rozložení výběrem tlačítka Lay Out Horizontally na hlavním panelu nástrojů Qt Designer. Můžete také použít možnost Lay out->Lay Out Horizontally z kontextové nabídky zobrazené níže nebo můžete stisknout klávesu Ctrl+1. Následující ukázka vás provede těmito kroky –

Pokud je rozvržení špatné, můžete vše snadno vrátit zpět a začít rozvrhovat věci znovu. Chcete-li vše vrátit zpět, můžete stisknout klávesu Ctrl+z nebo použít nabídku Edit z hlavního panelu Qt Designer. Pokud to není možné nebo to nefunguje, můžete prostě rozvržení přerušit pomocí tlačítka Break Layout z hlavního panelu nástrojů Qt Designeru. Dalším způsobem, jak rozložit rozvržení, je stisknout klávesu Ctrl+0 nebo zvolit Break Layout z kontextové nabídky formuláře.

Vertikální rozvržení, QVBoxLayout

K uspořádání widgetů v jednom sloupci nad sebou můžete použít vertikální rozvržení (QVBoxLayout). To může být velmi užitečné, když vytváříte skupiny widgetů a potřebujete zajistit, aby byly vertikálně zarovnané.

Začněte s původním souborem layout-labels.ui a prvním krokem bude výběr widgetů, které potřebujete zahrnout do vertikálního rozložení. Poté můžete kliknout na tlačítko Lay Out Vertically nad hlavním panelem nástrojů nebo můžete použít kontextovou nabídku, případně můžete také stisknout klávesu Ctrl+2. Následující ukázka vás provede těmito kroky –

Pokud se na ukázku podíváte pozorněji, pak uvidíte, že objekt rozvržení je označen tenkým červeným rámečkem obklopujícím popisky na formuláři. Tento červený rámeček není vidět při náhledu ani za běhu, je to jen vodítko, které můžete použít při návrhu formuláře. Všimněte si také, že se objekt rozvržení zobrazuje v Inspektoru objektů a jeho vlastnosti (okraje a omezení) jsou zobrazeny v Editoru vlastností.

Rozvržení mřížky, QGridLayout

Někdy potřebujete rozvrhnout své widgety jak horizontálně, tak vertikálně v rámci jednoho rozvržení. K tomu můžete použít správce rozvržení mřížky (QGridLayout). Správci rozvržení mřížky rozloží vaše widgety do čtvercové nebo obdélníkové mřížky, přičemž všechny widgety jsou vertikálně i horizontálně zarovnány se svými sousedy. Tento druh rozvržení vám může poskytnout mnohem větší volnost při uspořádání widgetů na formuláři a zároveň zachovat určitou míru struktury. Toto uspořádání může být vhodnější než vnořené uspořádání horizontálních a vertikálních rozvržení, zejména pokud vám záleží na zarovnání sousedních řádků nebo sloupců.

Rozložení mřížky můžete pomocí Qt Designeru vytvořit stejným způsobem jako u jiných rozvržení. Prvním krokem je výběr skupiny widgetů, které chcete rozvrhnout pomocí správce rozvržení mřížky. Poté můžete rozvržení nastavit pomocí panelu nástrojů, kontextové nabídky nebo stisknutím klávesy Ctrl+5. Podívejte se na následující ukázku –

V tomto případě použijeme rozložení mřížky 2 x 2 pro uspořádání štítků na formuláři. Všimněte si, že chcete-li použít tento druh rozvržení, měli byste nejprve umístit své widgety do řádků a sloupců na formuláři, jak je ukázáno ve výše uvedeném screenu. Qt Designer je poměrně chytrý a pokusí se zachovat návrh co nejpodobnější tomu, který jste původně vytvořili ručně. Dokonce dokáže automaticky vytvořit složité vícesloupcové uspořádání nebo automaticky vyplnit prázdné buňky.

Rozložení formuláře, QFormLayout

Když QGridLayout lze použít k rozložení formulářů se vstupy a popisky ve dvou sloupcích, Qt poskytuje také rozložení určené speciálně pro tento účel – (QFormLayout). Tento typ rozvržení je ideální, pokud vytváříte strukturovanou aplikaci pro zadávání dat nebo databázi. V levém sloupci budou běžně umístěny štítky, které se ptají na nějaké informace. V pravém sloupci jsou umístěny vstupní widgety, jako jsou řádkové editory (QLineEdit), otočné boxy (QSpinBox), editory data (QDateEdit), combo boxy (QComboBox) a podobně.

Výhodou použití tohoto rozložení oproti QGridLayout je jednodušší práce, pokud potřebujete pouze dva sloupce. Následující ukázka jej ukazuje v akci –

V tomto příkladu nejprve přidáme čtyři nové štítky. Tyto štítky budou obsahovat informace o údajích, které je třeba zadat nebo upravit ve druhém sloupci. V tomto případě druhý sloupec obsahuje vaše barevné štítky testů, ale obvykle bude tento sloupec sloužit k umístění vstupního widgetu, jako jsou úpravy řádků, otočná pole, kombinovaná pole a podobně.

Rozložení rozdělovače

Rozdělovače jsou kontejnerové objekty, které uspořádají widgety vodorovně nebo svisle do dvou panelů s možností změny velikosti. Díky tomuto druhu rozvržení můžete libovolně upravovat velikost prostoru, který jednotlivé panely na formuláři zabírají, přičemž celkový využitý prostor zůstává konstantní. V Qt jsou rozvržení spravována pomocí QSplitter.

Přestože rozdělovače jsou technicky vzato kontejnerovým widgetem (nikoli rozvržením), Qt Designer s nimi zachází jako s rozvržením, které lze použít na existující widgety. Chcete-li umístit skupinu widgetů do rozdělovače, nejprve je vyberete jako obvykle a poté použijete rozdělovač pomocí příslušného tlačítka na panelu nástrojů, klávesové zkratky nebo možnosti kontextové nabídky v Qt Designeru Podívejte se na následující ukázku –

V tomto příkladu nejprve použijeme horizontální rozdělovač na vaše štítky. Všimněte si, že pokud chcete vidět rozdělovač v akci, musíte spustit náhled formuláře. Náhled formuláře spustíte stisknutím klávesy Ctrl+R. Později na štítky aplikujeme vertikální rozdělovač. V každém případě můžete libovolně měnit velikost widgetu pomocí ukazatele myši.

Vytváření dalších rozvržení pomocí Qt Designeru

V Qt Designeru můžete s rozvrženími dělat ještě několik dalších věcí. Předpokládejme například, že potřebujete přidat nový widget do existujícího rozvržení nebo použít vnořená rozvržení k uspořádání widgetů ve složitém grafickém uživatelském rozhraní. V několika následujících částech se budeme zabývat tím, jak některé z těchto úkolů provést.

Vkládání objektů do existujícího rozvržení

Objekty lze do existujícího rozvržení vložit tak, že je přetáhnete z jejich aktuální pozice a upustíte je na požadované místo v rozvržení. Po přetažení objektu se v rozvržení zobrazí modrý kurzor, který ukazuje, kam bude objekt umístěn.

Podívejte se na následující ukázku, kde jsme umístili tři naše štítky do vertikálního rozložení a pak jsme si uvědomili, že jsme vynechali modrý štítek ze hry –

Je také možné přesunout nebo změnit pozici daného widgetu v rozložení. K tomu stačí widget přetáhnout na novou pozici v rozložení. Nezapomeňte sledovat modrou čáru, abyste to udělali správně.

Vnořování rozvržení pro vytváření složitých grafických uživatelských rozhraní

Pomocí Qt Designeru můžete také vnořovat správce rozvržení jednoho do druhého. Vnitřní rozvržení se pak stane potomkem obklopujícího rozvržení. Tímto způsobem můžete iterativně vytvářet velmi složitá, avšak dobře strukturovaná uživatelská rozhraní.

Rozložení lze vnořovat tak hluboko, jak potřebujete. Chcete-li například vytvořit dialogové okno s vodorovnou řadou tlačítek ve spodní části a několika dalšími widgety zarovnanými na formuláři svisle, můžete použít vodorovné rozložení pro tlačítka a svislé rozložení pro ostatní widgety a poté tato rozložení zabalit do svislého rozložení.

Vrátíme-li se k našemu příkladu s barevnými štítky, následující ukázka ukazuje postup uspořádání vnořeného rozvržení v Qt Designeru –

V tomto příkladu nejprve uspořádáme widgety ve dvojici pomocí horizontálního rozvržení. Poté obě tato rozložení vnoříme do třetího rozložení, tentokrát však vertikálního. Rozložení lze vnořovat do libovolné hloubky.

Při výběru podřízeného rozložení lze vybrat jeho nadřazené rozložení stisknutím klávesy Shift při kliknutí na něj. To umožňuje rychle vybrat konkrétní rozvržení v hierarchii, což by jinak bylo obtížné kvůli malému rámečku ohraničujícímu jednotlivé správce rozvržení.

Nastavení rozvržení nejvyšší úrovně nebo hlavního rozvržení

Závěrečným krokem, který je třeba provést při sestavování formuláře, je spojení všech rozvržení a widgetů do jednoho hlavního rozvržení nebo rozvržení nejvyšší úrovně. Toto rozvržení je na vrcholu hierarchie všech ostatních rozvržení a widgetů. Je důležité, abyste měli rozvržení, protože jinak widgety ve formuláři nebudou měnit velikost při změně velikosti okna.

Pro nastavení hlavního rozvržení stačí kliknout pravým tlačítkem myši kdekoli na formuláři, který neobsahuje widget nebo rozvržení. Pak můžete vybrat Lay Out Horizontally, nebo Lay Out Horizontally, nebo můžete také vybrat Lay Out in a Grid jako v následující ukázce –

V tomto příkladu použijeme postupně každé ze tří různých rozvržení jako naše hlavní rozvržení. Nejprve použijeme horizontální rozložení, poté rozložení přerušíme a použijeme vertikální rozložení. Nakonec nastavíme rozložení mřížky. Které rozvržení nejvyšší úrovně zvolíte pro své rozvržení nejvyšší úrovně, bude záviset na vašich konkrétních požadavcích na aplikaci.

Je důležité si uvědomit, že rozvržení nejvyšší úrovně nejsou v Inspektoru objektů viditelná jako samostatný objekt. Jeho vlastnosti se zobrazují pod vlastnostmi widgetů hlavního formuláře. Všimněte si také, že pokud váš formulář nemá rozvržení, pak se jeho ikona v Inspektoru objektů zobrazí s červeným kruhem. Dalším způsobem, jak zkontrolovat, zda jste správně nastavili hlavní rozvržení, je pokus o změnu velikosti formuláře, pokud je hlavní rozvržení zavedeno, pak by se velikost vašich widgetů měla odpovídajícím způsobem změnit.

Jakmile začnete vytvářet složitější aplikace, zjistíte, že i další kontejnerové widgety vyžadují nastavení rozvržení nejvyšší úrovně, například QGroupBox, QTabWidget, QToolBox atd. Chcete-li to provést, můžete provést stejné kroky, které jste viděli zde, ale tentokrát musíte kliknout pravým tlačítkem myši na kontejnerový widget.

Rozložení dialogu pomocí Qt Designeru

Pro poslední a úplnější příklad použití rozvržení pomocí Qt Designeru nyní vytvoříme dialog pro zavedení některých informací v databázové aplikaci. Předpokládejme, že pro naši společnost Poyqote Inc. vytváříme software pro řízení lidských zdrojů. Nyní pracujeme ve formuláři pro zavedení některých údajů o našich zaměstnancích. Dialog by měl uživatelům představit uživatelsky přívětivé grafické rozhraní pro zavedení následujících údajů:

• Jméno zaměstnance
• Datum nástupu do zaměstnání
• Oddělení
• Pozice
• Roční plat
• Popis práce

Jaký je nejlepší způsob rozvržení tohoto formuláře? Existuje mnoho možností a je to do značné míry otázka vkusu a praxe. Zde však používáme QFormLayout k uspořádání vstupních polí do dvou sloupců se štítky vlevo a vstupními poli vpravo. Postup vytváření rozvržení ukazuje následující ukázka –

Základní dialog je vytvořen pomocí šablony Dialog s tlačítky dole v Qt Designeru. Poté přidáme několik štítků a několik vstupních widgetů, včetně editace řádků, editace data, editace textu a kombinovaných polí. Dále všechny tyto widgety umístíme do rozvržení formuláře a nakonec definujeme horní úroveň nebo hlavní rozvržení formuláře.

Dokončený soubor dialogu .ui si můžete stáhnout zde.

Závěr

Qt Designer je mocný nástroj, pokud jde o vytváření grafických uživatelských rozhraní pomocí Qt. Jednou z jeho nejjednodušších a nejužitečnějších funkcí je možnost uspořádat widgety do různých typů rozvržení. Naučit se efektivně vytvářet rozvržení pomocí Qt Designeru může raketově zvýšit vaši produktivitu, zejména při vytváření složitých grafických uživatelských rozhraní.

Tento výukový kurz vás provede procesem vytváření vlastních rozvržení pomocí Qt Designeru. Nyní víte, jak při rozvržení grafických uživatelských rozhraní Qt Designeru vytěžit maximum.