How should I start QML files?

Question

I have 4 QML files: MainMenu.qml, AppArea.qml, Result.qml and main.qml.

When my app starts, I want to see first page as MainMenu.qml fullscreen. There is a button (on MainMenu.qml) to start AppArea.qml. When I click the the button, I want to start AppArea.qml as fullscreen new window.

There is a button (on AppArea.qml), when I click that button, I want to show Result.qml but I want to see Result.qml on AppArea.qml, I mean when Result.qml come outs, AppArea.qml will not disappear but Result.qml will appear on AppArea.qml.

There is a button on Result.qml. When I click the button, the Repeater in AppArea.qml will regenerate, because maybe model of Repeater changing like 1, 2, 3, 4.... There is a button on AppArea.qml, when I click the button, I want to open MainMenu.qml as a fullscreen new window like AppArea.qml.

Actually you can think basic: My app is a game like this:

How way should I choose for these jobs?

Answer 1

In addition to the mentioned post, in your case you are using the component from qml file, so you need to load the component first, your main.qml can be like this:

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    id: mainWindow
    title: "Main window"
    visible: true
    flags: Qt.Dialog
    modality: Qt.ApplicationModal
    Loader{
        id: mainMenuLoader
    }
        Component.onCompleted: {
            mainMenuLoader.source="mainMenu.qml"
            var mainMenu = mainMenuLoader.item.createObject(mainWindow);
            mainWindow.hide()
    }

}

and your mainMenu.qml can look like this:

import QtQuick 2.9
import QtQuick.Window 2.3
import QtQuick.Controls 2.2

Component {
    id:  mainMenu
    Window {
        id:mmenu
        title: "Main Menu"
        width: 600
        height: 600
        visible: true
        flags: Qt.Dialog
        modality: Qt.ApplicationModal
        Loader{
            id: appAreaLoader
        }
        Text {
            text: "This is mainMenu"
        }
        Button{
            id: loadAppArea
            anchors.centerIn: parent
            text: "Start Game"
            onClicked: {
                appAreaLoader.source="appArea.qml"
                var appArea = appAreaLoader.item.createObject(mainMenu);
                hide()
            }
        }
    }
}

you will need to do the same for successive windows ...etc. While for result, you need to use a MouseArea:

appArea.qml:

Component {
    id:  appMenu
    Window {
        id:appMenuWindow
        title: "App Menu"
        width: 600
        height: 600
        visible: true
        flags: Qt.Dialog
        modality: Qt.ApplicationModal
        Loader{
            id:anotherLoader
            visible: true
            anchors.left: appMenuText.left
            anchors.top: appMenuText.bottom
            width: parent.width/3
            height: parent.height/3
        }
        Text {
            id: appMenuText
            text: "This is App Area"
            anchors.centerIn: parent
        }
        Button{
            id: loadResult
            text: "Show Result"
            onClicked: {
                anotherLoader.source = "result.qml"
                anotherLoader.visible=true
            }
        }
        Button{
            anchors.right: parent.right
            id: loadMainMenu
            text: "Open main Menu"
            onClicked: {
                hide()
                //mmenu.show()
                anotherLoader.setSource("main.qml")
            }
        }
    }
}

result.qml:

   Rectangle{

        color: "green"
        Text {
            anchors.centerIn: parent
            id: resultxt
            text: qsTr("This is result, Click to close")
        }
        MouseArea {
             anchors.fill: parent
             onClicked: { anotherLoader.visible = false

             }
         }
    }