Centering GridLayout on Page

110
2
Jump to solution
06-01-2022 07:18 AM
JoshBillings
Occasional Contributor

Hey all,

I am new to QML and am trying to create a grid of buttons that stays centered on the bottom third of the page that will also scale depending on screen size and DPI.

I am sure I am missing something with the anchors and bottom margins and how to use scaleFactor but I'm unsure where I am making a mistake.

The images below show how I would like for the app page to look and how they are actually looking with my current code. 

The code has been attached as well.

 

Ideal Design

Ideal DesignIdeal Design      

 

Actual Code - Note the buttons are being cut off at the bottom

My Code DesignMy Code Design

Actual Code (window size scaled)

Actual Code (scaled)Actual Code (scaled)

 

 

import QtQuick 2.2
import QtQuick 2.3
import QtQuick 2.6
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.12


import "components" as Components

//BACKGROUND COLOR
Rectangle {
    signal signInClicked(string tourId)

    //color: app.headerBackgroundColor
    color: "#242424"

    AnimatedImage {
        anchors.fill: parent
        source: app.landingpageBackground
        fillMode: Image.PreserveAspectCrop
        visible: source > ""
    }

    Rectangle {
        anchors.fill: parent
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#00000000";}
            GradientStop { position: 1.0; color: "#00000000";}
        }
    }
 GridLayout {
        id: grid
        columns: 3
        width: 10
        height: 10
        Layout.margins: 0
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        anchors.leftMargin: 50 * app.scaleFactor
        anchors.bottomMargin: 200 * app.scaleFactor
        columnSpacing: 1
        rowSpacing: 1

            Button {
                id: parks
                Layout.preferredWidth: 120
                Layout.preferredHeight: 120
                style: ButtonStyle {

                    label: Image {
                        source: "images/parks.png"
                        fillMode: Image.PreserveAspectFit  // ensure it fits
                    }

                    background: Rectangle {
                        color: "#00FFFFFF"  // I update background color by this
                    }
                }

                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        signInClicked("");
                    }
                }
            }

//-------------------------------------

            Button {
                id: programs
                Layout.preferredWidth: 120
                Layout.preferredHeight: 120

                style: ButtonStyle {

                    label: Image {
                        source: "images/programslp.png"
                        fillMode: Image.PreserveAspectFit  // ensure it fits
                    }

                        background: Rectangle {
                            implicitWidth: 50
                            implicitHeight: 50
                            opacity: enabled ? 1 : 0.3
                            border.color: "#00FFFFFF"
                            border.width: 1
                            radius: 2
                            color: "#00FFFFFF"  // I update background color by this
                        }
                }

                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        programsPage.open()
                    }
                }
          }
//-------------------------------------

            Button {
                id: news
                Layout.preferredWidth: 120
                Layout.preferredHeight: 120

                style: ButtonStyle {

                    label: Image {
                        source: "images/news.png"
                        fillMode: Image.PreserveAspectFit  // ensure it fits
                    }

                        background: Rectangle {
                            implicitWidth: 50
                            implicitHeight: 50
                            opacity: enabled ? 1 : 0.3
                            border.color: "#00FFFFFF"
                            border.width: 1
                            radius: 2
                            color: "#00FFFFFF"  // I update background color by this
                        }
                }

                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        newsPage.open()
                    }
                }
          }

//--------------------------------------

            Button {
                id: followUs
                Layout.preferredWidth: 120
                Layout.preferredHeight: 120

                style: ButtonStyle {

                    label: Image {
                        source: "images/follow.png"
                        fillMode: Image.PreserveAspectFit  // ensure it fits
                    }

                        background: Rectangle {
                            implicitWidth: 50
                            implicitHeight: 50
                            opacity: enabled ? 1 : 0.3
                            border.color: "#00FFFFFF"
                            border.width: 1
                            radius: 2
                            color: "#00FFFFFF"  // I update background color by this
                        }
                }

                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        aboutPage.open()
                    }
                }
          }

//----------------------------------------

            Button {
                id: feedback
                Layout.preferredWidth: 120
                Layout.preferredHeight: 120

                style: ButtonStyle {

                    label: Image {
                        source: "images/feedback.png"
                        fillMode: Image.PreserveAspectFit  // ensure it fits
                    }

                        background: Rectangle {
                            implicitWidth: 50
                            implicitHeight: 50
                            opacity: enabled ? 1 : 0.3
                            border.color: "#00FFFFFF"
                            border.width: 1
                            radius: 2
                            color: "#00FFFFFF"  // I update background color by this
                        }
                }

                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        aboutPage.open()
                    }
                }
          }

// ----------------------------------------

            Button {
                id: account
                Layout.preferredWidth: 120
                Layout.preferredHeight: 120

                style: ButtonStyle {

                    label: Image {
                        source: "images/account.png"
                        fillMode: Image.PreserveAspectFit  // ensure it fits

                background: Rectangle {
                            implicitWidth: 50
                            implicitHeight: 50
                            opacity: enabled ? 1 : 0.3
                            border.color: "#00FFFFFF"
                            border.width: 1
                            radius: 2
                            color: "#00FFFFFF"
                        }
                }

                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        accountPage.open()
                    }
                }
          }
    }

 

Any help would be beneficial.

 

Thank you! 

0 Kudos
1 Solution

Accepted Solutions
TrevorFrame
Esri Contributor

Hi @JoshBillings ,

You're actually really close! There is another anchor you can use in the gridlayout such as:

anchors.horizontalCenter: parent.horizontalCenter

and get rid of the left anchor and margin. This would make it so it is always anchored to the bottom and center of its parent regardless of the screen size. Also, get rid of the height and width in the gridlayout as that could cause an issue with the area the buttons try to fit inside.  

That should do it for you.

Best,

Trevor

View solution in original post

0 Kudos
2 Replies
TrevorFrame
Esri Contributor

Hi @JoshBillings ,

You're actually really close! There is another anchor you can use in the gridlayout such as:

anchors.horizontalCenter: parent.horizontalCenter

and get rid of the left anchor and margin. This would make it so it is always anchored to the bottom and center of its parent regardless of the screen size. Also, get rid of the height and width in the gridlayout as that could cause an issue with the area the buttons try to fit inside.  

That should do it for you.

Best,

Trevor

0 Kudos
JoshBillings
Occasional Contributor

Worked like a charm. You're the man - thank you!

0 Kudos