Wie kann ich mithilfe von QML-Layouts skalierte Elemente im Seitenverhältnis in einem Raster anordnen?

Question

Ich habe Rechtecke mit einem bestimmten Seitenverhältnis und Rechtecke mit dem inversen Seitenverhältnis. Ich möchte sie in einem Gitterplan meiner Wahl arrangieren (muss kein reguläres Raster sein, im Gegenteil: Ich würde eine Lösung bevorzugen, wo ich nach Belieben RowLayout s und ColumnLayout s aufbauen kann).

Ich weiß, dass ich Skalierungselemente in meinen Layouts mit Layout.fillHeight und Layout.fillWidth haben kann. Leider kann ich keine Möglichkeit finden, Seitenverhältnisse für meine Rectangle s richtig zu definieren. Ich weiß, QML Image kann es tun (durch seine fillMode Eigenschaft), aber ich sehe keine einfache Weise, es schön zu tun.

Jede Hilfe oder Hinweise in die richtige Richtung würde sehr geschätzt werden!

Hinweis Ich nehme an, QML Layouts ist der Weg zu gehen, aber wenn es eine funktionale Lösung mit nur Anker oder eine einfache /Column Setup, ich bin alles dafür!

Beachten Sie auch, dass ich in der Gegend von Te zwei Arten von Rectangle gleich halten würde es vorziehen, wie es beim Experimentieren scheint, das ist nicht so trivial ...

EDIT

Ein Versuch von dem, was ich meine, abzüglich der Gleichbereichsbeschränkung. Die Rechtecke füllen die Breite, lassen aber in der Höhe Platz, da sie durch das Seitenverhältnis und die gefüllte Breite eingeschränkt sind. Das gleiche sollte für die Höhe gehen, aber ich versage bei der Kombination der beiden.

Answer 1

Sie können die width des Rechtecks ​​zu binden, mit height mit Seitenverhältnis wie folgt verwenden Eigenschaft Bindung

import QtQuick 2.5 
import QtQuick.Window 2.2 
import QtQuick.Layouts 1.0 

Window { 
    id: root 
    visible: true 
    width: 640 
    height: 480 
    title: qsTr("Hello World") 
    property int minWidth: 150 
    property int maxWidth: 300 
    property int minHeight: 150 
    property int maxHeight: 250 
    property int rowWidth: root.width/3 //Change accordingly the width of each child item w.r.t. the width of the root. 
    Row { 
     id: layout 
     anchors.fill: parent 
     spacing: 6 
     Rectangle { 
      color: 'red' 
      // 4/3 is the aspect ratio of the first Rectangle 
      height: (3*width/4)<root.minHeight ? root.minHeight : ((3*width/4)>root.maxHeight ? root.maxHeight : 3*width/4) 
      width: (root.rowWidth) < root.minWidth ? root.minWidth : (root.rowWidth > root.maxWidth ? root.maxWidth : root.rowWidth) 
      Text { 
       anchors.centerIn: parent 
       text: parent.width + 'x' + parent.height 
      } 
     } 
     Rectangle { 
      color: 'green' 
      // 3/4 is the aspect ratio of the second Rectangle 
      height: (4*width/3)<root.minHeight ? root.minHeight : ((4*width/3)>root.maxHeight ? root.maxHeight : 4*width/3) 
      width: (root.rowWidth) < root.minWidth ? root.minWidth : (root.rowWidth > root.maxWidth ? root.maxWidth : root.rowWidth) 
      Text { 
       anchors.centerIn: parent 
       text: parent.width + 'x' + parent.height 
      } 
     } 
    } 
}