レイヤードアニメーションでアイテム間にギャップが作成される

Question

を使用して、サイズが変更可能なアイテムの変更可能なリストをレイアウトしています。 挿入/削除をスムーズにアニメーションしたいので、moveトランジションを追加しました。 しかし、アイテム自体のサイズ変更をアニメーション化したいと思っています。

これは、サイズ変更されたアイテムのサイズ変更とアイテムの右への位置変更の2つのアニメーションを作成します。 これにより、収縮しているアイテムと右側にあるアイテムとの間に隙間ができます。 次のコード例（そのサイズを変更する項目を左クリック）で、この効果を見ることができます：

import QtQuick 2.7 
import QtQuick.Window 2.2 

Window { 
    visible: true 
    width: row.width 
    height: row.height 
    Row { 
     id: row 
     move: Transition { 
      NumberAnimation { 
       property: "x" 
       easing.type: Easing.InOutQuad 
       duration: 100 
      } 
     } 

     Repeater { 
      model: ListModel { 
       id: listModel 
       ListElement { 
        itemColor: "red" 
       } 
       ListElement { 
        itemColor: "green" 
       } 
       ListElement { 
        itemColor: "blue" 
       } 
       ListElement { 
        itemColor: "yellow" 
       } 
       ListElement { 
        itemColor: "orange" 
       } 
      } 

      delegate: Rectangle { 
       id: rectangle 
       width: 100 
       height: 100 
       color: modelData 

       MouseArea { 
        anchors.fill: parent 
        acceptedButtons: Qt.LeftButton 
        onClicked: rectangle.width = 400 - rectangle.width 
       } 

       MouseArea { 
        anchors.fill: parent 
        acceptedButtons: Qt.RightButton 
        onClicked: listModel.remove(index) 
       } 

       Behavior on width { 
        PropertyAnimation { 
         easing.type: Easing.InOutQuad 
         duration: 100 
        } 
       } 
      } 
     } 
    } 
} 

そこで問題は、ギャップを回避する方法です。 理想的には、サイズ変更のためにアニメーションを挿入/削除するためにアニメーションを分割したいと思います。しかし、documentation for moveは、それは彼らが原因ポジショナで追加、削除、または他のアイテムの並び替えに変位しているときに移動

• 子項目のために使用されていることを述べているが原因に再配置されている
• 子項目まだ削除およびサイズ変更をアニメーション化しながら、ポジショナ内の他の項目

のリサイズに、どのように私はそのギャップを避けることができますか？

上記の例では、私は削除がQAbstractItemModel誘導体の行削除信号によってトリガーされ、ここで実際のコードを投稿することができないなどの問題を示すための最小限の方法であることを に注意してください。

Answer 1

あなたのmoveプロパティによってギャップが作成され、これもあなたのPropertyAnimationを妨害します。そのプロパティを削除する必要があります。

私はGridViewをラップし、アニメーションを処理するための組み込みプロパティを使用しました。たとえば、removeは定義を定義し、displacedはアイテムが移動したときの動きをアニメートします。あなたがpopulate、addようGridViewとListViewで複数のプロパティを見つけることができますViewTransitionのドキュメントでhttp://doc.qt.io/qt-5/qml-qtquick-gridview.html#remove-prop

：たとえば

import QtQuick 2.7 
import QtQuick.Window 2.2 

Window { 
    visible: true 
    width: 100*listModel.count 
    height: 100 

    ListModel { 
     id: listModel 
     ListElement { 
      itemColor: "red" 
     } 
     ListElement { 
      itemColor: "green" 
     } 
     ListElement { 
      itemColor: "blue" 
     } 
     ListElement { 
      itemColor: "yellow" 
     } 
     ListElement { 
      itemColor: "orange" 
     } 
    } 

    GridView { 
     model: listModel 
     anchors.fill: parent 

     remove: Transition { 
      PropertyAnimation { 
       easing.type: Easing.InOutQuad 
       duration: 100 
       property: "width" 
       to: 0 
      } 
     } 

     displaced: Transition { 
       NumberAnimation { 
        properties: "x,y" 
        easing.type: Easing.InOutQuad 
        duration: 100 } 
     } 

     delegate: 
      Rectangle { 
      id: rectangle 
      width: 100 
      height: 100 
      color: modelData 

      MouseArea { 
       anchors.fill: parent 
       acceptedButtons: Qt.LeftButton 
       onClicked: rectangle.width = 400 - rectangle.width 
      } 

      MouseArea { 
       anchors.fill: parent 
       acceptedButtons: Qt.RightButton 
       onClicked: listModel.remove(index) 
      } 

      Behavior on width { 
       PropertyAnimation { 
        easing.type: Easing.InOutQuad 
        duration: 100 
       } 
      } 
     } 
    } 
} 

は、ドキュメントを見てください。