Wie, um das Bild zu füllen qml Bedienelemente Taste

Möchte ich Symbol zu füllen Button. Hier ist der 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-Größe ist 100*100 Pixel, aber die Bildgröße ist viel niedriger. Wie das Bild so groß sein wie button

InformationsquelleAutor lnk | 2014-12-05

qml qt qtquickcontrols

Wenn Euch das nichts ausmacht, die private API, gibt es die padding-Eigenschaft:

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

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

Ich habe versucht, etwas ähnliches, aber bekomme die Fehlermeldung: "Ungültige eigenschaftszuweisung: "Polsterung" ist ein nur-Lesen-Eigenschaft". Ich bin ratlos jetzt.

InformationsquelleAutor Mitch

7

Es hängt wirklich davon ab, was Sie erreichen wollen. IMO gibt es drei Lösungen:

1) Wenn Sie ein Bild als Schaltfläche benutzen Sie einfach Image mit einem MouseArea Füllung:
```
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) Wenn Sie möchten, verwenden Sie eine Schaltfläche mit einem Bild, einer Neudefinition der label Eigenschaft des style wie folgt:
```
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
        }
    }
}
```
Diese Weise können Sie jedes Bild in der Button und der kleinen Polsterung an die Grenzen ermöglicht es Ihnen, um zu sehen, wenn die Schaltfläche geklickt wird/überprüft. Bedenken, dass durch die Verwendung ButtonStyle werden, verlieren Sie die Plattform-Stil.

3) Wenn Sie wirklich wollen, verwenden Sie die Button und machen es so Aussehen wie ein Image Folgen Sie den smart-Ansatz von Mitch.

InformationsquelleAutor BaCaRoZzo

Wenn Sie möchten, dass das Bild füllt die Taste :

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

oder einige andere fillMode, wie Sie benötigen

InformationsquelleAutor folibis

0

Ich durchgemacht habe dasselbe problem bereits hier. vielen Dank für die verschiedenen Lösungen. Aber die, die @folibis vorgeschlagen, endlich eine Plattform gab, sah (flat in windows 10) - Taste mit meinem svg-Bild. Aber es funktioniert direkt. drei Gründe:
1. Das Bild war eng passen mit der Taste.Zu halten wie ein Symbol, das ich verwendet eine FLACHE groupbox.
2. fillmode-Kachel ist nicht angebracht, wenn wir uns für eine einfache ikonische Bild auf eine Schaltfläche. Ich habe es geändert PreserveASpectFit.
3. überprüfbar ist und überprüft werden, und die Eigenschaften wurden nicht bestimmt für den normalen action-buttons. Aber sicherlich die Frage der Beispielcode hat diese.
pl siehe meinen code hier. nützlich sein kann. Nochmals Dank an @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
           }
```
InformationsquelleAutor veenusAV

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.