如何在Qt QML中创建方形按钮？

Question

我试图在QML中创建一个简单的方形按钮，但它没有按预期工作。这是最小代码量：

import QtQuick 2.7
import QtQuick.Controls 2.1

Page {
    id: app
    width: 400
    height: 640


    Button {
        width: 48
        height: 48
    }
}

产生这个结果：

知道发生了什么事吗？我查看了文档并尝试将implicitWidth和implicitHeight设置为defined background item，但这会阻止Button的内置悬停和阴影功能。

Button {
    background: Rectangle {
        implicitWidth: 48
        implicitHeight: 48
        color: "gray" 
    }
}

结果：

有没有办法在不明确定义背景项的情况下设置所需的大小？

修改 我还尝试将所有padding设置为0，以查看填充是否存在问题：

Button {
    width: 48
    height: 48

    topPadding: 0
    bottomPadding: 0
    leftPadding: 0
    rightPadding: 0
}

除了遵循同事的建议，添加文本元素以查看它的位置：

Button {
    width: 48
    height: 48

    Text {
        text: "hello"
    }
}

文本放置向我建议按钮可以延伸超过可见灰色矩形的顶部边界。可能是这种情况吗？

另一个注意事项：我使用的模拟器是安装在Qt Creator中的AppStudio for ArcGIS模拟器。 Qt 5.10.0，Windows 10。

Answer 1

  

知道发生了什么事吗？我查看了文档并试图通过定义的背景项设置implicitWidth和implicitHeight，但是阻止了Button的内置悬停和阴影功能。

Material style Button has some padding可能是导致它不正方形的原因。将每个padding属性设置为0（或相等的值）应该有帮助：

leftPadding: 0
rightPadding: 0
topPadding: 0
bottomPadding: 0

Answer 2

Mitch在正确的轨道上Qml Material style Button有一些填充但背景矩形也有这条线：

height: parent.height - 12

这有点麻烦。您可以通过将按钮高度设置为超过宽度12（并且还更改填充）来制作一个hacky解决方案，但我不会建议它。

相反，他们建议使用Customizing Qt Quick Controls我会创建MyButton.qml并在那里复制Material样式的Button.qml代码，只需更改背景高度和控件填充。这使得以后更容易进行更多样式更改，因为您不需要更改应用程序中的所有按钮。