QML StackView how to push a component defined in a separate file?

Question

I'm experiencing some difficulty with Qt Quick 2.1 in Qt 5.9. Specifically, I'm struggling to make the StackView QML component do what I need it to do. I'm trying to push an item defined in a separate QML file with properties, here's a description of what I've done.

qml/main.qml

This contains the StackView QML component which holds the screens. The initialItem correctly displays the OverView screen, so you could say this is basically working as intended.

// import ...
import "screens"

StackView {
    id: mainView
    initialItem: OverviewScreen {}
}

qml/screens/OverviewScreen.qml

This is the OverView screen, which contains a GridView. When a delegate of the GridView is clicked, then I would like to initialise an instance of ItemDetailScreen with an attached property 'Id' on the GridView delegate, which is a role of the attached model.

// import ...
import "screens"

Item {
    // ...
    GridView {
        // model: ...
        delegate: Item {
            // ...
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    mainView.push({item: ItemDetailScreen, parameters: {id: Id}}) // ERROR
                }
            }
        }
    }
}

qml/screens/ItemDetailScreen.qml

This contains a variety of QML components, but it follows a familiar pattern, with Item as the root component.

// import ...

Item {
    // ...
}

The problem is that when the onClicked handler of the GridView delegate is executed, then I'm getting an error printed to the screen referencing the line where an ItemDetailScreen is pushed to the mainView.

If I add a component property to the OverviewScreen like this: property Component detailScreen: ItemDetailScreen {} and then change the push to mainView.push(detailScreen) then the push succeeds and I see the screen, however I'm still not able to pass any properties, as mainView.push({item: detailScreen, properties: {id: Id}}) also fails with an error.

So my question really is this: What's the correct way of pushing an instance of ItemDetailScreen, with properties?

id is not a property and what are you are you are trying to do is most likely not the right way. — GrecKo
If at all possible, can you please reference an example of the right way to do it? — blockchaindev

dtech dtech · Accepted Answer · 2017-09-04T10:19:10

You have to create an object instance:

mainView.push(Qt.createComponent("qml/screens/ItemDetailScreen.qml").createObject())

The id is not a regular property and you cannot set it the way you are trying, it has to be predefined in the QML source, you can only set regular properties:

Qt.createComponent("qml/screens/ItemDetailScreen.qml").createObject(parentItem, {"width" : 50, "height" : 50})

Another way to specify the properties is to use a Component:

Component {
  id: iComp
  ItemDetailScreen { width: 50; height: 50 } // specify property bindings
}
...
iComp.createObject(parentItem) // create an instance of the component

QML StackView how to push a component defined in a separate file?

1 Answers