Bewährte Vorgehensweisen für QML und Qt Quick

Trotz aller Vorteile, die QML und „ Qt Quick “ bieten, können sie in bestimmten Situationen eine Herausforderung darstellen. In den folgenden Abschnitten werden einige bewährte Vorgehensweisen näher erläutert, die Ihnen helfen, bei der Entwicklung von Anwendungen bessere Ergebnisse zu erzielen.

Verwenden Sie integrierte Steuerelemente anstelle von benutzerdefinierten UI-Steuerelementen

Eine flüssige und moderne Benutzeroberfläche ist heutzutage der Schlüssel zum Erfolg jeder Anwendung, und genau hier liegt der große Vorteil von QML für Designer und Entwickler. Qt bietet die grundlegendsten UI-Steuerelemente, die für die Erstellung einer flüssigen und modern anmutenden Benutzeroberfläche erforderlich sind. Es wird empfohlen, diese Liste der UI-Steuerelemente durchzugehen, bevor Sie eigene benutzerdefinierte UI-Steuerelemente erstellen.

Neben diesen grundlegenden UI-Steuerelementen, die von Qt Quick selbst angeboten werden, steht unter Qt Quick Controls eine umfangreiche Auswahl an UI-Steuerelementen zur Verfügung. Sie decken die gängigsten Anwendungsfälle ohne jegliche Anpassung ab und bieten durch ihre Anpassungsmöglichkeiten noch viel mehr Möglichkeiten. Insbesondere bietet Qt Quick Controls Gestaltungsoptionen, die den neuesten UI-Designtrends entsprechen. Nur wenn diese UI-Steuerelemente die Anforderungen Ihrer Anwendung nicht erfüllen, empfiehlt es sich, ein benutzerdefiniertes Steuerelement zu erstellen.

Sie können die Steuerelemente beim Entwerfen von Benutzeroberflächen in „ Qt Design Studio “ verwenden. Darüber hinaus bietet das Tool zeitachsenbasierte Animationen, visuelle Effekte, Layouts und eine Live-Vorschau für das Prototyping von Anwendungen.

Weiterführende Informationen

• Qt Quick Controls
• Anpassen Qt Quick Controls
• Qt Quick
• Qt Design Studio Handbuch

Codierungskonventionen

Siehe QML-Codierungskonventionen.

Anwendungsressourcen bündeln

Die meisten Anwendungen sind auf Ressourcen wie Bilder und Symbole angewiesen, um eine ansprechende Benutzererfahrung zu bieten. Oftmals stellt es eine Herausforderung dar, diese Ressourcen der Anwendung unabhängig vom Zielbetriebssystem zur Verfügung zu stellen. Die meisten gängigen Betriebssysteme wenden Sicherheitsrichtlinien an, die den Zugriff auf das Dateisystem einschränken, was das Laden dieser Ressourcen erschwert. Als Alternative bietet Qt ein eigenes Ressourcensystem an, das in die Anwendungsbinärdatei integriert ist und den Zugriff auf die Ressourcen der Anwendung unabhängig vom Zielbetriebssystem ermöglicht.

Betrachten Sie beispielsweise für ein C++-Projekt die folgende Verzeichnisstruktur:

MyModule
├── images
│   ├── image1.png
│   └── image2.png
├── CMakeLists.txt
└── main.qml

Sie können diese Struktur wie folgt als CMake-QML-Modul darstellen:

qt_add_qml_module(my_module
   URI MyModule
   VERSION 1.0
   QML_FILES
       main.qml
   RESOURCES
       images/image1.png
       images/image2.png
   # ...
)

Alle unter „ QML_FILES “ aufgeführten QML-Dateien werden automatisch vorab kompiliert.

Sie sollten die QML-Dateien im selben Verzeichnis wie die Datei „CMakeLists.txt“ mit dem Eintrag `qt_add_qml_module` ablegen. Andernfalls weichen ihre impliziten Importe von denen der QML-Module ab, zu denen sie gehören. Dies ist eine häufige Fehlerquelle.

Weiterführende Informationen

