Układanie GUI za pomocą Qt Designera

Podczas układania GUI w Qt umieszczenie każdego widgetu w odpowiednim miejscu na formularzu może być dość trudnym zadaniem. Na szczęście, Qt oferuje zestaw menedżerów układu, które upraszczają proces pozycjonowania widżetów i pozwalają łatwo tworzyć dowolne układy. Aby rozłożyć widżet w formularzu, możesz stworzyć wszystko w kodzie, lub możesz stworzyć swój układ za pomocą Qt Designer. W tym poradniku dowiesz się, jak używać układów Qt za pomocą Qt Designera do budowania złożonych GUI dla swoich aplikacji.

Dodatkowo, stworzymy przykład okna dialogowego, używając kilku widżetów ze spójnym układem, aby wzmocnić twoją wiedzę i złożyć wszystko razem w pełni funkcjonalne okno dialogowe, tak jak byś tworzył w prawdziwej aplikacji.

Używanie układów za pomocą Qt Designer

Qt Designer jest narzędziem Qt do projektowania i tworzenia graficznych interfejsów użytkownika (GUI) dla aplikacji desktopowych. Za pomocą Qt Designer można tworzyć okna, okna dialogowe i formularze. Pozwala na dodawanie różnego rodzaju widżetów do tworzenia GUI przy użyciu formularzy ekranowych i interfejsu opartego na przeciąganiu i upuszczaniu.

Główny interfejs Qt Designer wygląda następująco –

Qt Designer – Główny interfejs

Qt Designer posiada przejrzysty i przyjazny dla użytkownika interfejs, który pozwala na tworzenie dowolnego rodzaju GUI poprzez przeciąganie widżetów na pustą formę. Po umieszczeniu wszystkich widżetów na formularzu, musisz umieścić je w spójnym układzie. Zapewni to, że wszystkie twoje widżety będą wyświetlane i zmienią rozmiar prawidłowo, gdy formularz będzie wyświetlany w podglądzie lub używany w aplikacji.

Menedżery układu Qt są strukturalnymi kontenerami, które automatycznie układają widżety dzieci, zapewniając, że dobrze wykorzystują dostępną przestrzeń. Umieszczanie widżetów w menedżerze układu automatycznie układa je zgodnie ze zdefiniowanymi zasadami. Jedną z najbardziej użytecznych funkcji Qt Designer jest możliwość przeciągania i upuszczania hierarchii menedżerów układu, aby ułożyć widżety w czyste i funkcjonalne interfejsy.

W Qt Designerze można tworzyć obiekty układu przez zastosowanie układu do grupy istniejących widżetów. Chociaż możliwe jest przeciąganie układów na formularz, a następnie przeciąganie widżetów do układów, może to być nieco kłopotliwe. Najlepszą praktyką jest zamiast tego przeciągnięcie wszystkich potrzebnych widżetów i przekładek na formularz, a następnie wybranie powiązanych widżetów i przekładek i zastosowanie do nich układów. Wykonaj następujące kroki –

1. Przeciągnij i upuść widżety na formularz, starając się umieścić je w pobliżu ich pożądanej pozycji
2. Wybierz widżety, które powinny być zarządzane z danym układem, przytrzymując klawisz Ctrl i klikając je
3. Zastosuj odpowiedni układ (poziomy, pionowy, siatka lub formularz) za pomocą paska narzędzi Qt Designer, menu głównego, lub menu kontekstowego formularza

Zanim przejdziesz do przykładu, spójrz na opcje związane z układem, które oferuje Qt Designer –

1. Użyj opcji układu na głównym pasku narzędzi
2. Użyj opcji układu w menu głównym
3. Użyj opcji układu w menu kontekstowym formularza

Najbardziej dostępnym sposobem tworzenia układów jest użycie sekcji układu głównego paska narzędzi Qt Designer. Sekcja ta wygląda następująco –

Qt Designer – pasek narzędzi Układ

