CODEWITHSUNDEEP
qtuser-interfaceqml
Daniel Sampras
Daniel Sampras

Reputation: 307

how to create multiscreen application in Qt QML

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.?

Upvotes: 1

Views: 1541

Answers (2)

dtech
dtech

Reputation: 49279

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.

Upvotes: 1

Konstantin T.
Konstantin T.

Reputation: 1013

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

Upvotes: 0

Related Questions