Kann Flow QML-Komponente aktualisiert/aktualisiert werden, wenn das Element entfernt wurde?

Question

Ich habe ein Flow-Layout, wo ich Elemente dynamisch auf Benutzeraktionen hinzufügen. Auf die gleiche Weise entferne ich diese Elemente bei Benutzeraktionen. Die Flow-QML-Komponente scheint wie erwartet zu funktionieren, bis ein Element entfernt wird. Das Objekt selbst wird entfernt, aber der Platz, den es belegt hat, ist leer. Meine Intuition sagt mir, dass das grafische Element selbst gelöscht wurde, aber die Ansicht wird nicht aktualisiert, wenn Elemente entfernt werden.

Ist das dynamische Löschen von untergeordneten Elementen außerhalb des Bereichs der Flow-Komponente? Gibt es ein anderes Layout, das sich gleich verhält? GridLayout scheint am nächsten zu sein, aber untergeordnete Elemente werden nicht automatisch umbrochen, wenn die Größe des Layouts geändert wird.

Gibt es einen nicht-hack Weg, Flow zu ermöglichen, neu anzuordnen, wenn das untergeordnete Element deaktiviert ist? Wenn nicht, und wenn GridLayout mein bestes Bild ist, wie kann ich es so einrichten, dass es seine untergeordneten Elemente wie Flow umschließt?

Der folgende Code zeigt, was ich erreichen möchte:

Item { 
    id: root 

    Flow { 
     id: layout 
     anchors.fill: parent 

     Loader { id: loader } 
    } 

    MouseArea { 
     anchors.top: parent.top 
     height: parent.height/2 
     width: parent.width 
     onClicked: loader.source = "SomeQmlComponent.qml" 
    } 

    MouseArea { 
     anchors.bottom: parent.bottom 
     height: parent.height/2 
     width: parent.width 
     onClicked: loader.source = "" 
    } 
} 

Answer 1

nicht Loader innen Flow anwenden. In Ihrem Fall werden die Artikel an Loader und nicht an Flow weitergegeben, so dass Sie alle Vorteile davon verlieren. In der normalen Weise werden Elemente hinzugefügt und entfernt ohne Problem:

import QtQuick 2.7 
import QtQuick.Window 2.2 

Window { 
    width: 600 
    height: 600 
    visible: true 

    Component { 
     id: element 
     Rectangle { 
      width: Math.round(Math.random() * 100) + 50 
      height: Math.round(Math.random() * 100) + 50 
      color: Qt.rgba(Math.random(),Math.random(),Math.random(),1) 
     } 
    } 

    Flow { 
     id: flow 
     spacing: 2 
     anchors.fill: parent 
     add: Transition { 
      NumberAnimation { properties: "x,y"; easing.type: Easing.OutBack } 
     } 
     move: add 
    } 

    Timer { 
     id: timer 
     property bool is_add: true 
     interval: 300 
     repeat: true 
     running: true 
     onTriggered: { 
      if(timer.is_add) { 
       element.createObject(flow); 
       if(flow.children.length > 20) { 
        timer.is_add = false; 
       } 
      } else { 
       var item = flow.children[0]; 
       item.destroy(); 
       if(flow.children.length <= 1) { 
        timer.is_add = true; 
       } 
      } 
     } 
    } 
}