title: QtQuick simple app for Raspberry
body: <p>I am new to QT and want to develop a QT Quick app for the raspberry pi and its touch LCD display. The app should have several screens (sorry, not sure what the right terminology is, with screen I mean a state of the app which fills the whole display of the Raspberry Pi) and there should be buttons to switch between those screens. How is it possible to switch to a different screen when I press a button?</p>
  
  <p>I tried using loader but (right now I am testing on the Desktop not the Raspberry) it opens the qml file in a new window, but I would like to have the content of the original window replaced.</p>
  
  <p>Edit:
  Yes, I plan using EGLFS. I enclose some code which does in principle what I want. However, I am not sure if this is the right way to do things: I put the screens I want to have into their own qml file, and toggle their visibility through buttons our mouse areas:</p>
  
  <p>main.qml</p>
  
  <pre><code>import QtQuick 2.7
  import QtQuick.Controls 2.0
  import QtQuick.Layouts 1.0
  
  ApplicationWindow {
      visible: true
      width: 800
      height: 460
      title: qsTr("Hello World")
  
      Page1 {
          id: page1
          visible: true
      }
  
      Page2 {
           id: page2
           visible: false
      }
  
  }
  </code></pre>
  
  <p>Page1.qml</p>
  
  <pre><code>import QtQuick 2.7
  import QtQuick.Controls 2.0
  
  Item {
          Button {
              id: button1
              width: 200
              height: 40
              text: qsTr("To second page")
              onClicked: {
                  page2.visible=true
                  page1.visible=false
              }
          }
  }
  </code></pre>
  
  <p>Page2.qml</p>
  
  <pre><code>import QtQuick 2.3
  import QtQuick.Window 2.2
  
  Item {
      Text {
          id: text1
          x: 181
          y: 153
          text: qsTr("Second Page")
          font.pixelSize: 12
      }
  
      Rectangle {
          id: rectangle
          x: 252
          y: 222
          width: 200
          height: 200
          color: "#000000"
          border.color: "#f12525"
      }
  
      MouseArea {
          id: mouseArea
          x: 234
          y: 209
          width: 244
          height: 225
          onClicked:{
              page1.visible=true
              page2.visible=false
          }
      }
  }
  </code></pre>