I've finally found a working solution, but I find the code quite ugly, so any suggestion to make it look better would be highly appreciated.
Main.qml (custom views are represented here by rectangles of different colors) :
@
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQml.Models 2.1
ApplicationWindow {
id: window
title: qsTr("Hello World")
width: 640
height: 480
ObjectModel {
id: objectsList
Component { id: view1; Rectangle { width: 100; height: 25; color: "red" } }
Component { id: view2; Rectangle { width: 100; height: 25; color: "blue" } }
Component { id: view3; Rectangle { width: 100; height: 25; color: "green" } }
Component { id: view4; Rectangle { width: 100; height: 25; color: "yellow" } }
Component { id: view5; Rectangle { width: 100; height: 25; color: "cyan" } }
Component { id: view6; Rectangle { width: 100; height: 25; color: "magenta" } }
}
DelegateModel {
id: visualModel
delegate: Delegate {}
model: objectsList.count
}
ListView {
width: 200; height:200
model: visualModel.parts.list
}
GridView {
x: 200; width: 200; height:200
cellHeight: 50
model: visualModel.parts.grid
}
}
@
Delegate.qml :
@
import QtQuick 2.1
Package {
Item { id: inListContainer; width: 200; height: 25; Package.name: 'list' }
Item { id: inGridContainer; width: 100; height: 50; Package.name: 'grid' }
Item {
id: wrapper
width: 200; height: 25
Loader {
anchors.fill: parent
sourceComponent: objectsList.children[index]
}
MouseArea {
anchors.fill: parent
onClicked: {
if (wrapper.state == 'inList')
wrapper.state = 'inGrid';
else
wrapper.state = 'inList';
}
}
state: 'inList'
states: [
State {
name: 'inList'
ParentChange { target: wrapper; parent: inListContainer }
},
State {
name: 'inGrid'
ParentChange {
target: wrapper; parent: inGridContainer
x: 0; y: 0; width: inGridContainer.width; height: inGridContainer.height
}
}
]
transitions: [
Transition {
ParentAnimation {
NumberAnimation { properties: 'x,y,width,height'; duration: 300 }
}
}
]
}
}
@
