qtqmlqtquickcontrols

How to make image to fill qml controls button


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


Solution

  • If you don't mind using private API, there's the padding property:

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

    Looking at 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
    }