Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QML reuse GrideView content in new Window



  • I have gridview in main screen, which basically play video. Now I need to open a new window with selected grid only. So to reduce the resource usage is there any way to share mainscreen grid component on new window, by sharing the view content.

    ```
    

    ListModel {
    id: appModel
    }

    GridView {
    id: gridView
    anchors.fill: parent
    clip: true
    cellWidth: 250
    cellHeight: 250
    focus: true
    model: appModel
    delegate: Item {
    ...............................
    }

    Component.onCompleted: {
    appModel.append({
    camera: path});
    }

    
    So in new window is there any way to reuse(share) the delegate item of gridview, so that I can reduce the memory and resources.

  • Qt Champions 2017

    Grid view is object. You can share the same with identity property.



  • Can you please give me reference, actually I don't need to display all grid in the new Window but selected grid only.



  • For this purpose first you should create your delegate as a separate Component or in another QML file.

    After that when you click on any of the item on the grid view then create a new instance of the component[delegate] and set the
    camera path to show the video on it.

    Also to reduce the usage on showing the selected video in new window, you should stop playing the video on the grid view.



  • Right now I am passing listmodel of mainWindow to the new Window, but any change in parent Window doesn't affect the new Window(like remove from list) as the data is not sharing.

    Main Window

    ApplicationWindow {
        id: root
        visible: true
        width: 620
        height: 620
        color:"skyblue"
    
    ListModel {
        id: modelIcons
    
        Component.onCompleted: {
    
            for(var i=0;i<10;i++)
            modelIcons.append({
                                iconSource: "img.png",
                                iconText: "Title"
                            })
        }
    }
    
    Component {
        id: delegateListElement1
        Item {
            width: 80
            height: width
            Column {
                Image {
                    height: 50
                    width: 50
                    source: iconSource
    
                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                           grid.currentIndex = index;
                        }
                    }
                }
                Text {
                    text: iconText
    
                }
            }
        }
    }
    
    GridView {
        id:grid
        anchors.fill: parent
    
        model: modelIcons
        delegate: delegateListElement1
        focus: true
    }
    
    Button{
        id:click
        text:"Open New Window"
        anchors.bottom: parent.bottom
        onClicked: {
            var component = Qt.createComponent("NewListView.qml")
            var window = component.createObject(root)
            window.populate(modelIcons);
        }
    }
    
    Button{
        id:click1
        text:"Add"
        anchors.bottom: parent.bottom
        anchors.left: click.right
    
        onClicked: {
            modelIcons.append({
                                iconSource: "file:///C:/Users/vapplica/Desktop/kids-couple.png",
                                iconText: "Title"
                            })
        }
    }
    
    Button{
        id:click2
        text:"Remove"
        anchors.bottom: parent.bottom
        anchors.left: click1.right
    
        onClicked: {
            modelIcons.clear();
        }
    }
    }
    

    New Window

    ApplicationWindow {
        id: root
        visible: true
        width: 400
        height: 400
        color:"pink"
    
    
    ListModel {
        id: modelIconsNew
        }
    
    Component {
        id: delegateListElement
        Item {
            width: 80
            height: width
            Column {
                Image {
                    height: 50
                    width: 50
                    source: iconSource
    
                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                           grid.currentIndex = index;
                        }
                    }
                }
    
            }
        }
    }
    
    GridView {
        id:grid
        anchors.fill: parent
    
        model: modelIconsNew
        delegate: delegateListElement
        focus: true
    }
    
    function populate(modelIcons){
        for(var i=0;i<modelIcons.count;i++){
             modelIconsNew.append(modelIcons.get(i));
           }
    }
    }
    

    Is it possible to share the listmodel instead of delegate.



  • Yes. Models can be used by multiple views.

    You should move your ListModel "modelIcons" to a separate QMl file "MyIconModel.qml" and use this model for both the GridViews in MainWindow & NewWidnow.

    Refer this doc



  • Thanks for the feedback, I will try as per your suggestion.


Log in to reply