how to use one model in two views

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) }