如何使图像填充qml控件按钮

Question

我想要图标来填充Button。这是代码：

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Window 2.2

Window{
    id: root
    title: "settings"
    flags: Qt.Dialog
    minimumHeight: 700
    minimumWidth: 700
    maximumHeight: 700
    maximumWidth: 700

    ColumnLayout{
        id: columnLayout
        anchors.fill: parent
        RowLayout{
            Button{
                iconSource: "images/1x1.png"
                checkable: true
                checked: true
                Layout.minimumWidth: 100
                Layout.minimumHeight: 100
                }

            Button{
                iconSource: "images/1x2.png"
                checkable: true
                checked: false
                Layout.minimumWidth: 100
                Layout.minimumHeight: 100
            }
            Button{
                iconSource: "images/2x1.png"
                checkable: true
                checked: false
                Layout.minimumWidth: 100
                Layout.minimumHeight: 100
            }
            Button{
                iconSource: "images/2x2.png"
                checkable: true
                checked: false
                Layout.minimumWidth: 100
                Layout.minimumHeight: 100
            }
        }
        Rectangle{
            visible: true
            implicitHeight: 600
            implicitWidth: 700
            color: "red"
        }
    }
}

按钮大小为100 * 100像素，但图像尺寸要低得多。如何使图像像按钮一样大

Answer 1

如果你不介意使用私有API，那就是padding属性：

import QtQuick 2.4
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Item {
    width: 200
    height: 200

    Button {
        iconSource: "http://www.sfweekly.com/imager/the-exhikittenist-cattown-cat-pics-and-m/b/square/3069319/58c8/WikiCat.jpg"
        anchors.centerIn: parent
        style: ButtonStyle {
            padding {
                left: 0
                right: 0
                top: 0
                bottom: 0
            }
        }

        Rectangle {
            anchors.fill: parent
            color: "black"
            opacity: parent.pressed ? 0.5 : 0
        }
    }
}

看看ButtonStyle.qml：

/*! The padding between the background and the label components. */
padding {
    top: 4
    left: 4
    right:  control.menu !== null ? Math.round(TextSingleton.implicitHeight * 0.5) : 4
    bottom: 4
}

Answer 2

这实际上取决于你想要达到的目标。 IMO，这里有三个解决方案：

1）如果你需要一个图像作为按钮，只需使用Image和MouseArea填充它：

Image {
    source: "http://images5.fanpop.com/image/photos/27500000/Cool-beans-azkaban-27533920-200-200.gif"

    MouseArea {
        anchors.fill: parent
        onClicked: {
           console.info("image clicked!")
        }
    }
}

2）如果要使用带图像的按钮，请重新定义label的style属性，如下所示：

Button{
    width: 200
    height: 200

    style: ButtonStyle {

        label: Image {
            source: "http://images5.fanpop.com/image/photos/27500000/Cool-beans-azkaban-27533920-200-200.gif"
            fillMode: Image.PreserveAspectFit  // ensure it fits
        }
    }
}

这样，您可以在Button中放置任何图像，并且边框的小填充允许您查看按钮被单击/选中的时间。请注意，通过使用ButtonStyle，您将失去平台风格。

3）如果你真的想使用Button并让它看起来像Image，请遵循Mitch提出的智能方法。

Answer 3

如果您想要图像将填充按钮：

Button{
    Image {
        anchors.fill: parent
        source: "images/1x1.png"
        fillMode: Image.Tile
    }
    checkable: true
    checked: true
    Layout.minimumWidth: 100
    Layout.minimumHeight: 100
}

或者你需要的其他fillMode

Answer 4

我在这里说过同样的问题。非常感谢不同的解决方案。但@folibis建议的那个最终给了一个平台（在Windows 10中是平的）按钮和我的svg图像。但它确实可以很好地工作。原因有三：1。图像与按钮紧密贴合。为了像图标一样，我使用了FLAT组合框。 2.当我们在按钮上寻找简单的标志性图像时，fillmode tile是不合适的。我已将其更改为PreserveASpectFit。 3.可检查和检查的属性不适用于普通操作按钮。但问题的代码示例肯定有这些。请在这里查看我的代码。可能有用。再次感谢@Folibis

            Button {
            id: nextButton
            GroupBox {
                flat: true
                anchors.fill: parent
                Image {
                    anchors.fill: parent
                    source: "qrc:/next.svg"
                    fillMode: Image.PreserveAspectFit
                }
            }
            Layout.minimumWidth: 100
            Layout.minimumHeight: 100
           }