• Das Qt-Ressourcensystem

Trennung von Benutzeroberfläche und Geschäftslogik

Eines der wichtigsten Ziele, das die meisten Anwendungsentwickler erreichen möchten, ist die Erstellung einer wartbaren Anwendung. Eine Möglichkeit, dieses Ziel zu erreichen, besteht darin, die Benutzeroberfläche (das Frontend) von der Geschäftslogik (dem Backend) zu trennen. Im Folgenden sind einige Gründe aufgeführt, warum die Benutzeroberfläche einer Anwendung in QML geschrieben werden sollte:

• Deklarative Sprachen eignen sich hervorragend für die Definition von Benutzeroberflächen.
• QML-Code lässt sich einfacher schreiben, da er weniger ausführlich ist als C++ und nicht streng typisiert ist. Dadurch eignet sich die Sprache auch hervorragend für die Prototypenentwicklung – eine Eigenschaft, die beispielsweise bei der Zusammenarbeit mit Designern von entscheidender Bedeutung ist.
• JavaScript lässt sich problemlos in QML einbinden, um auf Ereignisse zu reagieren.

Stark typisierte Sprachen wie C++ eignen sich am besten für die Geschäftslogik einer Anwendung, also das Backend. Typischerweise führt solcher Code Aufgaben wie komplexe Berechnungen oder Datenverarbeitung aus, die in stark typisierten Sprachen schneller ablaufen als in QML.

Qt bietet verschiedene Ansätze, um QML in einer Anwendung mit einer stark typisierten Sprache zu integrieren. Ein typischer Anwendungsfall ist die Anzeige einer Datenliste in einer Benutzeroberfläche. Wenn der Datensatz statisch, einfach und klein ist, kann ein in QML geschriebenes Modell ausreichen.

Der folgende Codeausschnitt zeigt Beispiele für in QML geschriebene Modelle:

model: [ "Item 1", "Item 2", "Item 3" ]

model: 10

Für größere und dynamischere Datensätze sollten Sie eine stark typisierte Sprache wie C++ verwenden, um die Geschäftslogik zu verarbeiten.

Bereitstellung von Daten aus C++ für QML

Das Refactoring von QML ist wesentlich einfacher als das von C++. Um die Wartung so reibungslos wie möglich zu gestalten, sollten wir daher darauf achten, dass C++-Typen so weit wie möglich keine Kenntnis von QML haben. Dies lässt sich erreichen, indem Referenzen auf C++-Typen in QML „eingebunden“ werden.

Dies geschieht mithilfe von „required“-Eigenschaften, die über ` QQmlApplicationEngine::setInitialProperties` festgelegt werden. Es ist auch möglich, ein oder mehrere Singletons zu erstellen, die alle Daten zurückgeben, die die C++-Seite an QML bereitstellen möchte.

Mit diesem Ansatz bleibt der C++-Code unverändert, falls das QML in Zukunft überarbeitet werden muss.

Eine Kurzanleitung zur Auswahl des richtigen Ansatzes, um C++-Typen für QML verfügbar zu machen, finden Sie unter „Auswahl der richtigen Integrationsmethode zwischen C++ und QML“.

Weiterführende Informationen

• Tutorial zum Schreiben von QML-Erweiterungen mit C++
• Tutorial zur Chat-Anwendung

Bei der Qt Design Studio

Qt Design Studio verwendet UI-Dateien mit der Dateiendung .ui.qml, um die visuellen Teile der Benutzeroberfläche von der UI-Logik zu trennen, die Sie in .qml- Dateien implementieren. Sie sollten UI-Dateien ausschließlich in der Ansicht „ 2D “ in „ Qt Design Studio “ bearbeiten. Wenn Sie ein anderes Tool verwenden, um Code hinzuzufügen, der von „ Qt Design Studio “ nicht unterstützt wird, werden Fehlermeldungen angezeigt. Beheben Sie die Fehler, um die visuelle Bearbeitung der UI-Dateien wieder zu ermöglichen. In der Regel sollten Sie den nicht unterstützten Code in eine .qml-Datei verschieben.

