Replace current view with other qml view file

bwylegly

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

Quang Phu

@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

jay1

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

ZakiAsadi

Also you could use Qt.createComponent:

           //LOAD MASTERVIEW.QML
            var component = Qt.createComponent("MasterView.qml");
            var win = component.createObject(loginView);
            win.show();

dogbear

@bwylegly
There are many ways to do what you want. This one be too simplistic for your needs but in my experience, simplicity is beauty.
I often create two or more of my screens as separate QML files (of type Item) and create an instance of all of them in the main window, with only the start-up one showing.

Window {
    MasterView {
        id: masterView
        anchors.fill: parent
        visible: false
    }
    LogonScreen {
        id: logonScreen
        anchors.fill: parent
    }
}

I also like to play around with different styles, like having the logon screen be a dialog but have an opaque background so you can see the workspace behind but are unable to interact with them until you log on.

This way does require the QML files to be loaded first and not dynamically as your question might allude to.

Hope this helps.

Unsolved Replace current view with other qml view file