Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Replace current view with other qml view file



  • Hi.

    Is it possible to replace "current" qml view that is displayed in window with other one, by specifying its path?

    I.e. When my application starts, first qml it loads is LoginView.qml.
    What I want to do, is to load MasterView.qml file (containing NavigationBar component) if user logs in successfully.
    Reason for that is NavigationBar should be present only if logged in.

    import QtQuick 2.12
    import QtQuick.Controls 2.12
    import QtQuick.Window 2.14
    import assets 1.0
    import CMS 1.0
    
    Window {
    
        id: loginView
        objectName: "loginView"
    
        visible: true
        width: 640
        height: 480
        title: qsTr("Clinic Management System")
    
        signal loginClicked(string textField_usr, string textField_pwd);
    
        Connections {
            target: loginController
            onLoginSuccessful : {
                console.log("Success")
                //LOAD MASTERVIEW.QML
    
            }
            onLoginFailed: {
                console.log("Failed") 
                //POPOUT 
            }
              
        }
    
        onClicked: {
            loginController.loginButtonClicked(username_textField.text, password_textInput.text)
        }
    }
    
    
    


  • @bwylegly ,
    With me, I use StactView for change many views. You can try it, refer document here:
    https://doc.qt.io/qt-5/qml-qtquick-controls2-stackview.html



  • You can also try to use a SwipeView or StackView with "Loader" that loads the page when required and can reduce memory foot print. Sample example is as below, you can try to add required conditions to change the page view.

    Hope this helps

    SwipeView {
        id: view
    
        currentIndex: 1
        anchors.fill: parent
    
        Item {
            id: firstPage
    		Rectangle {
    			width: 200; height: 200
    
    			Loader {
    				id: loader
    				focus: true
    			}
    
    			MouseArea {
    				anchors.fill: parent
    				onClicked: {
    					loader.source = "secondPage.qml"
    				}
    			}
    		}
        }
        Item {
            id: secondPage
    		Rectangle {
    			width: 200; height: 200
    
    			Loader {
    				id: loader
    				focus: true
    			}
    
    			MouseArea {
    				anchors.fill: parent
    				onClicked: {
    					loader.source = "firstpage.qml"
    				}
    			}
    		}
        }
    }
    

Log in to reply