How to get an instantiated delegate component from a GridView or ListView in QML
My conundrum, phrased generally, is: through some action outside the GridView, I want to figure out the coordinates of a particular delegate item in the GridView based only on a particular model item or index selected before.
I've got a GridView with a number of items in the model. The GridView's delegate creates a thumbnail view of each item. When clicked, it brings up a detailed, fullscreen view of the item. I'd like a nice transition that shows the thumbnail expanding out from its place in the GridView, and when the detailed view is dismissed, shrinking back down into the GridView in place.
The trick is, the detailed view is itself a delegate of a ListView so you can page between detailed views one screen at a time. This means a solution that simply resizes the GridView's delegate item or something won't work. Also, since you can page to any item in the ListView, returning to the GridView has to be done based only on information available in the model or the model item's index (e.g. I can't store the coords of the MouseArea used to launch the detailed view or something).
The expansion animation is fairly easy, as the delegate item has a MouseArea for the click handler that knows its own placement, so that can be passed out to the function that starts the animation. It's the reverse I can't figure out: from the model item/index in the ListView, how do I figure out the coordinates of the related item in the GridView?
I can't find anything in the docs that would seem to let you have access to a delegate item instance from a model item instance or even an index. The GridView has indexAt() that returns the index based on coordinates. I think I could make do with the reverse, but it doesn't appear to exist.
Here's a more concrete example. Apologies for the length; this is the shortest example code I could come up with that accurately describes my problem:
import QtQuick 1.1
Item {
id: window
width: 400
height: 200
state: "summary"
states: [
State { name: "summary"; },
State { name: "details"; }
]
transitions: [
Transition { from: "summary"; to: "details";
SequentialAnimation {
PropertyAction { target: animationRect; property: "visible"; value: true; }
ParallelAnimation {
NumberAnimation { target: animationRect; properties: "x,y"; to: 0; duration: 200; }
NumberAnimation { target: animationRect; property: "width"; to: 400; duration: 200; }
NumberAnimation { target: animationRect; property: "height"; to: 200; duration: 200; }
}
PropertyAction { target: detailsView; property: "visible"; value: true; }
PropertyAction { target: summaryView; property: "visible"; value: false; }
PropertyAction { target: animationRect; property: "visible"; value: false; }
}
},
Transition { from: "details"; to: "summary";
SequentialAnimation {
PropertyAction { target: summaryView; property: "visible"; value: true; }
// How to animate animationRect back down to the correct item?
PropertyAction { target: detailsView; property: "visible"; value: false; }
}
}
]
Rectangle {
id: animationRect
z: 1
color: "gray"
visible: false
function positionOverSummary(summaryRect) {
x = summaryRect.x; y = summaryRect.y;
width = summaryRect.width; height = summaryRect.height;
}
}
ListModel {
id: data
ListElement { summary: "Item 1"; description: "Lorem ipsum..."; }
ListElement { summary: "Item 2"; description: "Blah blah..."; }
ListElement { summary: "Item 3"; description: "Hurf burf..."; }
}
GridView {
id: summaryView
anchors.fill: parent
cellWidth: 100
cellHeight: 100
model: data
delegate: Rectangle {
color: "lightgray"
width: 95; height: 95;
Text { text: summary; }
MouseArea {
anchors.fill: parent
onClicked: {
var delegateRect = mapToItem(window, x, y);
delegateRect.width = width; delegateRect.height = height;
animationRect.positionOverSummary(delegateRect);
detailsView.positionViewAtIndex(index, ListView.Beginning);
window.state = "details";
}
}
}
}
ListView {
id: detailsView
anchors.fill: parent
visible: false
orientation: ListView.Horizontal
snapMode: ListView.SnapOneItem
model: data
delegate: Rectangle {
color: "gray"
width: 400; height: 200;
Column {
Text { text: summary; }
Text { text: description; }
}
MouseArea {
anchors.fill: parent
onClicked: {
// How do I get the coordinates to where animationRect should return?
summaryView.positionViewAtIndex(index, GridView.Visible);
window.state = "summary";
}
}
}
}
}
Any ideas? It's possible I'm just going about this the wrong way. If what I'm trying to do specifically is impossible, is there some other way I should be architecting this? Thanks!
Edit: Some ideas I've had (none of which I believe are feasible):
Keep a list of all the delegate items created, using
Component.onCompletedandComponent.onDestruction. To be useful, it should be a map of model item or index => delegate item. Trouble is, the basic types docs (especially variant) seem to indicate that this kind of map is impossible to create in pure QML. So it sounds like this would mean creating this map as a C++ class and using that in QML withonCompleted/onDestructionwithin the delegate component to keep it up to date. Seems a little dangerous and heavy-handed for something that should be simple.This mailing list post seems to indicate that Flickable's
contentItemproperty can be used to enumerate the delegate items. Then I found this post calling that out as bad practice. I'm still looking into it, but I'm skeptical this will be a legitimate solution. Seems way too hacky to work reliably.
That's all I've got so far.
Answer
After some investigation, it turns out that contentItem does hold the instantiated delegates for a Flickable. As I said above, I'm skeptical that this is really the best way to do this, or even a good way period, but it does seem to work. I'll post the full code for this hacky solution below, but I'm still hoping there's a better way. The really important bit is the new getDelegateInstanceAt() function in the GridView.
import QtQuick 1.1
Item {
id: window
width: 400
height: 200
state: "summary"
states: [
State { name: "summary"; },
State { name: "details"; }
]
transitions: [
Transition { from: "summary"; to: "details";
SequentialAnimation {
PropertyAction { target: animationRect; property: "visible"; value: true; }
ParallelAnimation {
NumberAnimation { target: animationRect; properties: "x,y"; to: 0; duration: 200; }
NumberAnimation { target: animationRect; property: "width"; to: 400; duration: 200; }
NumberAnimation { target: animationRect; property: "height"; to: 200; duration: 200; }
}
PropertyAction { target: detailsView; property: "visible"; value: true; }
PropertyAction { target: summaryView; property: "visible"; value: false; }
PropertyAction { target: animationRect; property: "visible"; value: false; }
}
},
Transition { from: "details"; to: "summary";
id: shrinkTransition
property variant destRect: {"x": 0, "y": 0, "width": 0, "height": 0}
SequentialAnimation {
PropertyAction { target: summaryView; property: "visible"; value: true; }
PropertyAction { target: animationRect; property: "visible"; value: true; }
PropertyAction { target: detailsView; property: "visible"; value: false; }
ParallelAnimation {
NumberAnimation { target: animationRect; property: "x"; to: shrinkTransition.destRect.x; duration: 200; }
NumberAnimation { target: animationRect; property: "y"; to: shrinkTransition.destRect.y; duration: 200; }
NumberAnimation { target: animationRect; property: "width"; to: shrinkTransition.destRect.width; duration: 200; }
NumberAnimation { target: animationRect; property: "height"; to: shrinkTransition.destRect.height; duration: 200; }
}
PropertyAction { target: animationRect; property: "visible"; value: false; }
}
}
]
Rectangle {
id: animationRect
z: 1
color: "gray"
visible: false
function positionOverSummary(summaryRect) {
x = summaryRect.x; y = summaryRect.y;
width = summaryRect.width; height = summaryRect.height;
}
function prepareForShrinkingTo(summaryRect) {
x = 0; y = 0;
width = 400; height = 200;
shrinkTransition.destRect = summaryRect;
}
}
ListModel {
id: data
ListElement { summary: "Item 1"; description: "Lorem ipsum..."; }
ListElement { summary: "Item 2"; description: "Blah blah..."; }
ListElement { summary: "Item 3"; description: "Hurf burf..."; }
}
GridView {
id: summaryView
anchors.fill: parent
cellWidth: 100
cellHeight: 100
model: data
delegate: Rectangle {
// These are needed for getDelegateInstanceAt() below.
objectName: "summaryDelegate"
property int index: model.index
color: "lightgray"
width: 95; height: 95;
Text { text: summary; }
MouseArea {
anchors.fill: parent
onClicked: {
var delegateRect = mapToItem(window, x, y);
delegateRect.width = width; delegateRect.height = height;
animationRect.positionOverSummary(delegateRect);
detailsView.positionViewAtIndex(index, ListView.Beginning);
window.state = "details";
}
}
}
// Uses black magic to hunt for the delegate instance with the given
// index. Returns undefined if there's no currently instantiated
// delegate with that index.
function getDelegateInstanceAt(index) {
for(var i = 0; i < contentItem.children.length; ++i) {
var item = contentItem.children[i];
// We have to check for the specific objectName we gave our
// delegates above, since we also get some items that are not
// our delegates here.
if (item.objectName == "summaryDelegate" && item.index == index)
return item;
}
return undefined;
}
}
ListView {
id: detailsView
anchors.fill: parent
visible: false
orientation: ListView.Horizontal
snapMode: ListView.SnapOneItem
model: data
delegate: Rectangle {
color: "gray"
width: 400; height: 200;
Column {
Text { text: summary; }
Text { text: description; }
}
MouseArea {
anchors.fill: parent
onClicked: {
summaryView.positionViewAtIndex(index, GridView.Visible);
var delegateInstance = summaryView.getDelegateInstanceAt(index);
var delegateRect = window.mapFromItem(summaryView,
delegateInstance.x - summaryView.contentX,
delegateInstance.y - summaryView.contentY
);
delegateRect.width = delegateInstance.width;
delegateRect.height = delegateInstance.height;
animationRect.prepareForShrinkingTo(delegateRect);
window.state = "summary";
}
}
}
}
}
Please tell me there's a more robust way!