QML 的 Material 样式有问题

Question

不幸的是，我在查找有关 QtQuick.Controls.

更高版本的大量文档时遇到了麻烦

我遇到了以下问题：我创建了一个 80x80 的按钮并且没问题，但是当我决定尝试使用 Material 样式时。

当我使用按钮宽度默认样式时，它的正确高度为 80。当我使用 Material 样式时，高度看起来不同，您可以在图片上看到：橙色线是 80x3 像素，在第一个按钮它比按钮高，而第二个按钮（具有默认样式的按钮）没问题。

为什么会出现这种行为以及如何解决？

第一个按钮的代码（第二个相同，只是配置中使用默认样式）。

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
    }
}

Answer 1

默认尺寸来自 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。目前，您可以使用例如background.anchors.fill 使背景填满整个按钮：

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

QML 的 Material 样式有问题

Having troubles with QML's Material style

qt

qml

qtquick2

material-design

qtquickcontrols2