Qml split Gridview along a row - qt

Question

I am trying to create a QML gridview of rectangles(images) such that when I click on an element, the view split right below that element. I would lie to display some text in this split section that will then appear.

Answer 1

I would do that with GridLayout instead of GridView since it allows columns/rows spanning, for example:
import QtQuick 2.10
import QtQuick.Controls 1.4
import QtQuick.Window 2.10
import QtQuick.Layouts 1.12
Window {
visible: true
width: 400
height: 600
title: qsTr("test")
Component {
id: commonItem
Rectangle {
anchors.fill: parent
color: "#DEDEDE"
Text { anchors.centerIn: parent; text: "Click me" }
}
}
Component {
id: selectedItem
Rectangle {
anchors.fill: parent
color: "#999"
Text { anchors.centerIn: parent; text: "I'm selected item" }
}
}
GridLayout {
anchors.centerIn: parent
columns: 3
columnSpacing: 2
rowSpacing: 2
Repeater {
model: 6
delegate: Item {
id: item
property int w: 100
property int loaderColumns: 1
property var component: undefined
Layout.columnSpan: loaderColumns
Layout.preferredWidth: w
Layout.preferredHeight: 100
state: "collapsed"
Loader {
id: loader
anchors.fill: parent
sourceComponent: item.component
}
states: [
State {
name: "collapsed"
PropertyChanges { target: item; component: commonItem }
},
State {
name: "expanded"
PropertyChanges { target: item; component: selectedItem; }
PropertyChanges { target: item; loaderColumns: 3; }
PropertyChanges { target: item; w: 304; }
}
]
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
item.state = (item.state == "collapsed") ? "expanded" : "collapsed"
}
}
Behavior on w {
NumberAnimation {
duration: 1000
easing {
type: Easing.OutElastic
amplitude: 1.0
period: 0.5
}
}
}
}
}
}
}