CODEWITHSUNDEEP
qtqml
blockchaindev
blockchaindev

Reputation: 3196

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

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?

Upvotes: 2

Views: 3786

Answers (1)

dtech
dtech

Reputation: 49279

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

Upvotes: 3

Related Questions