4

I want icon to fill Button. Here is code:

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

Button size is 100*100 pixels but image size is much lower. How to make image to be as big as button

4

4 回答 4

11

这实际上取决于您想要实现的目标。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 提出的智能方法。

于 2014-12-07T10:24:16.497 回答
4

如果您不介意使用私有 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
}
于 2014-12-06T18:59:44.667 回答
3

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

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

或者其他fillMode的，你需要

于 2014-12-06T00:36:12.683 回答
0

我经历了这里所说的同样的问题。非常感谢不同的解决方案。但是@folibis 建议的那个最终给了一个带有我的 svg 图像的平台外观（在 Windows 10 中为平面）按钮。但它确实可以很好地工作。三个原因： 1. 图像与按钮紧密贴合。为了保持像图标，我使用了 FLAT 组合框。2. 当我们在按钮上寻找简单的标志性图像时，fillmode tile 是不合适的。我已将其更改为 PreserveASpectFit。3. checkable 和 checked 属性不适用于正常操作按钮。但问题的代码示例肯定有这些。请在这里查看我的代码。可能有用。再次感谢@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
           }
于 2017-12-28T08:57:22.003 回答