Od lewej do prawej znajdują się następujące przyciski –

• Rozmieść poziomo układa wybrane widżety w układzie poziomym obok siebie (kombinacja klawiszy, Ctrl+1). Ta opcja wykorzystuje standardowy obiekt QHBoxLayout
• Lay Out Vertically Układa wybrane widżety w układzie pionowym, jeden pod drugim (kombinacja klawiszy, Ctrl+2). Ta opcja używa standardowego QVBoxLayout obiektu
• Rozmieść poziomo w rozgałęziaczu Rozmieszcza widżety poziomo za pomocą rozgałęziacza (kombinacja klawiszy, Ctrl+3)
• Rozmieść pionowo w rozgałęziaczu Rozmieszcza widżety pionowo za pomocą rozgałęziacza (kombinacja klawiszy, Ctrl+4)
• Rozmieść w siatce Rozmieszcza widżety w siatce podobnej do tabeli (wiersze i kolumny). Domyślnie każdy widżet zajmuje jedną komórkę siatki, ale można zmodyfikować to zachowanie i sprawić, aby widżety zajmowały kilka komórek (Kombinacja klawiszy, Ctrl+5). Ta opcja wykorzystuje standardowy QGridLayout obiekt
• Rozmieść w układzie formularza Rozmieszcza wybrane widżety w układzie dwukolumnowym. Lewa kolumna jest zwykle przeznaczona na etykiety z prośbą o podanie pewnych informacji, a prawa kolumna zawiera widżety do wprowadzania, edytowania lub pokazywania tych informacji (kombinacja klawiszy, Ctrl+6)
• Przerwij układ Ten klawisz pozwala przerwać istniejący układ. Po ułożeniu widżetów w układzie nie można ich przesuwać ani zmieniać ich rozmiaru indywidualnie, ponieważ ich geometria jest kontrolowana przez układ. Aby zmodyfikować poszczególne widżety, trzeba przerwać układ i powtórzyć go później (kombinacja klawiszy Ctrl+0)
• Dostosuj rozmiar dostosowuje rozmiar układu, aby pomieścić zawarte widżety i zapewnić, że każdy z nich ma wystarczająco dużo miejsca, aby być widocznym (kombinacja klawiszy Ctrl+J)

Te same opcje związane z układem są również dostępne w menu głównym Qt Designer w menu Form oraz w menu kontekstowym formularza, więc możesz wybrać te, które bardziej Ci się podobają.

Jak już mamy teorię za sobą, możemy zastosować te układy w praktyce. W następnych kilku sekcjach będziemy używać Qt Designera do rozmieszczania widżetów na naszych formularzach i budowania ładnych i eleganckich GUI dla aplikacji desktopowych. Ale zanim zaczniemy eksperymentować z różnymi menedżerami układów, jakie oferuje Qt, najpierw stworzymy niestandardowy widżet do wizualizacji układów, gdy będziemy przechodzić przez ten samouczek.

Ukończony plik .ui można pobrać poniżej, jeśli chcesz pominąć ten krok.

layout-labels.ui

Naprzód i odpal swój Qt Designer, a następnie wykonaj następujące kroki –

1. Wybierz Widget w templates/forms zakładce New Form okna dialogowego. Spowoduje to utworzenie nowego pustego formularza do pracy.
2. Zapisz swój formularz jako layout-labels.ui.
3. Wyszukaj widżet Label na karcie Widget Box i przeciągnij go na formularz.
4. Przejdź do karty Property Editor i ustaw właściwość text na 0.
5. Otwórz okno dialogowe Text Edit i ustaw kolor tekstu na biały. Ustaw rozmiar czcionki na 20 punktów i wyjustuj tekst. Naciśnij klawisz OK, aby zastosować zmiany.
6. Przejdź do okna Property Editor i ustaw właściwość autoFillBackground na True, zaznaczając pole wyboru.
7. Wyszukaj właściwość palette i otwórz okno dialogowe Edit Palette. Użyj opcji Quick, aby ustawić kolor na czerwony.

