how to use one model in two views - qml

Question

i have one model for pictures and want to show them in grid view or list view (fullscreen) synchronously. if user clicks on one image in grid view i want this image to be shown in fullscreen mode (in listview).
i have one solution but my list view scrolls till "the current index".
THanx.
PhotoView.qml
Rectangle {
width: settings.pageWidth
height: settings.pageHeight
anchors.fill: parent
VisualDataModel {
id: visualModel
delegate: PhotoDelegate {}
model: photosModel
}
ListView {
id:fullscreen
anchors.fill: parent;
orientation: ListView.Horizontal
snapMode: ListView.SnapOneItem;
flickDeceleration: 500
//highlightFollowsCurrentItem: true
highlightRangeMode: ListView.StrictlyEnforceRange
preferredHighlightBegin: 0; preferredHighlightEnd: 0
cacheBuffer: width;
spacing: settings.largeMargin
model: visualModel.parts.grid
}
GridView{
id:grid
width: settings.pageWidth
height: settings.pageHeight
anchors.fill: parent
cellWidth: settings.gridCellWidth
cellHeight: settings.gridCellHeight
snapMode: GridView.SnapToRow
cacheBuffer: settings.pageHeight
clip: true
model: visualModel.parts.grid
}
// // Menu/Back Button
// IconButton{
// id: backButton
// iconSource: "qrc:///gfx/back_arrow.png"
// anchors.right: parent.right
// anchors.bottom: parent.bottom
// onClicked: mainWindow.close();
// }
// Fade Top
Image{
id:bottom_fade
source: "qrc:///gfx/bottom-page-fade.png"
height: 33
width: settings.pageWidth
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
}
// Fade Bottom
Image{
id:top_fade
source: "qrc:///gfx/top-page-fade.png"
height: 33
width: settings.pageWidth
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
}
}
PhotoDelegate.qml
import QtQuick 1.0
import Qt 4.7
import "../views"
import "../model"
import "../views/components"
Package {
Item { id: listDelegate; Package.name: 'list'; width: settings.pageWidth; height: settings.pageHeight }
Item { id: gridDelegate; Package.name: 'grid'; width: settings.pageWidth; height: settings.pageHeight }
Item {
id: wrapper
width: settings.pageWidth; height: settings.pageHeight
Image {
id: thumbnail; smooth: true; source: thumbnail_url
}
MouseArea {
anchors.fill: parent
onClicked: {
if (wrapper.state == 'inGrid') {
listDelegate.fullscreen.view.currentIndex = index;
wrapper.state = 'fullscreen'
} else {
gridDelegate.grid.view.currentIndex = index;
wrapper.state = 'inGrid'
}
}
}
state: 'inGrid'
states: [
State {
name: 'fullscreen'
ParentChange { target: wrapper; parent: listDelegate; x: 0; y: 0;
width: listDelegate.width; height: listDelegate.height
}
},
State {
name: 'inGrid'
ParentChange {
target: wrapper; parent: gridDelegate
x: 0; y: 0; width: gridDelegate.width; height: gridDelegate.height
}
}
]
transitions: [
Transition {
from: 'inGrid'; to: 'fullscreen'
SequentialAnimation {
PauseAnimation { duration: gridItem.GridView.isCurrentItem ? 0 : 600 }
ParentAnimation {
target: wrapper; via: foreground
NumberAnimation {
targets: [ wrapper]
properties: 'x,y,width,height,opacity'
duration: gridItem.GridView.isCurrentItem ? 600 : 1; easing.type: 'OutQuart'
}
}
}
},
Transition {
from: 'fullscreen'; to: 'inGrid'
ParentAnimation {
target: wrapper; via: foreground
NumberAnimation {
targets: [ wrapper ]
properties: 'x,y,width,height,opacity'
duration: gridItem.GridView.isCurrentItem ? 600 : 1; easing.type: 'OutQuart'
}
}
}
]
}
}

Answer 1

To showing selected item without scrolling until index of selected item is to synchronize the view elements current index:
onCurrentIndexChanged: {
your_component.positionViewAtIndex(currentIndex, YourViewElement.Contain)
}