How to create a square Button in Qt QML? - qt

Question

I'm trying to create a simple square-shaped button in QML, but it is not working as expected. Here is the minimum amount of code:
import QtQuick 2.7
import QtQuick.Controls 2.1
Page {
id: app
width: 400
height: 640
Button {
width: 48
height: 48
}
}
Which produces this result:
Any idea what is going on? I've looked through the docs and tried to set the implicitWidth and implicitHeight through a defined background item, but that blocks the built in hover and shadow functionalities of the Button.
Button {
background: Rectangle {
implicitWidth: 48
implicitHeight: 48
color: "gray"
}
}
results in:
Are there any ways to set the desired size without explicitly defining a background item?
Edit:
I've also tried setting all padding to 0 to see if padding is an issue:
Button {
width: 48
height: 48
topPadding: 0
bottomPadding: 0
leftPadding: 0
rightPadding: 0
}
As well as following a colleague's advice to add a text element to see where it is placed:
Button {
width: 48
height: 48
Text {
text: "hello"
}
}
The text placement suggests to me that the button may extend past the top bounds of the visible gray rectangle. Could this be the case?
Another note: The emulator I am using is the AppStudio for ArcGIS emulator installed in Qt Creator. Qt 5.10.0, Windows 10.

Answer 1

Any idea what is going on? I've looked through the docs and tried to set the implicitWidth and implicitHeight through a defined background item, but that blocks the built in hover and shadow functionalities of the Button.
The Material style Button has some padding which is probably what's causing it to not be square. Setting each padding property to 0 (or equal values) should help:
leftPadding: 0
rightPadding: 0
topPadding: 0
bottomPadding: 0

Answer 2

Mitch was on the right track that the Qml Material style Button has some padding but the background Rectangle also has this line:
height: parent.height - 12
which is a bit troublesome. You could make a hacky solution by setting your button height 12 more than the width (and also changing the padding) but I would not suggest it.
Instead like they suggest with Customizing Qt Quick Controls I would make MyButton.qml and copy the Material style Button.qml code there and just change the background height and the control padding. This makes it easier to do more style changes later since you do not need to change all the Buttons in your application.