CODEWITHSUNDEEP
qtqml
İbrahim
İbrahim

Reputation: 1021

How should I start QML files?

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:

mainmenu.png App_Area.png Resulton_App_Area.png

How way should I choose for these jobs?

Upvotes: 0

Views: 405

Answers (1)

Mohammad Kanan
Mohammad Kanan

Reputation: 4582

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

             }
         }
    }

Upvotes: 1

Related Questions