by
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
Actual Code - Note the buttons are being cut off at the bottom
Actual Code (window size 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!
1 Solution
Accepted Solutions
by
