How does Stack View really work?



  • I want to create a simple login application with QML based on a stack view. Among others I have a file SingupForm.ui.qml and a file Singup.qml. The SignupForm has different text fields and a Save button. In the Signup.qml file I want to catch the buttonSave.onClicked event and for test purposes I want to log a message on the console that the button was clicked. This only works if the SignupForm ist the initialItem on the stackView. When I have another form as the initalItem and push the SinupForm on the stack then it doesn't work anymore. It seems that I didn't get the concept of the StackView functionality. What am I doing wrong here? Here is the StackView part of my main.qml file:

    LoginForm {
           id: loginForm
           textFieldUser.text: "loginForm"
           buttonLogin.onClicked: {
               console.log("Login button clicked")
               // check the login credentials here
               stackView.push("qml/Page1Form.ui.qml")
           }
           buttonSignup.onClicked: {
               stackView.push("qml/SignupForm.ui.qml")
               //stackView.push("qml/PasswordForm.ui.qml")
               console.log(stackView.currentItem)
           }
    }
    
    StackView {
           id: stackView
           initialItem: loginForm
           //initialItem: signupForm
           anchors.fill: parent
       }
    

    and here is the Sinup.qml file:

    SignupForm {
        id: signupForm
        textFieldFirstName.text: "First Name"
        buttonSave.onClicked: {
            console.log("Signup Save button clicked")
        }
    }
    

    Thanks for your help



  • I don't know if this is the problem, but I structure my initial page a bit differently.

    • Construct the StackView and anchor it. Set any transitions
    •Create the other items you want to push on the StackView as Components on that page
    • In Component.onCompleted() for the page the StackView is on, I do a stack.push() of the initial item I want to show.

    If I had to venture a guess about your problem, it would be that loginForm is defined in the same qml file that the stackView is in, so it works as the initial item. signupForm lives in a separate qml, so it may not be visible to the StackView when it's created.

    You could test this theory by adding a SignupForm to the same qml page as the StackView:

    Component {
            id: signup
            SignupForm { }
        }
    

    and then telling the stack that the initial item is signup



  • @Infinity said in How does Stack View really work?:

    stackView.push("qml/SignupForm.ui.qml")

    Shouldn't it be SignupForm.qml (without the ui). I assume you used the designer to create the .ui.qml file and added the signal handler logic in the non .ui file.


Log in to reply
 

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