Centering GridLayout on Page

JoshBillings — Wed, 01 Jun 2022 14:18:45 GMT

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 Design

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

My Code Design

Actual Code (window size 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!

Re: Centering GridLayout on Page

TrevorFrame — Wed, 01 Jun 2022 20:49:51 GMT

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

Re: Centering GridLayout on Page

JoshBillings — Thu, 02 Jun 2022 14:33:13 GMT

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

topic Centering GridLayout on Page in ArcGIS AppStudio Questions

Centering GridLayout on Page

Re: Centering GridLayout on Page

Re: Centering GridLayout on Page