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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使图像填充qml控件按钮相关的知识,希望对你有一定的参考价值。

我想要图标来填充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像素,但图像尺寸要低得多。如何使图像像按钮一样大

答案

如果你不介意使用私有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
}
另一答案

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

1)如果你需要一个图像作为按钮,只需使用ImageMouseArea填充它:

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)如果要使用带图像的按钮,请重新定义labelstyle属性,如下所示:

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

另一答案

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

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

或者你需要的其他fillMode

另一答案

我在这里说过同样的问题。非常感谢不同的解决方案。但@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
           }

以上是关于如何使图像填充qml控件按钮的主要内容,如果未能解决你的问题,请参考以下文章

如何使 QML 控件看起来更好?

如何在qml中沿特定路径剪辑图像

如何使图像填充整个按钮JavaFX

如何使 QML 容器中的最后一项填充剩余空间?

如何在Xamarin.Forms框架内填充和展开按钮

如何从 C++ 访问特定 QML 控件的事件