Jeśli czujesz się zagubiony, spójrz na poniższy screencast, aby zobaczyć kroki w akcji –

W tym przykładzie tworzysz nowe okno na podstawie szablonu Widget. Następnie dodajemy etykietę, ustawiamy jej właściwość text na 0 i ustawiamy jej kolor tła na czerwony.

Aby zakończyć ten przykład, powtórz wszystkie kroki, aby dodać trzy kolejne etykiety z ich tekstem ustawionym na 1, 2 i 3 i ich kolorami ustawionymi na zielony, żółty i niebieski. W końcu otrzymasz formularz taki jak ten:

Qt Designer – Formularz z kolorowymi etykietami

Powyższy zrzut ekranu pokazuje początkowy formularz, którego będziesz używał w kilku następnych sekcjach. Jest to czysty formularz z czterema obiektami etykiet na nim. Możesz ustawić kolor tła dla każdej etykiety, aby łatwiej było je zobaczyć i rozróżnić w następnych sekcjach.

Układy poziome, QHBoxLayout

Możesz użyć menedżera układów poziomych (QHBoxLayout), aby ułożyć widżety w jednym rzędzie. Aby utworzyć taki układ w kodzie, musisz zainicjować klasę QHBoxLayout, a następnie dodać swoje widżety do obiektu układu. W Qt Designerze łatwiej jest pracować w odwrotny sposób.

Z otwartym plikiem layout-labels.ui najpierw zaznacz wszystkie swoje etykiety. Aby to zrobić, możesz kliknąć każdy widżet po kolei, trzymając klawisz Ctrl lub możesz również kliknąć i przeciągnąć wskaźnikiem myszy wewnątrz formularza, aby wybrać widżety.

Po zaznaczeniu widżetów umieść je w układzie poziomym, wybierając przycisk Lay Out Horizontally na głównym pasku narzędzi Qt Designer. Możesz również użyć opcji Lay out->Lay Out Horizontally z menu kontekstowego pokazanego poniżej lub możesz nacisnąć Ctrl+1. Poniższy screencast poprowadzi Cię przez te kroki –

Jeśli układ jest zły, możesz łatwo cofnąć wszystko i zacząć układać od nowa. Aby cofnąć wszystko, możesz nacisnąć Ctrl+z lub użyć menu Edit z głównego menubaru Qt Designera. Jeśli to nie jest możliwe lub nie działa, możesz po prostu przerwać układ, używając przycisku Break Layout z głównego paska narzędzi Qt Designera. Innym sposobem na przerwanie układu jest naciśnięcie klawisza Ctrl+0 lub wybranie Break Layout z menu kontekstowego formularza.

Układy pionowe, QVBoxLayout

Możesz użyć układu pionowego (QVBoxLayout), aby ułożyć widżety w jednej kolumnie jeden nad drugim. Może to być bardzo przydatne, gdy tworzysz grupy widżetów i musisz się upewnić, że są one wyrównane w pionie.

Zaczynając od oryginalnego pliku layout-labels.ui, pierwszym krokiem będzie wybranie widżetów, które musisz uwzględnić w układzie pionowym. Następnie możesz kliknąć przycisk Lay Out Vertically na głównym pasku narzędzi, możesz użyć menu kontekstowego lub możesz również nacisnąć klawisz Ctrl+2. Poniższy screencast poprowadzi Cię przez te kroki –

Jeśli przyjrzysz się uważnie screencastowi, to zobaczysz, że obiekt układu jest oznaczony cienką czerwoną ramką otaczającą etykiety na formularzu. Ta czerwona ramka nie jest widoczna na podglądzie lub w czasie działania, jest to tylko wskazówka, której możesz użyć podczas projektowania formularza. Zauważ również, że obiekt układu pojawia się w Inspektorze obiektów, a jego właściwości (marginesy i ograniczenia) są wyświetlane w Edytorze właściwości.

