Pierwsze kroki z Qt Designer

Ten samouczek wymaga zainstalowania Qt Creator – można go pobrać za darmo ze strony internetowej Qt. Przejdź do https://www.qt.io/download i pobierz pakiet Qt. Możesz zdecydować się na zainstalowanie tylko Creatora podczas instalacji.

Otwórz Qt Creator i zobaczysz główne okno. Projektant jest dostępny poprzez zakładkę po lewej stronie. Jednak aby go aktywować, należy najpierw rozpocząć tworzenie pliku .ui.

Interfejs Qt Creator, z sekcją Design pokazaną po lewej stronie.

Aby utworzyć plik .ui przejdź do File -> New File or Project…. W oknie, które się pojawi wybierz Qt w sekcji Files and Classes po lewej stronie, a następnie wybierz Qt Designer Form po prawej. Zauważysz, że ikona ma na sobie „ui”, pokazując typ pliku, który tworzysz.

Twórz nowy plik Qt .ui.

W następnym kroku zostaniesz zapytany, jaki typ widżetu chcesz utworzyć. Jeśli uruchamiasz aplikację, wtedy Main Window jest właściwym wyborem. Można jednak również tworzyć pliki .ui dla okien dialogowych, formularzy i niestandardowych widżetów złożonych.

Wybierz typ widżetu do utworzenia, dla większości aplikacji będzie to Okno główne.

Następnie wybierz nazwę pliku i folder zapisu dla swojego pliku. Zapisz swój plik .ui o tej samej nazwie, co klasa, którą będziesz tworzyć, aby ułatwić sobie wykonywanie kolejnych poleceń.

Wybierz nazwę pliku i folder, w którym ma być zapisany.

Na koniec możesz wybrać, czy chcesz dodać plik do systemu kontroli wersji, jeśli go używasz. Możesz pominąć ten krok – nie ma on wpływu na interfejs użytkownika.

Opcjonalnie dodaj plik do systemu kontroli wersji, np. Git.

Układanie okna głównego

W projektancie interfejsu użytkownika zostanie wyświetlone nowo utworzone okno główne. Na początku nie ma wiele do zobaczenia, tylko szary obszar roboczy reprezentujący okno, wraz z początkami paska menu okna.

Początkowy widok utworzonego okna głównego.

Możesz zmienić rozmiar okna, klikając je i przeciągając niebieskie uchwyty w każdym rogu.

Początkowy widok utworzonego okna głównego.

Pierwszym krokiem w budowaniu aplikacji jest dodanie kilku widżetów do okna. W naszych pierwszych aplikacjach dowiedzieliśmy się, że aby ustawić centralny widżet dla okna QMainWindow musimy użyć .setCentralWidget(). Widzieliśmy również, że aby dodać wiele widżetów z układem, potrzebujemy pośredniego QWidget, do którego zastosujemy układ, zamiast dodawać układ bezpośrednio do okna.

Qt Creator zajmuje się tym automatycznie, chociaż nie jest to szczególnie oczywiste.

Aby dodać wiele widżetów do głównego okna z układem, najpierw przeciągnij widżety na QMainWindow. Tutaj przeciągamy 3 etykiety. Nie ma znaczenia, gdzie je upuścisz.

Okno główne z dodanymi 1 etykietami i 1 przyciskiem.

Utworzyliśmy 2 widżety, przeciągając je na okno, i uczyniliśmy je dziećmi tego okna. Teraz możemy zastosować układ.

Znajdź QMainWindow w prawym panelu (powinien być na samej górze). Pod spodem widzisz centralwidget reprezentujący centralny widżet okna. Ikona centralnego widżetu pokazuje aktualnie zastosowany układ. Początkowo ma ona czerwony okrąg-krzyż, pokazujący, że nie ma aktywnego układu.

Kliknij prawym przyciskiem myszy na obiekcie QMainWindow i znajdź 'Układ’ w powstałym rozwijanym menu.

Kliknij prawym przyciskiem myszy na głównym oknie i wybierz układ.

Następnie zobaczysz listę układów, które możesz zastosować do okna. Wybierz Układ poziomy, a układ zostanie zastosowany do widżetu.

Wybierz układ do zastosowania do głównego okna.

Wybrany układ jest zastosowany do środkowego widżetu okna QMainWindow, a widżety są dodawane do układu, układając się w zależności od wybranego układu. Zauważ, że w Qt Creator możesz przeciągać i zmieniać kolejność widżetów w obrębie układu, lub wybrać inny układ, jak chcesz. To czyni go szczególnie miłym do prototypowania i wypróbowywania rzeczy.

