Important: Please read the Qt Code of Conduct -

QML GridView State change on Delegates

  • Hello

    i try to make a state change for grid items. As an example i want to set items whose y value is over a certain level (e.g. half of the window size) to change to a state and thus are marked somehow (e.g. another color is set). And this should happen dynamically. It should work, when i do nothing as well as i flick the grid view. But now some things occur, that i dont understand. 1st: I used the mapping function of the Item class to map items coordinates to containers (root) coordinates. If one start the sample above, and click on element 31, the app outputs the elements position and the mapped position. The items position of 200 is ok, since every cell has a height of 50 and the item starts after the 4th row, but why is the mapped position value 400??? Without flicking shouldnt it be 200 too? How can i get the items position in world coordinates? 2nd question: I wonder, when the state changes are recognized, thus it doesn't seem to be for every element at any time. If one uncomment the console.log method in the isActive-function and slightly flick down, only one element seems to be updated and this happens three times with different values. Why does this happen? And how can i achieve, that this function is evaluated for all items WITHOUT using the grid.moving value?

    Here comes the Sample.qml
    @import Qt 4.7

    Rectangle {
    id: container
    width: 360
    height: 360

    GridView {
        id: grid
        anchors.fill: parent
        model: 500
        cellHeight: 50
        cellWidth: 50
        delegate: Component {
            id: gridDelegate
            Rectangle {
                id: wrapper
                width: 40
                height: 40
                color: "tomato"
                Text {
                    id: wrapperText
                    anchors.centerIn: parent
                    color: "black"
                    text: index
                function isActive()
                    var posInRoot = mapToItem(null, wrapper.x, wrapper.y);
                    //console.log("item",index, "posInRoot.y", posInRoot.y, wrapper.y);
                    return posInRoot.y > container.height/2
                states: State {
                    name: "active"
                    when: isActive()/* && grid.moving*/
                    PropertyChanges {
                        target: wrapper
                        color: "lightsteelblue"
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        var posInRoot = mapToItem(null, wrapper.x, wrapper.y);
                        console.log("item", index, "clicked. wrapper.y =",wrapper.y,"posInRoot.y =", posInRoot.y);


    I hope someone could help me...


Log in to reply