Eliminar elementos secundarios de la Cuadrícula QML

Question

Quiero recorrer los elementos secundarios de una Cuadrícula QML y destruir cada uno de ellos utilizando Javascript.

Grid { 
    id: contentGrid 
    spacing: 10 

    ImageItem { imageSource: "file:/foo.jpeg" } // destroy this 
    ImageItem { imageSource: "file:/bar.jpeg" } // destroy this as well 
} 

Traté de hacer algo como esto pero no está funcionando hasta el momento.

for(var i = 0; contentGrid.children.length() < i; i++) { 
    contentGrid.childAt(i).destroy(); 
} 

Answer 1

Usted tiene una serie de problemas en su intento por encima de ... En primer lugar, usted tendrá que recorrer hacia atrás, ya que estaría cambiando el contenido de los hijos hacia abajo a medida que avance (es decir, si se elimina # 1, número # 2 se convertiría en el niño # 1 y luego iría a eliminar # 2, que sería el niño viejo # 3).

En segundo lugar, debe acceder a los niños de manera diferente. La función childAt() es para ubicar un niño en una x, y particular en la pantalla, no una posición en una lista.

Tal vez puedas probar:

import QtQuick 1.0 

Rectangle { 
    width: 400 
    height: 400 
    Grid { 
    id: contentGrid 
    spacing: 10 

    Text { text: "foo" } // destroy this 
    Text { text: "bar" } // destroy this as well 
    } 
    MouseArea { 
    anchors.fill: parent 
    onClicked: { 
     for(var i = contentGrid.children.length; i > 0 ; i--) { 
     console.log("destroying: " + i) 
     contentGrid.children[i-1].destroy() 
     } 
    } 
    } 
} 

Answer 2

o puede simplemente decir: grid.children = "";

Answer 3

sólo quiero copiar & pegar un fragmento de la documentación:

Tenga en cuenta que nunca se debe manualmente eliminar objetos creados dinámicamente por fábricas de objetos QML de conveniencia (como Loader y Repeater). Además, debe evitar eliminar objetos que no creó usted mismo de forma dinámica.

Entonces, la respuesta es ¡NO DEBERÍAS hacerlo! Intente crear el objeto dinámicamente si desea eliminarlo más tarde.

Documentation

Answer 4

Como complemento a la respuesta de Atron, tenga en cuenta que la documentation menciona explícitamente que destroy ing un objeto de forma estática creada manualmente no está permitido:

Item { 
    SelfDestroyingRect { 
     // ... 
    } 
} 

Esto daría lugar a un error, ya que los objetos solo pueden ser destruidos dinámicamente si fueron creados dinámicamente.

Por lo tanto, estoy de acuerdo con mshefiti que la solución correcta (para los artículos que no se crean de forma dinámica) es:

grid.children = [];