Динамически репарация объектов в QML не выполняется при начальной загрузке

Question

Я пытаюсь динамически обновлять объекты QML, сгенерированные в ретрансляторе, в соответствии с данными, которые они наследуют от своей модели.

Это работает как шарм - с одним уловом. Когда объект генерируется в первый раз, он автоматически возвращается к родительскому элементу Repeater после, поскольку объект ParentChange состояния вносит свои изменения. Запустите следующий QML-файл в средстве просмотра QML, обращая внимание на порядок сообщений консоли, чтобы увидеть, что я описываю.

После того, как вы нажали на каждый из объектов, они ведут себя так, как ожидалось.

import QtQuick 1.1 

Rectangle { 
    id: container 
    height: 300 
    width: 300 

    signal completed 

    ListModel { 
     id: fooModel 
     ListElement { data: "red" } 
     ListElement { data: "red" } 
     ListElement { data: "blue" } 
    } 

    Component.onCompleted: { 
     console.log("Rect Completed!") 
     container.completed() 
    } 

    // The object I want to dynamically move 
    Component { 
     id: delg 
     Rectangle { 
      id: moveable 
      height: 40; width: 100 
      border.width: 1; border.color: "black" 
      state: model.data 
      color: state 

      // The following code makes it work, but feels very hackish 
      /*Connections { 
       target: container 
       onCompleted: { 
        moveable.parent = moveable.state == "red" ? red_col : blue_col 
       } 
      }*/ 

      onStateChanged: { console.log("New state: " + state) } 
      onParentChanged: { console.log("New parent: " + parent) } 
      Component.onCompleted: { console.log("Delegate Completed!") } 


      MouseArea { 
       anchors.fill: parent 
       onClicked: { 
        // I know this is bad to do, but in my REAL application, 
        // the change is triggered through the model, not the qml 
        // object 
        moveable.state = (moveable.state == "red" ? "blue" : "red") 
       } 
      } 

      states: [ 
       State { 
        name: 'red' 
        ParentChange { target: moveable; parent: red_col; x: 0 } 
       }, 
       State { 
        name: 'blue' 
        ParentChange { target: moveable; parent: blue_col; x: 0 } 
       } 
      ] 

      transitions: [ Transition { 
        ParentAnimation { 
         NumberAnimation { properties: 'x,y,height,width' } 
        } 
      }] 
     } 
    } 

    // Generates the Objects 
    Repeater { 
     id: repeat 
     model: fooModel 
     delegate: delg 
    } 

    // Display 
    Row { 
     spacing: 100 
     Column { 
      id: red_col 
      spacing: 10 
      width: 100; height: 300 
      move: Transition { NumberAnimation { properties: "y" } } 
      add: Transition { NumberAnimation { properties: "y" } } 
     } 
     Column { 
      id: blue_col 
      spacing: 10 
      width: 100; height: 300 
      move: Transition { NumberAnimation { properties: "y" } } 
      add: Transition { NumberAnimation { properties: "y" } } 
     } 
    } 

} 

Я выяснил способ исправления поведения, но это не очень. (См. Прокомментированный код «Соединения» выше для этого исправления).

Есть ли более чистый/менее храбрый способ выполнить то же самое, что я здесь пытаюсь?

Answer 1

Простой способ сделать это, размещая дополнительно Item под вашим делегатом. Это приведет к тому, что Repeater перейдет в Item, и ваш собственный код установит новый родительский элемент его дочернего элемента, ваш элемент Rectangle. Например:

import QtQuick 1.1 
Rectangle { 
    id: container 
    height: 300 
    width: 300 

    signal completed 

    ListModel { 
     id: fooModel 
     ListElement { data: "red" } 
     ListElement { data: "red" } 
     ListElement { data: "blue" } 
    } 

    Component.onCompleted: { 
     console.log("Rect Completed!") 
     container.completed() 
    } 

    // The object I want to dynamically move 
    Component { 
     id: delg 
     Item { 
      Rectangle { 
       id: moveable 
       height: 40; width: 100 
       border.width: 1; border.color: "black" 
       state: model.data 
       color: state 

       // The following code makes it work, but feels very hackish 
       /*Connections { 
        target: container 
        onCompleted: { 
         moveable.parent = moveable.state == "red" ? red_col : blue_col 
        } 
       }*/ 

       onStateChanged: { console.log("New state: " + state) } 
       onParentChanged: { console.log("New parent: " + parent) } 
       Component.onCompleted: { console.log("Delegate Completed!") } 


       MouseArea { 
        anchors.fill: parent 
        onClicked: { 
         // I know this is bad to do, but in my REAL application, 
         // the change is triggered through the model, not the qml 
         // object 
         moveable.state = (moveable.state == "red" ? "blue" : "red") 
        } 
       } 

       states: [ 
        State { 
         name: 'red' 
         ParentChange { target: moveable; parent: red_col; x: 0 } 
        }, 
        State { 
         name: 'blue' 
         ParentChange { target: moveable; parent: blue_col; x: 0 } 
        } 
       ] 

       transitions: [ Transition { 
         ParentAnimation { 
          NumberAnimation { properties: 'x,y,height,width' } 
         } 
       }] 
      } 
     } 
    } 

    // Generates the Objects 
    Repeater { 
     id: repeat 
     model: fooModel 
     delegate: delg 
    } 

    // Display 
    Row { 
     spacing: 100 
     Column { 
      id: red_col 
      spacing: 10 
      width: 100; height: 300 
      move: Transition { NumberAnimation { properties: "y" } } 
      add: Transition { NumberAnimation { properties: "y" } } 
     } 
     Column { 
      id: blue_col 
      spacing: 10 
      width: 100; height: 300 
      move: Transition { NumberAnimation { properties: "y" } } 
      add: Transition { NumberAnimation { properties: "y" } } 
     } 
    } 
}