QML 的 Material 风格有问题答案

【问题标题】：Having troubles with QML's Material styleQML 的 Material 风格有问题
【发布时间】：2018-04-08 23:09:02
【问题描述】：

不幸的是，我很难找到关于 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
    }
}

【问题讨论】：

标签： qt qml material-design qtquick2 qtquickcontrols2

【解决方案1】：

默认尺寸来自Material design guidelines，它定义了 36dp 的视觉高度与 48dp 的触摸区域。因此，顶部和底部有一个默认的 6dp 填充。显然，填充应该以更智能的方式定义，无论尺寸如何，都不要粘在那里。随时report a bug。目前，您可以使用例如background.anchors.fill 让背景填满整个按钮：

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

【讨论】：