Qml 如何在两个视图中使用一个模型

我有一个模型的图片，并希望显示在网格视图或列表视图（全屏）同步。如果用户在网格视图中单击一个图像，我希望该图像以全屏模式显示（在listview中）

我有一个解决方案，但我的列表视图会滚动到“当前索引”

塔克斯

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

    }

}

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'
                    }
                }
            }
        ]
    }
}

光电门.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

    }

}

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'
                    }
                }
            }
        ]
    }
}

---

要显示选定项而不滚动，直到选定项的索引与当前索引中的视图元素同步，请执行以下操作：

一旦货币兑换：{ 您的组件.positionViewAtIndex（currentIndex，YourViewElement.Contain）

---

}

这个问题不清楚。所以你可以做你想做的事情，但是你不想在列表显示图片之前滚动它？是的，没错。但我现在有了解决方案，只需使用onCurrentIndexChanged:{thumbnailView.positionviewatinex（currentIndex，GridView.Contain）}我有一个类似的问题我的问题是，当我从Gridview切换到listview时，只会显示单击的图像，如果我滚动listview，则其他图像根本不会显示，而位置是保留的，这意味着如果我向左滚动两次，然后向右滚动两次原始照片（单击时显示）再次出现。如果listview是应用程序运行时的默认视图，那么它可以正常工作，但是当我单击任何图像以切换到gridview时，只有单击的图像显示在gridview中，并且显示在它的确切位置！我有一个类似的问题我的问题是，当我从Gridview切换到listview时，只会显示单击的图像，如果我滚动listview，则其他图像根本不会显示，而位置是保留的，这意味着如果我向左滚动两次，然后向右滚动两次原始照片（单击时显示）再次出现。如果listview是应用程序运行时的默认视图，那么它可以正常工作，但是当我单击任何图像以切换到gridview时，只有单击的图像显示在gridview中，并且显示在它的确切位置！