První kroky s Qt Designerem

Tento výukový program vyžaduje nainstalovaný Qt Creator – můžete si jej zdarma stáhnout z webových stránek Qt. Přejděte na https://www.qt.io/download a stáhněte si balíček Qt. Během instalace se můžete rozhodnout nainstalovat pouze Creator.

Otevřete Qt Creator a zobrazí se vám hlavní okno. Návrhář je dostupný prostřednictvím karty na levé straně. Abyste jej však mohli aktivovat, musíte nejprve začít vytvářet soubor .ui.

Rozhraní Qt Creatoru se zobrazenou částí Návrh vlevo.

Pro vytvoření souboru .ui přejděte na Soubor -> Nový soubor nebo projekt…. V okně, které se zobrazí, vyberte vlevo v části Soubory a třídy položku Qt a vpravo vyberte položku Qt Designer Form. Všimněte si, že na ikoně je „ui“, což ukazuje typ souboru, který vytváříte.

Vytvořte nový soubor Qt .ui.

V dalším kroku budete dotázáni, jaký typ widgetu chcete vytvořit. Pokud spouštíte aplikaci, pak je správnou volbou Main Window. Můžete však také vytvořit soubory .ui pro dialogová okna, formuláře a vlastní složené widgety.

Zvolte typ widgetu, který chcete vytvořit, pro většinu aplikací to bude Main Window.

Dále zvolte název souboru a složku pro uložení souboru. Uložte .uisoubor se stejným názvem jako třída, kterou budete vytvářet, jen abyste si zjednodušili následné příkazy.

Zvolte název a složku pro uložení vašeho souboru.

Nakonec můžete zvolit přidání souboru do systému správy verzí, pokud jej používáte. Tento krok klidně přeskočte – nemá vliv na uživatelské rozhraní.

Případně přidejte soubor do svého systému pro správu verzí, např. do systému Git.

Rozložení hlavního okna

V návrháři uživatelského rozhraní se vám zobrazí nově vytvořené hlavní okno. Na začátku toho není moc vidět, jen šedá pracovní plocha představující okno spolu s počátky panelu nabídek okna.

Počáteční pohled na vytvořené hlavní okno.

Velikost okna můžete změnit kliknutím na okno a přetažením modrých úchytů v každém rohu.

Počáteční pohled na vytvořené hlavní okno.

Prvním krokem při vytváření aplikace je přidání některých widgetů do okna. V našich prvních aplikacích jsme se naučili, že pro nastavení centrálního widgetu QMainWindow musíme použít .setCentralWidget(). Také jsme viděli, že pro přidání více widgetů s rozvržením potřebujeme prostředníka QWidget, na který rozvržení aplikujeme, místo abychom rozvržení přidávali přímo do okna.

Qt Creator se o to postará automaticky, i když to není nijak zvlášť zřejmé.

Chcete-li do hlavního okna přidat více widgetů s rozvržením, přetáhněte nejprve své widgety na QMainWindow. Zde přetáhneme 3 štítky. Nezáleží na tom, kam je přetáhnete.

Hlavní okno s přidanými 1 štítky a 1 tlačítkem.

Vytvořili jsme 2 widgety přetažením na okno, udělali jsme z nich děti tohoto okna. Nyní můžeme použít rozvržení.

Najděte QMainWindow v pravém panelu (měl by být úplně nahoře). Pod ním vidíte centralwidget představující centrální widget okna. Ikona centrálního widgetu zobrazuje aktuální použité rozložení. Zpočátku je přes ni červený kruh-křížek, který ukazuje, že není aktivní žádné rozvržení.

Klikněte pravým tlačítkem myši na objekt QMainWindow a ve vzniklém rozbalovacím seznamu najděte položku „Rozvržení“.

Klikněte pravým tlačítkem myši na hlavní okno a zvolte rozvržení.

Dále uvidíte seznam rozvržení, která můžete na okno použít. Vyberte možnost Rozložit vodorovně a rozvržení se použije na widget.

Zvolte rozvržení, které chcete použít na hlavní okno.

Vybrané rozvržení se použije na centrální widget QMainWindow a widgety se přidají rozvržení, přičemž se rozloží v závislosti na vybraném rozvržení. Všimněte si, že v nástroji Qt Creator můžete widgety v rámci rozložení skutečně přetahovat a měnit jejich pořadí nebo vybrat jiné rozložení, jak se vám zlíbí. To je obzvlášť příjemné pro prototypování a zkoušení věcí.