Pionowy układ zastosowany do widżetów w głównym oknie.

Używanie wygenerowanego pliku .ui

Utworzyliśmy bardzo prosty interfejs użytkownika. Następnym krokiem jest przeniesienie go do Pythona i wykorzystanie do zbudowania działającej aplikacji.

Najpierw zapisz swój plik .ui – domyślnie zapisze się on w lokalizacji, którą wybrałeś podczas jego tworzenia, choć możesz wybrać inną lokalizację, jeśli chcesz.

Plik .ui jest w formacie XML. Aby użyć naszego UI z Pythona mamy do dyspozycji dwie alternatywne metody –

1. załaduj do klasy używając metody .loadUI()
2. konwertuj go do Pythona używając narzędzia pyuic5.

Te dwa podejścia są omówione poniżej. Osobiście wolę konwertować UI do pliku Pythona, aby zachować podobieństwo z punktu widzenia programowania &pakowania.

Wczytywanie pliku .ui bezpośrednio

Aby wczytać pliki .ui możemy użyć modułu uic dołączonego do PyQt5, a konkretnie metody uic.loadUI(). Pobiera ona nazwę pliku UI i ładuje go tworząc w pełni funkcjonalny obiekt PyQt5.

Dla PySide2 możesz użyć instancji QUiLoader i wywołać metodę loader.load() aby osiągnąć to samo.

A (bardzo) prosty UI zaprojektowany w Qt Creator

Jako że metoda uid.loadUI() zamienia obiekt instancji nie możesz dołączyć niestandardowego __init__() kodu. Możesz jednak obsłużyć to przez niestandardową funkcję konfiguracji

Aby załadować UI z bloku __init__ istniejącego widżetu (np. QMainWindow) możesz użyć uic.loadUI(filename, self) dla PyQt5.

Ładowacz PySide2 nie obsługuje tego podejścia – drugi parametr jest dla widżetu rodzica widżetu, który tworzysz. Uniemożliwia to dodanie niestandardowego kodu do inicjalizacji widżetu, ale można to obejść za pomocą osobnej funkcji init.

Konwersja pliku .ui do Pythona

Aby wygenerować plik wyjściowy Pythona, uruchom pyuic5 z wiersza poleceń, przekazując plik .ui i plik docelowy dla wyjścia, z parametrem -o. Poniższe polecenie wygeneruje plik Pythona o nazwie MainWindow.py, który zawiera nasze stworzone UI.

pyuic5 mainwindow.ui -o MainWindow.py

Jeśli używasz PyQt4, narzędzie nazywa się `pyuic4`, ale poza tym jest całkowicie identyczne.

Możesz otworzyć wynikowy plik MainWindow.py w edytorze, aby rzucić na niego okiem, chociaż nie powinieneś go edytować. Potęga używania Qt Creatora polega na możliwości edytowania, poprawiania i aktualizowania aplikacji w trakcie jej rozwoju. Wszelkie zmiany dokonane w tym pliku zostaną utracone podczas jego aktualizacji. Możesz jednak nadpisać i zmienić wszystko, co chcesz, kiedy importujesz i używasz pliku w swojej aplikacji.

Importowanie wynikowego pliku Pythona działa jak każdy inny. Możesz zaimportować swoją klasę w następujący sposób. Narzędzie pyuic5 dołącza Ui_ do nazwy obiektu zdefiniowanego w Qt Creator, i to właśnie ten obiekt chcesz zaimportować.

from MainWindow import Ui_MainWindow

Aby utworzyć główne okno w Twojej aplikacji, utwórz klasę jak zwykle, ale podklasując ją zarówno z QMainWindow, jak i z Twojej zaimportowanej klasy Ui_MainWindow. Na koniec wywołaj self.setupUi(self) z wnętrza __init__, aby wywołać konfigurację interfejsu.

To daje dokładnie taki sam rezultat jak poprzednio.

A (bardzo) prosty UI zaprojektowany w Qt Creator

To wszystko. Twoje okno jest teraz w pełni skonfigurowane. Ponieważ użycie pliku .ui abstrahuje od kodu specyficznego dla UI, możesz użyć tego samego wzorca do załadowania dowolnego interfejsu, który zaprojektujesz.

Dodawanie logiki aplikacji

Możesz wchodzić w interakcje z widżetami utworzonymi za pomocą Qt Creator tak samo, jak z tymi utworzonymi za pomocą kodu. Aby uprościć sprawę, uic dodaje wszystkie widżety-dzieci do obiektu okna według ich nazw id określonych w Qt Creator. W następnej części zajmiemy się tym, jak z nimi pracować.