Pushing QML-files onto StackView

qwasder85

I'm trying to use the StackView with QML components that are not defined in the same QML file.
Say I have the following files.

MyFirstView.qml:

Rectangle
{
    // Clever stuff
}

MySecondView.qml:

Rectangle
{
    // More clever stuff
}

MyApplication.qml:

Window
{
    StackView
    {
        id: myStackView

        anchors.fill: parent

        initialItem: MyFirstView {}
    }
}

This works so far. The issues start when I try to push additional items onto the View.
This does not work:

MyApplication.qml

...
MouseArea
{
    onClicked: myStackView.push( MySecondView{} )
}

It produces a syntax error. Leaving the brackets {} out produces a compiler error ( not defined).
The second issue comes when I try to control the StackView from inside MyFirstView or MySecondView. If I extend MyFirstView like this:

MyFirstView.qml:

Rectangle
{
    // Clever stuff

    MouseArea
    {
        onClicked: myStackView.push( MySecondView{} )
    }
}

Apart from the syntax problem, I cannot reference "myStackView" from there, because "MyFirstView" has no knowledge of the main "MyApplication.qml".
I hope I was able to make this clear.

How do I push QMLs that are defined externally
How do I control the StackView from an external QML (that's the current item of the StackView)

I may be using this type entirely wrong.

sierdzio

Here: onClicked: myStackView.push( MySecondView{} ) you are mixing QML code (MySecondView{}) with JavaScript code. This is not allowed in this way.

You need to either use an id of an existing item, or create an instance in JS and pass it to the push() method. The latter can be done in many ways, see this.

qwasder85

@sierdzio Thank you for the advice, is this how one would usually employ the StackView? I can't help but feel like this is more complicated than it should be.

sierdzio

Try this:

StackView
{
    anchors.fill: parent

    MyFirstView {}
    MySecondView {}
}

Or use the id approach:

MyFirstView { id: one }
MySecondView { id: two }

StackView
{
    anchors.fill: parent

    Component.onCompleted: {
        push(one); push(two)
    }
}

This is untested pseudocode written from memory, but it will hopefully put you on a good track :-)

qwasder85

@sierdzio This seems to be working well in my case. Thanks a bunch! :)

sierdzio

You are welcome. Have fun!

Iktwo

You could also wrap whatever you want to push in a Component like this

Component {
    id: one
    MyFirstView { }
}

Component {
    id: two
    MySecondView { }
}

StackView {
    id: stackView

    initialItem: one
}

This way your views will be created once you push them.

You can also push an URL

    stackView.push("MySecondView.qml")

And you can pass properties too

    stackView.push({ item: two, properties: { color: "#3498db" }})