Search code examples
qtqmlmaterial-designqtquick2qtquickcontrols2

Having troubles with QML's Material style

Unfortunately, I am having troubles with finding a lot of documentation on later versions of QtQuick.Controls.

I have the following problem: I created a button 80x80 and it was ok, but when I decided to experiment a bit with Material style.

When I have a button width default style, it is of correct height 80. When I am using Material style, the height looks different, which you can see on the picture: the orange line is 80x3 pixels and on the first button it is higher than the button, while it's ok for the second button (which is the one with Default style).

Why the behavior is like this and how to fix it?

enter image description here

Code for the first button (second one is the same, just with Default style in configurations).

Button {
    id: testButton
    width: 80
    height: 80
    z: 1
    anchors.top: parent.top
    anchors.left: parent.left
    //Material.elevation: 3
    Material.background: "#404244"
    highlighted: true

    contentItem: Rectangle {
        anchors.fill: parent
        opacity: 0.0
        Text {
            text: "test1"
            color: "white"
            font.pixelSize: 26
            anchors.top: parent.top
            anchors.topMargin: 15
            anchors.horizontalCenter: parent.horizontalCenter
        }
        Text {
            text: "test2"
            color: "white"
            font.pixelSize: 14
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 20
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
    Rectangle {
        color: "#ff5e00"
        width: 4
        height: 80
    }
}
Solution

  • The default dimensions are from Material design guidelines, which defines a 36dp visual height vs. 48dp touch area. Therefore there's a default padding of 6dp at the top and bottom. Evidently, the padding should be defined in a smarter way, and not stick there no matter what the dimensions are. Feel free to report a bug. For the time being, you can use e.g. background.anchors.fill to make the background fill the entire button:

    Button {
    id: button
    background.anchors.fill: button
}