リピータのデリゲートの高さが

Question

を変更したときのColumnLayoutを調整して、私は、ファイルを設定したが、以下の内容でtest1.qmlと呼ば：

import QtQuick 2.6 
import QtQuick.Layouts 1.3 

Rectangle { 
    width: 800; height: 1000; 

    ColumnLayout { 
     anchors.centerIn: parent 

     // Header goes here 

     Repeater { 
      model: 3 
      delegate: MyRectangle { 
       width: 150 
       height: width 
       color: "#44ff0000" 
      } 
     } 

     // Footer goes here 

    } 
} 

私はまた、セットアップファイルがが定義されtest2.qmlと呼ばれてきました次のように：

import QtQuick 2.6 
import QtQuick.Layouts 1.3 

Rectangle { 
    width: 800; height: 1000; 

    ColumnLayout { 
     anchors.centerIn: parent 

     // Header goes here 

     Repeater { 
      model: 3 
      delegate: Column { 
       MyRectangle { 
        width: 150 
        height: width 
        color: "#44ff0000" 
       } 
      } 
     } 

     // Footer goes here 

    } 
} 

最後に、MyRectangle.qmlは、以下の内容があります。

import QtQuick 2.6 

Rectangle { 
    MouseArea { 
     anchors.fill: parent 
     onClicked: { 
      parent.height += 50 
     } 
    } 
} 

私の目標は、MyRectangleのインスタンスがクリックされたとき、その高さが変化することで、のColumnLayoutはアイテムがそれらの間隔を維持するように拡大すべきです。私はtest.qmlを実行すると

は、結果は、私は、彼らがMyRectangle重複のインスタンスをクリックしている互いにように、その中で、期待するものではありません。しかし、test2.qmlは、希望の動作を与え、MyRectangleのインスタンスは、間隔をColumnLayoutのように維持します。

derMの依頼で、以下のGIFがこれをより明確に説明するのに役立つと思います。

test1.qmlの（望ましくない）行動：

test2.qmlの（所望の）行動：

それはなぜ私はオブジェクトをの列にラップする必要があります。赤い結果？

Answer 1

理由は奇妙に聞こえるかもしれません：

[...]Layout -familyは、オブジェクトを配置することではなく、また、それらのサイズを変更するだけではありません。あなたはそれのサイズを設定したり、変更したりすることはありません。

利用可能な添付プロパティを使用してサイズを設定しない場合は、ItemのimplicitWidth/Heightが使用されます。

暗黙的なディメンションを設定していない場合、新しいアイテムをレイアウトに追加すると、その暗黙的なディメンションは、設定されたディメンションと等しくなるように設定されます。しかし、これは束縛ではありません！したがって、今すぐheightを更新すると、implicitHeightは元のサイズのままになるため、レイアウトは変更に反応しません。

デリゲートにColumnを追加すると、状況が変わります。Columnは、その子の外接矩形に合わせてimplicitHeightを更新します。Rectangleの高さのサイズを変更すると、ColumnはimplicitHeightに適応し、Layoutは変更に反応します。

今、あなたは、次のソリューションを持っている：

1. はサイズヒントを設定し、変更し、Layout添付プロパティを使用してください。
2. heightの代わりにimplicitHeightデリゲートを使用してください。これは意味的には間違っているかもしれません。
3. 追加のレイアウト機能（アイテムの添付プロパティやサイズ変更など）を必要としない場合は、ColumnLayoutを使用せず、通常のColumnを使用しないでください。これは問題のようです。

---

Column { 
    anchors.centerIn: parent 
    spacing: 5 

    // Header goes here 

    Repeater { 
     model: 3 
     delegate: 
      Rectangle { 
       width: 150 
       height: width 
       color: "#44ff0000" 
       MouseArea { 
        anchors.fill: parent 
        onClicked: { 
         console.log(parent.implicitHeight) 
         parent.height += 50 
        } 
       } 

     } 
    } 
    // Footer goes here 

}