Pushing QML-files onto StackView



  • 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.

    1. How do I push QMLs that are defined externally
    2. 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.


  • Moderators

    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.



  • @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.


  • Moderators

    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 :-)



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


  • Moderators

    You are welcome. Have fun!



  • 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" }})
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.