qt - 如何使图像填充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

这实际上取决于您想要实现的目标。 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 的属性(property)， 如下:

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 提出的智能方法。