Układy siatki, QGridLayout

Czasami trzeba układać widżety zarówno poziomo, jak i pionowo w ramach tego samego układu. Aby to zrobić, możesz użyć menedżera układu siatki (QGridLayout). Menedżery układu siatki układają widżety w kwadratową lub prostokątną siatkę, w której wszystkie widżety są wyrównane w pionie i poziomie względem swoich sąsiadów. Ten rodzaj układu może dać Ci znacznie więcej swobody w rozmieszczaniu widżetów na formularzu, zachowując jednocześnie pewien stopień struktury. Ten układ może być bardziej odpowiedni niż zagnieżdżone układy poziome i pionowe, zwłaszcza gdy zależy Ci na wyrównaniu sąsiednich wierszy lub kolumn.

Układ siatki możesz zbudować za pomocą Qt Designera w taki sam sposób jak inne układy. Pierwszym krokiem jest wybranie grupy widżetów, które chcesz ułożyć za pomocą menedżera układu siatki. Następnie można użyć paska narzędzi, menu kontekstowego lub nacisnąć klawisz Ctrl+5, aby ustawić układ. Obejrzyj poniższy screencast –

W tym przypadku używamy układu siatki 2 x 2 do rozmieszczenia etykiet na formularzu. Zauważ, że aby użyć tego rodzaju układu, powinieneś najpierw umieścić widżety w rzędach i kolumnach na formularzu, jak pokazano na powyższym screencast. Qt Designer jest całkiem sprytny i postara się utrzymać projekt tak podobny, jak to tylko możliwe, do tego, co zostało stworzone ręcznie. Może nawet automatycznie tworzyć trudne układy wielokolumnowe lub automatycznie wypełniać puste komórki.

Układy formularzy, QFormLayout

Mimo że QGridLayout może być użyty do układu formularzy z wejściami i etykietami w dwóch kolumnach, Qt dostarcza również układ zaprojektowany specjalnie do tego celu – (QFormLayout). Ten typ układu jest idealny, gdy tworzysz ustrukturyzowaną aplikację wprowadzającą dane lub bazę danych. Lewa kolumna zwykle zawiera etykiety, które proszą o podanie pewnych informacji. Prawa kolumna zawiera widżety wejściowe, takie jak edytory linii (QLineEdit), pola obrotowe (QSpinBox), edytory daty (QDateEdit), pola kombi (QComboBox), i tak dalej.

Zaletą użycia tego układu w stosunku do QGridLayout jest to, że jest on prostszy do pracy, gdy potrzebujesz tylko dwóch kolumn. Poniższy screencast pokazuje to w akcji –

W tym przykładzie, najpierw dodajemy cztery nowe etykiety. Etykiety te będą zawierały informacje o danych, które mają być wprowadzone lub edytowane w drugiej kolumnie. W tym przypadku druga kolumna zawiera twoje kolorowe etykiety testowe, ale zazwyczaj ta kolumna będzie używana do umieszczania widżetów wejściowych, takich jak edytory wierszy, pola obrotowe, pola kombi i tak dalej.

Układy dzielników

Rozdzielacze są obiektami kontenerowymi, które układają widżety poziomo lub pionowo w dwóch panelach o zmiennym rozmiarze. Z tym rodzajem układu, możesz dowolnie dostosować ilość miejsca, które każdy z paneli zajmuje na twojej formie, utrzymując jednocześnie stałą całkowitą ilość wykorzystanego miejsca. W Qt układy splitterów są zarządzane za pomocą QSplitter.

Mimo że splittery są technicznie widżetem kontenera (a nie układem), Qt Designer traktuje je jako układy, które można zastosować do istniejących widżetów. Aby umieścić grupę widżetów w dzielniku, najpierw wybieramy je jako zwykłe, a następnie stosujemy dzielnik za pomocą odpowiedniego przycisku paska narzędzi, skrótu klawiaturowego lub opcji menu kontekstowego w Qt Designer Spójrz na poniższy screencast –

