title: Landing Page Button Organization
body: <p>I am using a template to create an app using QT Creator and QML and am hoping to create a landing page that allows users to select which &quot;page&quot; they want to navigate to by clicking an icon.</p>
  <p>I've figured out how to get a button on the landing page and have it open another page. However, I am using x and y positions of the button and it doesn't scale correctly when the window size changes.</p>
  <p>Ultimately, I am trying to put 6 buttons on the landing page in a way that scales correctly.</p>
  <p>I have attached an <a href="https://i.stack.imgur.com/88zEU.png" rel="nofollow noreferrer">image </a> of my ideal Landing Page design and have also attached code for what I already have.</p>
  <p>I hope I was able to explain this well enough. Please let me know if I can clarify anything.</p>
  <pre><code>import QtQuick 2.2
  import QtQuick 2.6
  
  import QtQuick.Controls 1.1
  import QtQuick.Controls.Styles 1.4
  
  
  import &quot;components&quot; as Components
  
  //BACKGROUND COLOR
  Rectangle {
      signal signInClicked(string tourId)
  
      color: &quot;#242424&quot;
  
      AnimatedImage {
          anchors.fill: parent
          source: app.landingpageBackground
          fillMode: Image.PreserveAspectCrop
          visible: source &gt; &quot;&quot;
      }
  
      Rectangle {
          anchors.fill: parent
          gradient: Gradient {
              GradientStop { position: 0.0; color: &quot;#00000000&quot;;}
              GradientStop { position: 1.0; color: &quot;#00000000&quot;;}
          }
      }
  
  //TITLE TEXT
  
      Text {
          id: titleText
  
          anchors {
              left: parent.left
              right: parent.right
              top: parent.top
              topMargin: app.height/10
          }
  
          font.family: app.customTitleFont.name
  
          text: app.info.title
          font {
              pointSize: 60
              pointSize: app.titleFontSize * 1.4
          }
          color: &quot;#00000000&quot;
          horizontalAlignment: Text.AlignHCenter
          wrapMode: Text.Wrap
      }
  
  Button {
          id: signInButton
  
          anchors {
              horizontalCenter: parent.horizontalCenter
              bottom: parent.bottom
              bottomMargin: 60 * app.scaleFactor
          }
  
          opacity: 0.0
          style: ButtonStyle {
              id: btnStyle
  
              property real width: parent.width
              label: Text {
                  id: lbl
  
                  text: signInButton.text
                  anchors.centerIn: parent
                  verticalAlignment: Text.AlignVCenter
                  horizontalAlignment: Text.AlignHCenter
                  width: parent.width
                  maximumLineCount: 2
                  elide: Text.ElideRight
                  wrapMode: Text.WordWrap
                  color: app.titleColor
                  font.family: app.customTextFont.name
                  font.pointSize: app.baseFontSize
              }
  
              background: Rectangle {
                  color: Qt.darker(app.headerBackgroundColor, 1.2)
                  border.color: app.titleColor
                  radius: app.scaleFactor * 2
              }
          }
          height: implicitHeight &lt; app.units(56) ? app.units(56) : undefined // set minHeight = 64, otherwise let it scale by content height which is the default behavior
          width: Math.min(0.5 * parent.width, app.units(250))
          text: qsTr(&quot;Let's Play!&quot;)
  
          MouseArea{
              anchors.fill: parent
              onClicked: {
                  signInClicked(&quot;&quot;);
              }
          }
  
          NumberAnimation{
              id: signInButtonAnimation
              target: signInButton
              running: false
              properties: &quot;opacity&quot;
              from: 0.0
              to: 1.0
              easing.type: Easing.InQuad
              duration: 1000
          }
      }
  
   AboutPage {
          id: aboutPage
      }
  
      NewsAndUpdates {
              id: newsPage
  
      }
  
      ProgramsPage {
          id: programsPage
      }
  
      Connections {
          target: app
  
          onUrlParametersChanged: {
              if (app.urlParameters.hasOwnProperty(&quot;appid&quot;)) {
                  signInClicked(app.urlParameters.appid)
              }
          }
      }
  
      Component.onCompleted: {
          signInButtonAnimation.start()
      }
  
  }
  </code></pre>