How to make entire GridView row expand vertically

Question

So what I want to do is expand a single GridView row on a mouse click. It should look somewhat similar to this. Just imagine the rows are equally distant from each other before the mouse click, and then the row expands vertically, when the menu is closed the rows then return to their normal spacing.

Would this be possible with the standard GridView, or would I have to create my own? I played around with the cellHeight, but that changes the height of every row, not just the current one.

Answer 1

It's probably going to be easier if you don't use the GridView and instead use a column containing three rows. You can simply make the middle row invisible when not needed. This will allows the UI to be more flexible.

This should like like this:

property bool informationsVisible: false
Column {
    anchors.fill: parent
    Row {
        id: firstRow
        Repeater {
            model: firstHalfOfYourData
            delegate: MouseArea {
                //Your item representation
            }
        }
    }

    Row {
        id: informationsRow
        visible: informationsVisible
            //Display informations on the selected element here
    }

    Row {
        id: secondRow
        Repeater {
            model: secondHalfOfYouData
            delegate: MouseArea {
                //Your item representation
            }
        }
    }
}