Weiterführende Informationen

• Qt Design Studio: UI-Dateien

Verwendung von „ Qt Quick “-Ansichten

Zustand in Modellen speichern

Siehe „ Avoid Storing State in Delegates “.

Verwendung von Qt Quick Layouts

Qt bietet „ Qt Quick Layouts “ an, um Elemente von „ Qt Quick “ visuell in einem Layout anzuordnen. Im Gegensatz zu den „Item Positioners“ kann der „ Qt Quick Layouts “ die Größe seiner untergeordneten Elemente bei einer Größenänderung des Fensters ebenfalls anpassen. Obwohl „ Qt Quick Layouts “ für die meisten Anwendungsfälle oft die bevorzugte Wahl sind, müssen bei ihrer Verwendung die folgenden Verhaltensregeln beachtet werden:

Empfehlungen

• Verwenden Sie „ anchors “ oder die Eigenschaften „ width “ und „ height “, um die Größe des Layouts im Verhältnis zu seinem übergeordneten Element (das kein Layout ist) festzulegen.
• Verwenden Sie die angehängte Eigenschaft „ Layout “, um die Größen- und Ausrichtungsattribute der direkten untergeordneten Elemente des Layouts festzulegen.

Was Sie nicht tun sollten

• Definieren Sie keine bevorzugten Größen für Elemente, die „implicitWidth“ und „implicitHeight“ bereitstellen, es sei denn, deren implizite Größen sind nicht zufriedenstellend.
• Verwenden Sie keine Anker für ein Element, das ein direktes untergeordnetes Element eines Layouts ist. Verwenden Sie stattdessen „ Layout.preferredWidth “ und „ Layout.preferredHeight “:

  RowLayout {
      id: layout
      anchors.fill: parent
      spacing: 6
      Rectangle {
          color: 'orange'
          Layout.fillWidth: true
          Layout.minimumWidth: 50
          Layout.preferredWidth: 100
          Layout.maximumWidth: 300
          Layout.minimumHeight: 150
          Text {
              anchors.centerIn: parent
              text: parent.width + 'x' + parent.height
          }
      }
      Rectangle {
          color: 'plum'
          Layout.fillWidth: true
          Layout.minimumWidth: 100
          Layout.preferredWidth: 200
          Layout.preferredHeight: 100
          Text {
              anchors.centerIn: parent
              text: parent.width + 'x' + parent.height
          }
      }
  }

Weiterführende Informationen

• Element-Positionierer
• Qt Quick Layouts Übersicht

Typsicherheit

Bei der Deklaration von Eigenschaften in QML ist es einfach und bequem, den Typ „var“ zu verwenden:

property var name
property var size
property var optionsMenu

Dieser Ansatz hat jedoch mehrere Nachteile:

• Wird ein Wert mit falschem Typ zugewiesen, verweist der gemeldete Fehler auf die Stelle der Eigenschaftsdeklaration und nicht auf die Stelle, an der die Eigenschaft zugewiesen wurde. Dies verlangsamt den Entwicklungsprozess, da es die Fehlersuche erschwert.
• Eine statische Analyse zur Erkennung von Fehlern wie den oben genannten ist nicht möglich.
• Der tatsächlich zugrunde liegende Typ der Eigenschaft ist für den Leser nicht immer auf Anhieb erkennbar.

Verwenden Sie stattdessen nach Möglichkeit immer den tatsächlichen Typ:

property string name
property int size
property MyMenu optionsMenu

Signale bei Eigenschaftsänderungen

Verwenden Sie vorzugsweise explizite Interaktionssignale anstelle von Wertänderungssignalen, um subtile Fehler zu vermeiden.

Die Verwendung von „ valueChanged “ kann zu Ereigniskaskaden führen, bei denen der Wert ständig geändert wird, weil er auf irgendeine Weise gerundet oder normalisiert wird.

Die ausschließliche Verwendung expliziter Interaktionssignale vermeidet diese gesamte Klasse von Problemen.

