| import QtQuick 2.0 |
| |
| Rectangle { |
| id: root |
| width: 200 |
| height: 200 |
| |
| property int duration: 100 |
| property int count: grid.count |
| |
| Component { |
| id: myDelegate |
| Rectangle { |
| id: wrapper |
| |
| property string nameData: name |
| property bool removalStarted: false |
| property real minX: 0 |
| property real minY: 0 |
| |
| onXChanged: if (removalStarted) grid.recordPosition(x, y) |
| onYChanged: if (removalStarted) grid.recordPosition(x, y) |
| |
| objectName: "wrapper" |
| width: 80 |
| height: 80 |
| border.width: 1 |
| Column { |
| Text { text: index } |
| Text { |
| text: wrapper.x + ", " + wrapper.y |
| } |
| Text { |
| id: textName |
| objectName: "textName" |
| text: name |
| } |
| } |
| color: GridView.isCurrentItem ? "lightsteelblue" : "white" |
| |
| GridView.onRemove: SequentialAnimation { |
| PropertyAction { target: wrapper; property: "removalStarted"; value: true } |
| PropertyAction { target: wrapper; property: "GridView.delayRemove"; value: true } |
| NumberAnimation { target: wrapper; property: "scale"; to: 0.5; duration: root.duration; easing.type: Easing.InOutQuad } |
| PropertyAction { target: wrapper; property: "GridView.delayRemove"; value: false } |
| PropertyAction { target: grid; property: "animationDone"; value: true } |
| } |
| |
| } |
| } |
| |
| GridView { |
| id: grid |
| |
| property int displaceTransitionsDone: 0 |
| property bool animationDone: false |
| property point minimumPosition: Qt.point(0, 0) |
| |
| signal delegateMoved(real x, real y) |
| |
| objectName: "grid" |
| focus: true |
| anchors.fill: parent |
| cacheBuffer: 0 |
| cellWidth: 80 |
| cellHeight: 80 |
| model: testModel |
| delegate: myDelegate |
| |
| displaced: Transition { |
| id: transition |
| SequentialAnimation { |
| NumberAnimation { |
| properties: "x,y" |
| duration: root.duration |
| easing.type: Easing.OutBounce |
| } |
| ScriptAction { script: grid.displaceTransitionsDone += 1 } |
| } |
| } |
| |
| function recordPosition(index, x, y) { |
| if (x < minimumPosition.x || y < minimumPosition.y) { |
| minimumPosition = Qt.point(x, y) |
| } |
| } |
| } |
| |
| Rectangle { |
| anchors.fill: grid |
| color: "lightsteelblue" |
| opacity: 0.2 |
| } |
| } |
| |
