QML reuse GrideView content in new Window

haris123

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.

dheerendra

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

haris123

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

Mammamia

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.

haris123

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.

Mammamia

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

haris123

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