Beispielsweise verfügt „ Slider “ über folgende ähnliche Signale: „ moved “ und „ valueChanged “.

Slider {
    value: someValueFromBackend

    onValueChanged: pushToBackend(value)
    // or
    onMoved: pushToBackend(value)
}

Beide Fälle sehen ähnlich aus, und man könnte versucht sein, „ valueChanged “ zu verwenden.

Entwickler übersehen oft, dass der „ Slider “ seinen Wert automatisch ändern kann, beispielsweise durch Begrenzung auf Minimal- oder Maximalwerte oder durch Rundung. In diesem Fall wird das Signal „ valueChanged “ ausgelöst. Wenn Sie das Signal „ valueChanged “ verwenden, werden Sie möglicherweise feststellen, dass es zu unerwarteten Zeitpunkten ausgelöst wird.

Um mögliche Probleme zu vermeiden, verwenden Sie ein Interaktionssignal: das Signal, das ausgelöst wird, wenn der Benutzer mit dem Steuerelement interagiert. Wenn Sie in diesem Beispiel das Signal „ moved “ verwenden, wird der Slot nur ausgelöst, wenn der Benutzer das Steuerelement ändert.

Leistung

Informationen zur Leistung in QML und bei „ Qt Quick “ finden Sie unter „QML-Leistungsaspekte und Empfehlungen“.

Bevorzugen Sie deklarative Bindungen gegenüber imperativen Zuweisungen

In QML ist es möglich, imperativen JavaScript-Code zu verwenden, um Aufgaben wie das Reagieren auf Eingabeereignisse, das Senden von Daten über ein Netzwerk usw. auszuführen. Imperativer Code nimmt in QML einen wichtigen Platz ein, es ist jedoch auch wichtig zu wissen, wann man ihn nicht verwenden sollte.

Betrachten Sie beispielsweise die folgende imperative Zuweisung:

Rectangle {
    Component.onCompleted: color = "red"
}

Dies hat folgende Nachteile:

• Sie ist langsam. Die Eigenschaft „color“ wird zunächst mit einem Standardwert ausgewertet und später erneut mit „red“.
• Sie verschiebt Fehler, die bereits zur Kompilierungszeit hätten entdeckt werden können, auf die Laufzeit, was den Entwicklungsprozess verlangsamt.
• Sie überschreibt alle zuvor vorhandenen deklarativen Bindungen. In den meisten Fällen ist dies beabsichtigt, manchmal kann es jedoch unbeabsichtigt geschehen. Weitere Informationen finden Sie unter „Debugging beim Überschreiben von Bindungen “.
• Es beeinträchtigt den Einsatz von Entwicklungswerkzeugen; der „ Qt Quick Designer“ unterstützt beispielsweise kein JavaScript.

Der Code kann stattdessen so umgeschrieben werden, dass er eine deklarative Bindung darstellt:

Rectangle {
    color: "red"
}

Speichern Sie keinen Zustand in Delegaten

Speichern Sie keinen Zustand in einem Delegaten. Das Problem hierbei ist, dass der Delegat mehrfach erstellt und zerstört wird, sodass der gespeicherte Zustand verloren geht.

// Wrong approach:
ListView {
    // ...

    delegate: Button {
        // ...
        property bool someStateProperty
        onClicked: someStateProperty = true
    }
}

Speichern Sie den Zustand stattdessen außerhalb des Delegaten, beispielsweise in einem Modell. Wenn der Delegat zerstört wird, geht der gespeicherte Zustand nicht verloren.

// Right approach:
ListView {
    // ...

    delegate: Button {
        // ...
        onClicked: model.someStateProperty = true
    }
}

Machen Sie benutzersichtbare Zeichenfolgen übersetzbar

Es wird empfohlen, benutzersichtbare Zeichenfolgen von Anfang an übersetzbar zu gestalten. Siehe „Quellcode für die Übersetzung schreiben“.

ToolButton {
    id: selectionToolButton
    // ...
    icon.source: "qrc:/images/selection.png"

    Tooltip.Text: qsTr("Select pixels within an area and move them")

    onClicked: canvas.tool = ImageCanvas.SelectionTool
}

