How to make image to fill qml controls button

Question

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

Answer 1

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
}

Answer 2

It really depends on what you want to achieve. IMO, there are three solutions here:

1) If you need an image as a button, just use Image with a MouseArea filling it:

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) If you want to use a button with an image, redefine the label property of the style, as follows:

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

This way you can fit any image in the Button and the small padding to the borders allows you to see when the button is clicked/checked. Mind that, by using ButtonStyle, you lose the platform style.

3) If you really want to use the Button and make it look like an Image follow the smart approach proposed by Mitch.

Answer 3

If you want the image will fill the button :

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

or some another fillMode, as you need

Answer 4

I have gone through same problem stated here. thanks a lot for different solutions. But the one that @folibis suggested finally gave a platform looked (flat in windows 10) button with my svg image. But it does work directly well. three reasons: 1. The image was tightly fit with button.To keep like an icon, I used a FLAT groupbox. 2. fillmode tile is not appropriate when we look for simple iconic image on a button. I have changed it to PreserveASpectFit. 3. checkable and checked properties were not intended for normal action buttons. But surely the question's code sample has got these. pl see my code here. may be useful. Once again Thanks to @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
           }

Answer 5

I got close, using the Button's Icon property.

But this alone won't let you set just the icon, you need to set the padding to zero or your icon will get squished.

Nonintuitively, you need to manually set all of the paddings and insets.

  padding: 0 // No effect
  leftPadding: 0
  rightPadding: 0
  topPadding: 0
  bottomPadding: 0

  //Also need to reset
  topInset: 0
  bottomInset: 0

This will probably give you an awkward icon with a rounded background. I haven't found any clean way to remedy this, but here are some options:

• You can make the button "flat" (flat: true)
• You can access the background directly and change the radius
  Component.onCompleted: button.children[0].radius = 0
  • With a flat: false button this will make the icon look slightly above center
• You can replace the background, in which case you might as well just create your own IconButton class from scratch