QMLレイアウトを使用して、縦横比のスケーリングされたアイテムをグリッドに配置するにはどうすればよいですか？

Question

私はあるアスペクト比の長方形と逆のアスペクト比の長方形を持っています。私はそれらを私の選択したグリッドレイアウトに配置したいと思います（逆の規則的なグリッドである必要はありません：私はRowLayoutとColumnLayoutを自由に構築できるソリューションを好むでしょう）。

私はLayout.fillHeightとLayout.fillWidthを使って自分のレイアウトにアイテムをスケーリングすることができます。残念ながら、Rectangleのアスペクト比を適切に定義する方法はありません。私はQML Imageが（それのfillModeプロパティを介して）それを行うことができます知っているが、私はシンプルにそれをやっている方法を参照してください。

正しい方向への助けや指導をいただければ幸いです。私はQMLのレイアウトを想定してい

注意が移動するための方法であるが、ちょうどアンカーまたはプレーン/Columnセットアップと機能的解決策がある場合、私はそれをすべてです！

はまた、それは試しながら、これはそれほど簡単ではありません...

EDIT

試み思えるように私は、同じRectangleのTE 2種類の面積を維持することを好むことに注意してください私が意味することから、等しい面積の制約を引いたものです。長方形は幅を埋めますが、アスペクト比と塗りつぶし幅によって制約されるため、高さにスペースが残ります。同じ高さに行く必要がありますが、私は2つの組み合わせで失敗しています。

Answer 1

次のように、アスペクト比を使用してheightを持つ矩形のwidthをバインドするバインディングプロパティを使用することができ、

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 
      } 
     } 
    } 
}