how to create multiscreen application in Qt QML

1
votes

Very simple question.

This is regarding Qt 4.8.5, QML, QtQuick 1.1

I cannot understand how screen transitions are happening in QML and how to code.

For simplicity consider I have 3 different screens in 3 different QML files.

1.Home Screen
2.Setting Screen
3.Help Screen
all with width: 640 and height:480

Each screen in different and has different child inside.

Now I have a button in Home screen to go the Setting Screen which has a back button to come back. And then in both 1 and 2 there is a help button which shows the Help Screen.

Now how should my main.qml file be???

for simplicity consider the screens have only the navigation buttons.

Can someone post me a code.?

2
qtuser-interfaceqml
If you don't understand how to code, you should read Qt's documentation first. You need to learn the toolkit that you're using, rather than ask for the code to be written for you. If you already have, then post your (minimal) code and state what the specific problem is. - Mitch
I have just now started to learn. But the documentation is very vague. Yeah they have good details. But details like these are very difficult to find. I just want to know to do basic stuff not advanced.. Thanks! Please suggest if any tutorials available. - Daniel Sampras
The documentation is actually ample, especially for the needs of a newbie. Rolling your own stack view element is trivial. But you must first learn the language basics, rushing into it is not the best way to learn. - dtech
qmlbook.github.io/index.html - dtech
All you really need to get a functional stack view going is a regular Item, knowledge of how to create objects dynamically, and how to put them in a JS array so that you can track and manage their visibility and lifetime. - dtech

2 Answers

1
votes

If you are sure that your app will stay fixed to those 3 screens, you can get away with something as simple as this:

Rectangle {
  id: app
  anchors.fill: parent
  Row {
    anchors.centerIn: parent
    Button {
      text: "settings"
      onClicked: set.visible = true
    }
    Button {
      text: "help"
      onClicked: help.visible = true
    }
  }
}
Rectangle {
  id: set
  anchors.fill: parent
  color: "red"
  visible: false
  Button {
    anchors.centerIn: parent
    text: "close"
    onClicked: set.visible = false
  }
}
Rectangle {
  id: help
  anchors.fill: parent
  color: "blue"
  visible: false
  Button {
    anchors.centerIn: parent
    text: "close"
    onClicked: help.visible = false
  }
}

You have all 3 "screens" in a sequence so that the app screen is on the bottom, with settings and help on top. Then you can switch screens by simply controlling the visibility.

If you want a more dynamic solution, follow my hints from the comments to implement a simple stack view, it is quite easy and will be a good exercise to learn QML.

You definitely don't want to follow the example of Konstantin T., and it is a mystery why such a flawed example was upvoted in the first place. That approach will destroy your app screen every time you open settings or help, going back you will not go to your previous screen, but to a brand new instance of it, losing all your previous input. Also, putting a mouse area on top of that guarantees you will not be able to interact with any of the screen's element.

0
votes

You can use Loader element. It is used to dynamically load visual QML components. It can load a QML file (using the source property) or a Component object (using the sourceComponent property).

For example:

Item {
    width: 200; height: 200
    Loader { 
        id: pageLoader
        source = "Page1.qml"
    }
    MouseArea {
        anchors.fill: parent
        onClicked: pageLoader.source = "Page2.qml"
    }
}