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

Posted 2023-02-16

【中文标题】如何使图像填充 qml 控件按钮

【英文标题】：How to make image to fill qml controls button

【发布时间】：2014-12-05 20:40:24

【问题描述】：

我希望图标填充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 像素，但图像大小要小得多。如何让图片和按钮一样大

【参考方案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) 如果要使用带有图像的按钮，请重新定义style 的label 属性，如下所示：

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

【参考方案2】：

如果您不介意使用私有 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

【讨论】：

我一直在尝试类似的方法，但收到错误消息：“无效的属性分配：“填充”是只读属性”。我现在很难过。

【参考方案3】：

如果你想要图片将填充按钮：

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

或其他fillMode，根据您的需要

【参考方案4】：

我遇到了这里所说的同样的问题。非常感谢不同的解决方案。但是@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