Qt Quick Responsive Layouts

Layouts sind eine gute Methode, um anpassbare Benutzeroberflächen zu erstellen. Dieser Ansatz hat jedoch seine Grenzen, da wir Elemente nicht unbegrenzt verkleinern und vergrößern können, ohne dabei an Benutzerfreundlichkeit und Ästhetik einzubüßen. Ab einem bestimmten Punkt ist es sinnvoller, bestimmte Elemente neu anzuordnen, zu entfernen oder hinzuzufügen. Die Anpassung an verschiedene Geräte (z. B. Smartphones und Tablets) und Bildschirmausrichtungen (Quer- oder Hochformat) lässt sich auf ähnliche Weise umsetzen. Dies verstehen wir gemeinhin unter responsiven Layouts, und Qt Quick Layouts bieten verschiedene APIs zu deren Umsetzung.

Statische Hierarchie, adaptives Layout

Layouts verfügen über eine Hierarchie, die in der Regel durch den deklarativen QML-Code definiert wird. Bei einigen einfachen responsiven Layouts reicht es aus, die Hierarchie unverändert zu lassen und stattdessen lediglich einige der Eigenschaften anzupassen, die das Layout beeinflussen.

Deklarative Beschreibung

Der einfachste Ansatz zur Änderung des Layouts besteht darin, Layout-Eigenschaften und die zugehörigen „ Layout “-Eigenschaften mit kleinen Ausdrücken anzupassen. Sie können beispielsweise ternäre Operatoren verwenden, um das Layout in Abhängigkeit von seiner Breite anzupassen. „ Item “-Eigenschaften wie „ Item.visible “, die verschiedene Teile der Benutzeroberfläche ausblenden oder einblenden, lassen sich auf dieselbe Weise ändern.

Im folgenden Codeausschnitt wird dieses Konzept genutzt, um ein zweispaltiges Layout in ein einspaltiges Layout umzuwandeln, wenn die Fensterbreite kleiner als ein bestimmter Wert ist.

GridLayout {
    columns: width < 300 ? 1 : 2
    anchors.fill: parent

    Rectangle {
        id: rectangle1
        color: "tomato"
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    Rectangle {
        id: rectangle2
        color: "lightskyblue"
        Layout.fillHeight: true
        Layout.fillWidth: true
    }
}

Die resultierenden Layouts sehen je nach Fensterbreite wie folgt aus.

Verschiedene Ebenen von Layouts und Elementen können verschachtelt werden, jedoch können „ Items “ nur innerhalb ihres jeweiligen „ Item.parent “ verschoben werden.

Zustände

Das gleiche Ergebnis lässt sich mit den Zuständen von „Qt Quick “ erzielen. Der Vorteil der Verwendung von Zuständen besteht darin, dass die „ Layout “-Eigenschaften für ein bestimmtes Layout an einer einzigen Stelle in der QML-Datei zusammengefasst sind (zumindest die sich ändernden). Das zuvor gezeigte Beispiel lässt sich wie folgt umsetzen, und das Ergebnis sieht genauso aus und verhält sich genauso.

GridLayout {
    anchors.fill: parent

    Rectangle {
        id: rectangle1
        color: "tomato"
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    Rectangle {
        id: rectangle2
        color: "lightskyblue"
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    states: [
        State {
            when: width < 300
            PropertyChanges { target: rectangle2; Layout.row: 1 }
            PropertyChanges { target: rectangle2; Layout.column: 0 }
        },
        State {
            when: width >= 300
            PropertyChanges { target: rectangle2; Layout.row: 0 }
            PropertyChanges { target: rectangle2; Layout.column: 1 }
        }
    ]
}

LayoutItemProxy

Ein dritter Ansatz ist die Verwendung von ` LayoutItemProxy`. Die Implementierung des zuvor gezeigten minimalistischen Beispiels findet sich in der Typdokumentation. Im Gegensatz zu den zuvor gezeigten Lösungen ermöglicht ` LayoutItemProxy ` die Deklaration vollständig separater Layouts für verschiedene Formfaktoren. Insbesondere bei komplexeren Layouts kann dies nützlich sein, um eine übersichtliche Quellcode-Struktur zu gewährleisten und zu pflegen.

Beachten Sie, dass sich die „ LayoutItemProxy “-API im Status „Technology Preview“ befindet und in zukünftigen Qt-Versionen Änderungen unterliegen oder entfernt werden könnte.

Adaptive Hierarchie, adaptives Layout

Komplexere Neugestaltungen des Layouts erfordern möglicherweise Änderungen an der Hierarchie. Eine kleine, eigenständige Schaltfläche in einem kleinen Layout könnte mit anderen Schaltflächen kombiniert und in ein Feld eines größeren Layouts eingefügt werden. Ein Element, das in einem Layout vollständig sichtbar ist, erfordert in einem anderen, kleineren Layout möglicherweise eine „ Flickable “. In diesem Szenario ist es am besten, auf die „ LayoutItemProxy “ zurückzugreifen. Die „ LayoutItemProxy “ ermöglicht es, „ Items “ über verschiedene Hierarchieebenen hinweg und zwischen verschiedenen „ Item.parent “ zu verschieben.

Das Beispiel „Qt Quick Layouts – Responsive Layout“ zeigt einen Fall, in dem ein Element zwischen verschiedenen Hierarchieebenen verschoben wird – in einem Fall in ein „ Flickable “ und in einem anderen Layout auf die oberste Ebene. Die beiden resultierenden Layouts sehen wie folgt aus.

Nützliche Links: Beachten Sie Ihre Designrichtlinien

Viele Designrichtlinien bieten Hilfe und Tipps zur Erstellung responsiver Layouts. Die Umsetzung der jeweiligen Techniken ist mit den oben genannten APIs möglich. Für weitere Informationen empfehlen wir die folgenden Links:

• Apple Human Interface Guidelines
• Material3-Layouts
• Microsoft Fluent – Techniken für responsives Design