Passen Sie native Stile nicht an

Native Stile (Windows- und macOS-Stile) unterstützen keine Anpassung. Achten Sie darauf, dass Sie einen nativen Stil nicht anpassen.

// Wrong approach:
import QtQuick.Controls.Windows

// Don't customize a native style
Button {
    background: Rectangle { /*...*/ }
}

Es wird stattdessen empfohlen, ein angepasstes Steuerelement stets auf einem einzigen Stil aufzubauen, der auf allen Plattformen verfügbar ist, z. B. „Basic Style“, „Fusion Style“, „Imagine Style“, „Material Style“ oder „Universal Style“. Auf diese Weise stellen Sie sicher, dass das Steuerelement immer gleich aussieht, unabhängig davon, mit welchem Stil die Anwendung ausgeführt wird. Informationen zur Verwendung eines anderen Stils finden Sie unter „Verwenden von Stilen“ unter Qt Quick Controls. Alternativ können Sie auch einen eigenen Stil erstellen.

// Right approach:
import QtQuick.Controls.Basic

// You can customize a commonly available style
Button {
    background: Rectangle { /*...*/ }
}

Tools und Hilfsprogramme

Informationen zu nützlichen Werkzeugen und Hilfsprogrammen, die die Arbeit mit QML und „ Qt Quick “ erleichtern, finden Sie unter „Qt Quick: Werkzeuge und Hilfsprogramme“.

Szenengraph

Informationen zum Szenengraphen von „ Qt Quick “ finden Sie unter „Qt Quick – Szenengraph“.

Skalierbare Benutzeroberflächen

Mit der Verbesserung der Bildschirmauflösungen gewinnt eine skalierbare Benutzeroberfläche zunehmend an Bedeutung. Ein Ansatz hierfür besteht darin, mehrere Kopien der Benutzeroberfläche für unterschiedliche Bildschirmauflösungen zu verwalten und je nach verfügbarer Auflösung die passende Version zu laden. Dies funktioniert zwar recht gut, erhöht jedoch den Wartungsaufwand.

Qt bietet eine bessere Lösung für dieses Problem und empfiehlt den Anwendungsentwicklern, folgende Tipps zu befolgen:

• Verwenden Sie Anker oder das Modul „ Qt Quick Layouts “, um die visuellen Elemente anzuordnen.
• Geben Sie keine expliziten Breiten- und Höhenwerte für visuelle Elemente an.
• Stellen Sie UI-Ressourcen wie Bilder und Symbole für jede von Ihrer Anwendung unterstützte Bildschirmauflösung bereit. Das Beispiel „ Qt Quick Controls “ veranschaulicht dies gut, indem es die Datei „ qt-logo.png “ für die Auflösungen @2x, @3x und @4x bereitstellt, wodurch die Anwendung auf hochauflösende Bildschirme ausgerichtet ist. Qt wählt automatisch das für den jeweiligen Bildschirm geeignete Bild aus, sofern die Funktion zur Skalierung bei hoher DPI-Auflösung explizit aktiviert ist.
• Verwenden Sie SVG-Bilder für kleine Symbole. Während größere SVGs beim Rendern langsam sein können, funktionieren kleine gut. Vektorgrafiken machen es überflüssig, mehrere Versionen eines Bildes bereitzustellen, wie es bei Bitmap-Bildern erforderlich ist.
• Verwenden Sie schriftartbasierte Symbole wie Font Awesome. Diese lassen sich auf jede Bildschirmauflösung skalieren und ermöglichen zudem eine Farbgebung. Das Beispiel „ Qt Quick Controls -Texteditor“ veranschaulicht dies gut.

Wenn dies eingerichtet ist, sollte sich die Benutzeroberfläche Ihrer Anwendung entsprechend der verfügbaren Bildschirmauflösung skalieren.

Weiterführende Informationen

• Beispiel „Galerie“
• Beispiel „Text Editor“
• Font Awesome
• Skalierbarkeit
• Hohe DPI