Belirli olmayan bir boyutta qml öğesi için arka plan nasıl ayarlanır?

Question

tamamen ebeveyn doldurmak sadece kimin çapalar çocuk dikdörtgen olması bir QML öğeye bir arka plan ayarlamak için basit yolu: Bu sadece o ana öğesi çalışır Ancak

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

    // other items 

} 

bir büyüklüğe (genişliğindedir ve yükseklik) tanımlandı.

Bunun için sabit bir boyut tanımlamadan bir kapsayıcıya sahip olmak isterim. Çocuklar sabit boyutlara sahip olacaklar, ancak çocuklar boyutlarını dinamik olarak değiştirebildiklerinden, ebeveyn kabının büyümesini ve büzülmesini sağlayacak şekilde olmasını istiyorum.

Çocukları bir sıraya sabitlerseniz, her şey arka plan dışında iyi çalışır.

Benzer bir konu hakkında a question a while ago vardı, ancak sorun, tüm çocukların yan yana görüntülenmek yerine örtüştüğüydi. Bu benim sorunum değil, çünkü onları bir sırada (veya bir RowLayout kullanarak) sabitleyerek bunları doğru görüntüler.

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 

    } 

} 

Ancak, arka plan tüm çocukların sabit boyuta sahip rağmen ebeveyn, tanımlanmış bir boyuta sahip olmadığı için gösterilmez ve dün çocuğun sağ çapa belirtirseniz doğru olmak Ebeveynin, hala doğru şekilde görüntülenir. Sanırım bu, ebeveynin büyüklüğünün işleyici tarafından bilinmesi gerektiği anlamına geliyor.

Answer 1

(Bir Item veya RowLayout yerine Rectangle kullanırsanız, hiçbir şey bir RowLayout kullanırken. Aslında ardışık ankrajı ihmal, ancak bu arka plan ile sorunumu değişmez değiştirir) Her şeyden önce, kapınızın bir arka plana sahip olmasını istiyorsanız, Rectangle'u Rectangle yerine Rectangle yapmak zorundasınız. Ayrıca, düzeni 'Layout' içinde kullanmazsınız, çünkü düzen kendi kurallarına göre çocuklarını yönetir. o kadar feryat kodda gibi tüm çocukları içerir büyür beri

sorusuna gelince, Layout birini kullanabilirsiniz: Başka bir çözüm kullanmaktır

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