W tym przykładzie, najpierw stosujemy poziomy dzielnik do etykiet. Zauważ, że musisz uruchomić podgląd formularza, jeśli chcesz zobaczyć podział w akcji. Możesz uruchomić podgląd formularza, naciskając klawisz Ctrl+R. Później zastosujemy pionowy splitter do etykiet. W każdym przypadku możesz dowolnie zmieniać rozmiar widżetu za pomocą wskaźnika myszy.

Buduj inne układy za pomocą Qt Designera

Jest jeszcze kilka rzeczy, które możesz zrobić z układami w Qt Designerze. Na przykład, załóżmy, że musisz dodać nowy widżet do istniejącego układu lub użyć zagnieżdżonych układów, aby ułożyć widżety w złożonym GUI. W następnych kilku sekcjach omówimy, jak wykonać niektóre z tych zadań.

Wstawianie obiektów do istniejącego układu

Obiekty mogą być wstawiane do istniejącego układu przez przeciągnięcie ich z bieżących pozycji i upuszczenie w wymaganym miejscu w układzie. Niebieski kursor jest wyświetlany w układzie, gdy obiekt jest nad nim przeciągany, aby wskazać miejsce, w którym zostanie umieszczony.

Spójrz na poniższy screencast, gdzie umieściliśmy trzy z naszych etykiet w pionowym układzie, a następnie zdaliśmy sobie sprawę, że niebieska etykieta została pominięta w grze –

Możliwe jest również przeniesienie lub zmiana pozycji danego widżetu w układzie. Aby to zrobić, po prostu przeciągnij i upuść widżet na jego nową pozycję w układzie. Pamiętaj, aby podążać za niebieską linią, aby uzyskać to poprawnie.

Zagnieżdżanie układów w celu zbudowania złożonych GUI

Możesz również zagnieżdżać menedżery układów jeden w drugim za pomocą Qt Designer. Wewnętrzny układ staje się wtedy dzieckiem otaczającego go układu. W ten sposób można iteracyjnie tworzyć bardzo złożone, ale dobrze zorganizowane interfejsy użytkownika.

Wykłady mogą być zagnieżdżane tak głęboko, jak tylko potrzebujesz. Na przykład, aby utworzyć okno dialogowe z poziomym rzędem przycisków na dole i kilkoma innymi widżetami ustawionymi pionowo na formularzu, możesz użyć poziomego układu dla przycisków i pionowego dla reszty widżetów, a następnie zawinąć te układy w układ pionowy.

Wracając do naszego przykładu z kolorowymi etykietami, poniższy screencast pokazuje proces układania zagnieżdżonego układu w Qt Designer –

W tym przykładzie najpierw układamy widżety w pary, używając układu poziomego. Następnie zagnieżdżamy oba te układy w trzecim układzie, ale tym razem pionowym. Układy można zagnieżdżać tak głęboko, jak jest to wymagane.

Po wybraniu układu dziecka można wybrać jego układ rodzica, naciskając klawisz Shift podczas klikania na nim. Pozwala to na szybkie wybranie określonego układu w hierarchii, co w przeciwnym razie będzie trudne ze względu na małą ramkę ograniczającą każdy menedżer układów.

Ustawianie układu najwyższego poziomu lub głównego

Ostatnim krokiem, który należy wykonać podczas budowania formularza, jest połączenie wszystkich układów i widżetów w jeden układ główny lub układ najwyższego poziomu. Ten układ jest na szczycie hierarchii wszystkich innych układów i widżetów. Ważne jest, aby mieć układ, ponieważ w przeciwnym razie widżety na formularzu nie zmienią rozmiaru, gdy zmienisz rozmiar okna.

