StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>After some investigation, it turns out that <code>contentItem</code> 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 <code>getDelegateInstanceAt()</code> function in the GridView.</p> <pre><code>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"; } } } } } </code></pre> <p>Please tell me there's a more robust way!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload