[Interest] QML GridView and animating a delegates x position

[Sebastian Wannemaker]

Hi,

I am unable to figure out how to add an animation for the delegate item's x
position. My interest is not regarding (add|move|remove)(Displaced) nor
populate. I am talking about the view's "internal" re-layouting when e.g.
the cell size changes. For an illustration please see:

Rectangle {
    width: 200
    height: 250

    Slider {
        id: slider
        minimumValue: 50
        maximumValue: 120
        value: 50
        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
        }
    }

    GridView {
        id: grid
        clip: true
        anchors {
            top: slider.bottom
            left: parent.left
            right: parent.right
            bottom: parent.bottom
        }
        cellWidth: slider.value
        cellHeight: slider.value

        model: ListModel {
            id: model
            ListElement {text: "1"}
            ListElement {text: "2"}
            ListElement {text: "3"}
            ListElement {text: "4"}
            ListElement {text: "5"}
            ListElement {text: "6"}
            ListElement {text: "7"}
            ListElement {text: "8"}
            ListElement {text: "9"}
        }

        delegate:
            Rectangle {
            id: delegate;
            height: grid.cellHeight
            width: grid.cellWidth
            Rectangle {
                width: parent.width - 10
                height: parent.height - 10
                anchors.centerIn: parent
                border {width: 1; color: "#666666"}
                color: index == grid.currentIndex ? "#00e400" : "#f7f7f7"
                Text {text: text; anchors.centerIn: parent}
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        grid.currentIndex = index
                    }
                }
                Behavior on color {
                    ColorAnimation { duration: 500 }
                }
                Behavior on width {
                    NumberAnimation { duration: 500 }
                }
                Behavior on x {
                    NumberAnimation { duration: 500 }
                }
            }
        }
    }
}

Move the slider: While the Behavior on color and width works, a Behavior on
x fails. With increasing size, the items on the edge just jumps to the next
row's beginning. How can I animate such a jump?

Thanks for your help!
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20170814/4c3d98c3/attachment.html>