不特定のサイズのqmlアイテムの背景を設定するには？ QMLアイテムの背景を設定する

Question

最も簡単な方法は、ちょうどそのアンカー完全に親を埋める子矩形を持つことである。しかし、これはそれだけの作品

Item 
{ 
    width: 320 
    height: 240 
    Rectangle 
    { 
     id: background 
     anchors.fill: parent 
     color: "blue" 
    } 

    // other items 

} 

親アイテムはサイズが（幅と高さ）を定義します。

私はそれのための固定サイズを定義せずにコンテナを持っていたいと思います。子は固定サイズを持ちますが、子のサイズを動的に変更できるので、親コンテナを拡大して収縮させたいと思います。

子供をシーケンスにアンカーすると、バックグラウンドを除いてすべて正常に動作します。

類似のトピックについてはa question a while agoがありましたが、すべての子供が表示されずに重なっていたという問題がありました。それはシーケンスで（またはRowLayoutを使用して）それらを固定すると正しく表示されるため、これは私の問題ではありません。

Item 
{ 
    // I don't want a fixed size here 

    Rectangle 
    { 
     id: background 
     anchors.fill: parent 
     color: "blue" 
    } 


    RowLayout 
    { 
     anchors.fill: parent 

     Item 
     { 
      id: child1 
      anchors.left = parent.left 
      anchors.top: parent.top 

      width:100 
      height:100 
     } 

     Item 
     { 
      id: child2 
      anchors.left = child1.right 
      anchors.top: parent.top 

      width:120 
      height:120 
     } 

     // further children 

    } 

} 

しかし、背景は親が定義されたサイズを持っていないため、すべての子供が固定サイズを持っていますが、表示されていない、と私は最後の子の右のアンカーを指定した場合、右のようにそれでも正しく表示されます。これは、親のサイズをレンダラーが知っているはずであることを意味します。

Answer 1

（私はItemまたはRowLayoutの代わりにRectangle使用している場合は、何もRowLayoutを使用した場合。実は、私はシーケンシャルアンカーを省略することができますが、これはバックグラウンドで私の問題を変更しません変化しません）まず、コンテナにバックグラウンドを持たせたい場合はRectangleをルートにしてRectangleをItemの内側に置く必要があります。また、レイアウトは独自のルールに従って子を管理するので、 'Layout'内でアンカーを使用することはありません。

それは怒鳴るように、コードのように、そのすべての子が含まれているに成長するので、質問については、あなたがLayoutのいずれかを使用できます。

Rectangle { 
    anchors.centerIn: parent 
    width: grid.width + 10 
    height: grid.height + 10 
    color: "orange" 
    GridLayout { 
     anchors.centerIn: parent 
     id: grid 
     columns: 5 
     rowSpacing: 2 
     columnSpacing: 2 
     Repeater { 
      model: 10 + Math.round(Math.random() * 50) 
      Rectangle { 
       width: 20 + Math.round(Math.random() * 50) 
       height: 20 + Math.round(Math.random() * 50) 
       border.width: 1 
       border.color: "#999" 
      } 
     } 
    } 
} 

別の解決策は、Item.childrenRectを使用することです：

Rectangle { 
    id: container 
    anchors.centerIn: parent 
    width: childrenRect.x + childrenRect.width; 
    height: childrenRect.y + childrenRect.height; 
    border.width: 1 
    border.color: "#999" 
    Repeater { 
     model: 10 + Math.round(Math.random() * 50) 
     Rectangle { 
      x: Math.round(Math.random() * 500) 
      y: Math.round(Math.random() * 500) 
      width: 100 + Math.round(Math.random() * 100) 
      height: 100 + Math.round(Math.random() * 100) 
      color: Qt.rgba(Math.random(),Math.random(),Math.random(),1) 
     } 
    } 
} 

は、