Aby ustawić główny układ, po prostu kliknij prawym przyciskiem myszy w dowolnym miejscu formularza, który nie zawiera widżetu lub układu. Następnie możesz wybrać Lay Out Horizontally, lub Lay Out Horizontally, lub możesz również wybrać Lay Out in a Grid jak w poniższym screencast –

W tym przykładzie, używamy każdego z trzech różnych układów jako naszego układu najwyższego poziomu po kolei. Najpierw używamy układu poziomego, następnie łamiemy układ i używamy układu pionowego. Na koniec ustawiamy układ siatki. To, który układ najwyższego poziomu wybierzesz, zależy od konkretnych wymagań Twojej aplikacji.

Ważne jest, abyś zwrócił uwagę na to, że układy najwyższego poziomu nie są widoczne jako osobny obiekt w Inspektorze obiektów. Jego właściwości pojawiają się pod właściwościami widżetów głównego formularza. Zauważ również, że jeśli Twój formularz nie posiada layoutu, to jego ikona pojawi się w Object Inspector w postaci czerwonego kółka. Innym sposobem na sprawdzenie, czy poprawnie ustawiłeś główny układ, jest próba zmiany rozmiaru formularza, jeśli główny układ jest na miejscu, wtedy twoje widżety powinny zmienić rozmiar odpowiednio.

Jak zaczniesz budować bardziej złożone aplikacje, odkryjesz, że inne widżety kontenera również wymagają ustawienia układu najwyższego poziomu, na przykład QGroupBox, QTabWidget, QToolBox, i tak dalej. Aby to zrobić, możesz wykonać te same kroki, które widziałeś tutaj, ale tym razem musisz kliknąć prawym przyciskiem myszy na widżecie kontenera.

Układanie dialogu z Qt Designer

Dla ostatniego i bardziej kompletnego przykładu, jak używać układów z Qt Designer, stworzymy teraz okno dialogowe, aby wprowadzić pewne informacje w aplikacji bazy danych. Załóżmy, że budujemy oprogramowanie do zarządzania zasobami ludzkimi dla naszej firmy Poyqote Inc. Pracujemy teraz nad formularzem wprowadzającym pewne dane o naszych pracownikach. Okno dialogowe powinno prezentować użytkownikom przyjazny interfejs GUI do wprowadzania następujących danych:

• Nazwa pracownika
• Data zatrudnienia
• Dział
• Posada
• Wynagrodzenie roczne
• Opis stanowiska

Jaki jest najlepszy sposób ułożenia tego formularza? Istnieje wiele opcji i jest to w dużej mierze kwestia gustu i praktyki. Ale tutaj używamy QFormLayout, aby ułożyć pola wejściowe w dwóch kolumnach z etykietami po lewej stronie i polami wejściowymi po prawej. Proces tworzenia układu jest pokazany na poniższym screencast –

Podstawowe okno dialogowe jest tworzone przy użyciu szablonu Qt Designer’s Dialog with Buttons Bottom. Następnie dodajemy kilka etykiet i kilka widżetów wejściowych, w tym edycje linii, edycje daty, edycje tekstu i pola kombi. Następnie umieszczamy wszystkie te widżety w układzie formularza, a na koniec definiujemy górny poziom lub główny układ formularza.

Plik .ui gotowego okna dialogowego można pobrać tutaj.

Wnioski

Qt Designer jest potężnym narzędziem, jeśli chodzi o tworzenie GUI przy użyciu Qt. Jedną z jego najprostszych i najbardziej użytecznych funkcji jest możliwość układania widżetów w różnego rodzaju układy. Nauka efektywnego tworzenia układów za pomocą Qt Designera może podnieść Twoją produktywność, szczególnie podczas tworzenia złożonych GUI.

Ten poradnik przeprowadzi Cię przez proces tworzenia własnych układów za pomocą Qt Designera. Teraz już wiesz, jak w pełni wykorzystać możliwości Qt Designera podczas tworzenia układów graficznych.