QML - Lektion 014. GridLayout QML – Positionierung von Elementen

GridLayout, Qt, QML, ячейка, cell, row, column

Eine kleine Anmerkung, entstanden aus der Frage eines der regelmäßigen Leser der Seite. Wenn Sie eine Anwendungsschnittstelle unter QML entwickeln, müssen Sie zum Positionieren von Objekten in GridLayout die Funktionalität von Layout. verschachtelten Eigenschaften verwenden, wie zum Beispiel:

• Layout.row - gibt die Zeile an, in der sich das Objekt befindet;
• Layout.column - gibt die Spalte an, in der sich das Objekt befindet;
• Layout.rowSpan - gibt an, um wie viele Zeilen das Objekt gedehnt werden soll;
• Layout.columnSpan - gibt an, auf wie viele Spalten das Objekt ausgedehnt werden soll;
• Layout.minimumWidth - Mindestbreite des Objekts in der Ebene;
• Layout.minimumHeight - Mindesthöhe eines Objekts in einer Ebene;
• Layout.preferredWidth - die bevorzugte Breite des Objekts in der Ebene;
• Layout.preferredHeight - die bevorzugte Höhe des Objekts in der Ebene;
• Layout.maximumWidth - maximale Breite des Objekts in der Ebene;
• Layout.maximumHeight - maximale Höhe des Objekts in der Ebene;
• Layout.fillWidth - Füllbreite;
• Layout.fillHeight - Füllhöhe;
• Layout.alignment - Ausrichtung in der Ebene;

GridLayout-Eigenschaften

Außerdem werde ich der Vollständigkeit halber die Eigenschaften von GridLayout angeben und wofür sie verantwortlich sind:

• columnSpacing : real - Abstände zwischen Spalten (Lücke zwischen Objekten);
• Spalten : int - Anzahl der Spalten;
• flow : Enumeration - die Richtung der Objekte im GridLayout
• GridLayout.LeftToRight (Standard) - von links nach rechts
• GridLayout.TopToBottom - von oben nach unten
• layoutDirection : Enumeration - die Richtung der Enumeration von Objekten mit einem gegebenen Fluss
• Qt.LeftToRight (Standard) - von links nach rechts
• Qt.RightToLeft - von rechts nach links
• rowSpacing : real - Abstände zwischen Zeilen (Lücke zwischen Objekten);
• rows : int - Anzahl der Zeilen;

Wenn wir fragen:

• Fluss: GridLayout.TopToBottom
• layoutDirection: Qt.RightToLeft

Als Ergebnis erhalten wir, dass das erste Element der Zeile ganz oben und das letzte Element der Zeile ganz unten steht. Bei zwei Zeilen stehen die Elemente der ersten Zeile rechts.

Arbeiten mit GridLayout

Um die Positionierung von Elementen in einer Ebene zu demonstrieren, schlage ich folgenden Programmcode vor. In dem sich mehrere Rechtecke über mehrere Zellen erstrecken GridLayout.

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1

ApplicationWindow {
    visible: true
    width: 480
    height: 480
    title: qsTr("Hello World")

   GridLayout {
       id: grid
       anchors.fill: parent

       rows: 3
       columns: 3

       Rectangle {
            color: "red"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 2
            Layout.rowSpan: 1
            Layout.row: 1
            Layout.column: 2
       }

       Rectangle {
            color: "blue"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 1
            Layout.rowSpan: 2
            Layout.row: 1
            Layout.column: 1
       }

       Rectangle {
            color: "green"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 1
            Layout.rowSpan: 2
            Layout.row: 2
            Layout.column: 3
       }

       Rectangle {
            color: "white"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 1
            Layout.rowSpan: 1
            Layout.row: 2
            Layout.column: 2
       }

       Rectangle {
            color: "yellow"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 2
            Layout.rowSpan: 1
            Layout.row: 3
            Layout.column: 1
       }
   }
}

Insgesamt

Das Ergebnis dieses Programmcodes ist in der Abbildung dargestellt. Die obige Logik für das Layout von Objekten gilt auch für andere Objekte Layout.