Komponenty QML firmy Qt

Oprócz komponentów QML aplikacji AppStudio, które są dostępne na potrzeby projektowania interfejsu użytkownika aplikacji, dostępne są także wszystkie komponenty QML należące do firmy The Qt Company. W tym temacie opisano najbardziej przydatne komponenty. Pełną listę typów QML firmy Qt zawiera dokumentacja Qt.

Poniżej przedstawiono niektóre najczęściej używane typy QML:

• Positioners
• Anchors
• Kompozycje
• Repeaters
• Stany
• Połączenia

Uwaga:

Podczas migracji z programu Qt 5.13.1 do programu Qt 5.15.2 zaobserwowano różnice w wyświetlaniu elementów interfejsu użytkownika w przykładach i aplikacjach AppStudio. Niektóre różnice dotyczą pozycji, rozmiaru, kompozycji, koloru, przycinania, zawijania i czcionki. Należy sprawdzić sposób wyświetlania wszystkich elementów interfejsu użytkownika w swoich aplikacjach. W niektórych przypadkach może być konieczna zmiana zagnieżdżenia komponentów, a w innych może być konieczne zdefiniowanie dodatkowych właściwości lub mniejszej ich liczby. Ponieważ istnieje duża elastyczność w sposobie definiowania elementów interfejsu użytkownika w QML, nie ma ustalonych reguł.

W wersji 5.15.2 typy właściwości Qt, takie jak bool,string i int są ścisłe i nie obsługują już wartości pustych ani niezdefiniowanych. Jeśli używasz tych typów, musisz rozważyć sposób obsługi wartości pustych i niezdefiniowanych. Alternatywnie możesz użyć typu właściwości var, który obsługuje wartości puste i niezdefiniowane, ale też wszystkie inne możliwe wartości.

Positioners

Komponenty positioner są elementami kontenerowymi służącymi do zarządzania pozycjami elementów w interfejsie użytkownika. Do typów positioner należą: row, column, grid i flow. Porządkowanie elementów przy użyciu dowolnych spośród nich umożliwia ich rozmieszczenie w regularnej kompozycji, która jest dobrze dopasowana do interfejsów użytkownika, których wielkość można zmieniać. Na przykład elementy można uporządkować w formie siatki, a podczas wyświetlania aplikacji z użyciem orientacji pionowej można zobaczyć tablicę elementów o rozmiarze 2 na 5, natomiast po przełączeniu do orientacji poziomej zostaną one automatycznie rozmieszczone na siatce elementów w sposób najodpowiedniejszy dla ekranu i będzie można zobaczyć tablicę elementów o rozmiarze 3 na 4.

Więcej informacji na temat komponentów positioner zawiera dokumentacja Qt.

Anchors

Każdy element ma siedem punktów zakotwiczenia, a pozostałe elementy można rozmieszczać w odniesieniu do nich. Są to następujące punkty: góra, dół, lewo, prawo, centrum poziome, centrum pionowe i linia bazowa (linia, na której znajduje się tekst w obrębie elementu). Nadają się one idealnie do rozmieszczania elementów względem siebie w celu tworzenia dynamicznych interfejsów użytkownika. Komponenty anchor pozostają na miejscu, nawet wtedy, gdy zmieniają się wymiary lub lokalizacje elementów. Można także zdefiniować marginesy komponentów anchor, określając ilość miejsca, które należy pozostawić poza komponentem anchor elementu.

Więcej informacji na temat komponentów anchor zawiera dokumentacja Qt.

Kompozycje

Aby używać komponentów Quick Layout firmy Qt, w pliku QML należy odwołać się do dodatkowego modułu, na przykład:

import QtQuick.Layouts 1.15

Dostępne są trzy komponenty layout: RowLayout, ColumnLayout i GridLayout. Użycie komponentów layout, w porównaniu do wierszy, kolumn i siatek, umożliwia dokładniejszą kontrolę nad rozmieszczaniem, w tym możliwość określania wyrównania poszczególnych elementów w kompozycji. Komponenty GridLayout umożliwiają także ustawianie osobnych odstępów między kolumnami i wierszami, rozmieszczanie elementów w wierszach i kolumnach, a ponadto określenie indywidualnej komórki siatki dla elementu. Komponentów layout można także używać do ustawiania preferowanych szerokości i wysokości maksymalnych i minimalnych. Ponadto umożliwiają one wypełnienie szerokości i wysokości dla każdego elementu. Jest to szczególnie przydatne podczas projektowania wielu ekranów i ekranów dynamicznych. Dla komponentów layout można także tworzyć elementy lustrzane, zmieniając kompozycję od lewej do prawej na kompozycję od prawej do lewej.

