2016-02-22 5 views
8

Zum Beispiel funktioniert das:Qt5 QML, wann ein ColumnLayout vs Column zu verwenden?

import QtQuick 2.5 
import QtQuick.Controls 1.4 
import QtQuick.Controls.Styles 1.4 
import QtQuick.Layouts 1.2 

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

    function thingWidth() 
    { 
     return width*80/100 
    } 

    Column 
    { 
     spacing: 10; 
     anchors.horizontalCenter: parent.horizontalCenter 

     Thing { color: "red"; width: thingWidth(); } 
     Thing { color: "yellow"; width: thingWidth(); } 
     Thing { color: "green"; width: thingWidth(); } 
    } 

} 

Aber ändern Column-ColumnLayout und es nicht (Fenster Ändern der Größe verursacht Layout schief gehen).

Hilfe, danke.

EDIT 1:

Hier ist auch Thing.qml wie gewünscht,

import QtQuick 2.0 

Item { 
    property alias color: rectangle.color 
    width: 50; height: 50 

    Rectangle 
    { 
     id: rectangle 
     border.color: "white" 
     anchors.fill: parent 
    } 
} 

Es sieht aus wie meine Post meist Code ist. Ja, Kindermädchen es tut! Das liegt daran, dass Leute hier ihren Code eingeben.

+1

Bitte entweder a) stellen Sie den Code für 'Thing', oder b) ersetzen Sie sie durch etwas, auf das wir Zugriff haben, wie' Rectangle'. – Mitch

+0

erledigt. Entschuldigung über das Kindermädchen –

Antwort

3

Wie aus der documentation von Column:

Spalte ist ein Typ, der seine untergeordneten Elemente entlang einer einzigen Spalte positioniert. Es kann als eine bequeme Möglichkeit verwendet werden, um eine Reihe von Elementen vertikal zu positionieren, ohne Anker zu verwenden.

Darüber hinaus erleichtert es Übergänge beim Einfügen, Löschen und so weiter. Es fügt auch properties zu den Einzelteilen hinzu, um ihnen Begriffe über ihre Positionen zu geben.

Auf der anderen Seite, this die Dokumentation von GridLayout ist (bitte beachten Sie, dass ColumnLayout ein Convenience-Dienstprogramm ist, aber es ist nichts anderes als ein Gitter mit einer Spalte, wie aus seinem documentation).
Es hat eine völlig andere Reihe von Eigenschaften, sowie angefügte Eigenschaften, vollständig auf die Anordnung der Elemente ausgerichtet.

Ich denke sowieso, dass die interessanteste Seite aus der Dokumentation ist that eins.
Ich nenne es einfach:

Stellungs Artikel Container-Artikel sind, die die Positionen der Elemente in einer deklarativen Benutzeroberfläche verwalten. Positionierer verhalten sich ähnlich wie Layout-Manager, die mit Standard-Qt-Widgets verwendet werden, mit der Ausnahme, dass sie auch eigenständige Container sind.

Positionierer erleichtern die Arbeit mit vielen Elementen, wenn sie in einem regelmäßigen Layout angeordnet werden müssen.

Qt Quick Layouts können auch verwendet werden, um Qt Quick Elemente in einer Benutzerschnittstelle anzuordnen. Sie verwalten sowohl die Positionen als auch die Größen von Elementen auf einer deklarativen Benutzerschnittstelle und sind für veränderbare Benutzerschnittstellen gut geeignet.

Bitte beachten Sie, dass ein Column ein Positioner ist, während ein ColumnLayout ein Layout ist. Wann man sie benutzt, hängt wie immer hauptsächlich von deinem Ziel ab.

+1

Danke für Ihre Antwort. Wie ich es verstehe, können Positionierer wie "Column" die Positionen angegeben werden, aber Layouts wie "ColumnLayout" müssen die Position selbst berechnen. Das Setzen der 'width' in einem' ColumnLayout' ist schlecht, aber in 'Column' ist es in Ordnung. –

+1

Innerhalb der Layouts haben Sie viele interessante angefügte Eigenschaften gemocht 'Layout.preferredwidth'. Bitte beachten Sie die verlinkte Dokumentation. – skypjack

+0

Layouts wurden hinzugefügt, sobald Qt Bildschirme mit sehr unterschiedlichen Größen, d. H. Nach dem Nokia-Alter, unterstützen muss. Tatsächlich haben Sie die 'fill'-Eigenschaft, die in der anderen Implementierung fehlt. Das wird auch in der Dokumentation betont, wenn es sagt, dass sie "gut geeignet für ** resizable ** Benutzeroberflächen" sind. – BaCaRoZzo