Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Pushing QML-files onto StackView
Forum Updated to NodeBB v4.3 + New Features

Pushing QML-files onto StackView

Scheduled Pinned Locked Moved QML and Qt Quick
stackviewqml
7 Posts 3 Posters 10.9k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • qwasder85Q Offline
    qwasder85Q Offline
    qwasder85
    wrote on last edited by qwasder85
    #1

    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.

    1 Reply Last reply
    1
    • sierdzioS Offline
      sierdzioS Offline
      sierdzio
      Moderators
      wrote on last edited by
      #2

      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.

      (Z(:^

      qwasder85Q 1 Reply Last reply
      1
      • sierdzioS 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.

        qwasder85Q Offline
        qwasder85Q Offline
        qwasder85
        wrote on last edited by
        #3

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

        1 Reply Last reply
        0
        • sierdzioS Offline
          sierdzioS Offline
          sierdzio
          Moderators
          wrote on last edited by sierdzio
          #4

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

          (Z(:^

          qwasder85Q 1 Reply Last reply
          1
          • sierdzioS 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 :-)

            qwasder85Q Offline
            qwasder85Q Offline
            qwasder85
            wrote on last edited by
            #5

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

            1 Reply Last reply
            0
            • sierdzioS Offline
              sierdzioS Offline
              sierdzio
              Moderators
              wrote on last edited by
              #6

              You are welcome. Have fun!

              (Z(:^

              1 Reply Last reply
              0
              • I Offline
                I Offline
                Iktwo
                wrote on last edited by
                #7

                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" }})
                
                1 Reply Last reply
                0

                • Login

                • Login or register to search.
                • First post
                  Last post
                0
                • Categories
                • Recent
                • Tags
                • Popular
                • Users
                • Groups
                • Search
                • Get Qt Extensions
                • Unsolved