Repeaters

Obiekt repeater tworzy elementy na podstawie szablonu na potrzeby użycia z komponentami positioner i przy użyciu danych z modelu. Połączenie komponentów repeater i positioner to skuteczny sposób rozmieszczenia wielu elementów. Modelem może być jeden z następujących elementów:

• liczba wskazująca liczbę delegatów do utworzenia przez komponent repeater,
• źródło danych w postaci listy o dowolnej postaci — ListModel,
• lista ciągów znakowych (String),
• lista obiektów (Object).

Delegat udostępnia szablon definiujący każdy element, którego instancja została utworzona przez komponent repeater. Delegat komponentu repeater może uzyskać dostęp do jego indeksu w obrębie komponentu repeater, a także do danych modelu mających zastosowanie do delegata.

Więcej informacji na temat komponentów repeater zawiera dokumentacja Qt.

Stany

Komponentów state można używać do wyświetlania różnych widoków lub ekranów w aplikacji. Można ich używać do wyświetlania i ukrywania elementów na podstawie wartości właściwości, do zmiany zakotwiczenia lub do zmiany obiektów nadrzędnych. Na podstawie komponentu state można uruchamiać, zatrzymywać lub wstrzymywać animacje lub wykonywanie skryptów. Każdy komponent oparty na elemencie ma właściwość state i domyślną wartość właściwości state. Wartością domyślną właściwości state jest pusty ciąg znakowy ("") i zawiera wszystkie początkowe wartości właściwości. Ustawienie pustego ciągu znakowego dla właściwości state powoduje wczytanie jej wartości domyślnej.

Więcej informacji na temat komponentów state zawiera dokumentacja Qt.

Połączenia

W programie Qt 5.15 pojawiła się nowa składnia dotycząca połączeń. Poprzednia metoda tworzenia programów obsługi on<Signal> jest nieaktualna i obecnie należy stosować składnię funkcji. Poniżej przedstawiono komunikat ostrzegawczy, który pojawi się przy uruchamianiu aplikacji z użyciem poprzedniej składni połączenia:

qrc:/qml/main.qml:277:5: QML Connections: Implicitly defined onFoo properties in Connections are deprecated. Use this syntax instead: function onFoo (<arguments>) { ... }

Poniższy przykład ilustruje typowy sposób definiowania połączenia w programie Qt w wersji 5.13 i wersjach starszych:

Connections { 
     target: mouseArea 
     onPositionChanged: { 
         console.log( "onPositionChanged: ", mouse.x, mouse.y ); 
     } 
     onPressedChanged: { 
         console.log( "onPressedChanged: ", mouseArea.pressed ); 
     } 
}

Poniższy przykład ilustruje, jak należy zdefiniować połączenie w programie Qt w wersji 5.15 i wersjach nowszych:

Connections { 
     target: mouseArea 
     function onPositionChanged(mouse) { 
         console.log( "onPositionChanged: ", mouse.x, mouse.y ); 
     } 
     function onPressedChanged() { 
         console.log( "onPressedChanged: ", mouseArea.pressed ); 
     } 
}

Teraz, gdy używana jest składnia funkcji, musisz upewnić się, że wszystkie parametry sygnału są jawnie wymienione. Jeśli pominiesz którykolwiek z nich, parametry sygnału nie będą dostępne pod ich nazwą, a to może doprowadzić do niezdefiniowanych odniesień w kodzie. Na przykład musisz użyć function onPositionChanged(mouse) zamiast onPositionChanged.

Przy podawaniu parametrów sygnału zaleca się podawanie wszystkich parametrów w odpowiedniej kolejności, stosując formalne nazwy parametrów sygnału jako nazwy parametrów funkcji. Na przykład użyj function onPositionChanged(mouse), a nie function onPositionChanged(m).

Jeśli sygnał służy do zmiany właściwości, musisz jawnie nazwać obiekt, aby uzyskać dostęp do właściwości. Na przykład musisz użyć mouseArea.pressed, a nie pressed.

Więcej informacji na temat komponentów connection zawiera dokumentacja Qt.