Vertikální rozložení použité na widgety v hlavním okně.

Použití vygenerovaného souboru .ui

Vytvořili jsme velmi jednoduché uživatelské rozhraní. Dalším krokem je dostat jej do jazyka Python a použít jej k sestavení funkční aplikace.

Nejprve uložte svůj soubor .ui – ve výchozím nastavení se uloží do umístění, které jste zvolili při jeho vytváření, ačkoli můžete zvolit jiné umístění, pokud chcete.

Soubor .ui je ve formátu XML. Pro použití našeho uživatelského rozhraní z jazyka Python máme k dispozici dvě alternativní metody –

1. nahrát do třídy pomocí metody .loadUI()
2. konvertovat do jazyka Python pomocí nástroje pyuic5.

Těmito dvěma přístupy se zabýváme níže. Osobně dávám přednost převodu uživatelského rozhraní do souboru v jazyce Python, abychom zachovali podobnost z hlediska programování &balení.

Načítání souboru .ui přímo

Pro načítání .ui souborů můžeme použít modul uic, který je součástí PyQt5, konkrétně metodu uic.loadUI(). Ta vezme název souboru s uživatelským rozhraním a načte jej, čímž vytvoří plně funkční objekt PyQt5.

Pro PySide2 můžete použít instanci QUiLoader a zavolat metodu loader.load(), čímž dosáhnete téhož.

(Velmi) jednoduché uživatelské rozhraní navržené v Qt Creatoru

Protože metoda uid.loadUI() promění objekt v instanci, nelze připojit vlastní kód __init__(). Můžete to však řešit pomocí vlastní nastavovací funkce

Pro načtení uživatelského rozhraní z bloku __init__ existujícího widgetu (např. QMainWindow) můžete použít uic.loadUI(filename, self) pro PyQt5.

Nahrávač PySide2 tento přístup nepodporuje – druhý parametr je určen pro rodičovský widget vytvářeného widgetu. To vám znemožňuje přidat do inicializace widgetu vlastní kód, ale můžete to obejít pomocí samostatné funkce init.

Konverze vašeho .ui souboru do Pythonu

Pro vygenerování výstupního souboru Pythonu spusťte pyuic5 z příkazového řádku a předejte .ui soubor a cílový soubor pro výstup s parametrem -o. Následující příkaz vygeneruje soubor Pythonu s názvem MainWindow.py, který obsahuje naše vytvořené uživatelské rozhraní.

pyuic5 mainwindow.ui -o MainWindow.py

Pokud používáte PyQt4, nástroj se jmenuje `pyuic4`, ale jinak je zcela totožný.

Výsledný soubor MainWindow.py můžete otevřít v editoru a podívat se na něj, ačkoli byste tento soubor neměli upravovat. Síla používání Qt Creatoru spočívá v možnosti upravovat, vylepšovat a aktualizovat aplikaci během vývoje. Veškeré změny provedené v tomto souboru budou při aktualizaci ztraceny. Můžete však přepsat a upravit cokoli, co se vám líbí, když soubor importujete a použijete ve svých aplikacích.

Import výsledného souboru Python funguje jako u jakéhokoli jiného. Třídu můžete importovat následujícím způsobem. Nástroj pyuic5 připojí Ui_ k názvu objektu definovaného v nástroji Qt Creator a právě tento objekt chcete importovat.

from MainWindow import Ui_MainWindow

Chcete-li vytvořit hlavní okno ve své aplikaci, vytvořte třídu jako obvykle, ale s podtřídou z QMainWindow i z vaší importované třídy Ui_MainWindow. Nakonec zavolejte self.setupUi(self) ze třídy __init__, abyste spustili nastavení rozhraní.

Tím dosáhnete přesně stejného výsledku jako předtím.

(Velmi) jednoduché uživatelské rozhraní navržené v Qt Creatoru

To je vše. Vaše okno je nyní plně nastaveno. Protože použití souboru .ui abstrahuje od kódu specifického pro uživatelské rozhraní, můžete stejný vzor použít k načtení libovolného rozhraní, které navrhnete.

Přidání aplikační logiky

S widgety vytvořenými pomocí Qt Creatoru můžete komunikovat stejně jako s widgety vytvořenými pomocí kódu. Pro zjednodušení uic přidá všechny podřízené widgety k objektu okna podle jejich id jména, jak je zadáno v Qt Creatoru. V příštím díle se budeme zabývat tím, jak s nimi pracovat.