带有条件图像和条件文本的自定义按钮

Question

我有以下自定义 QML

Button

：

import QtQuick.Controls 1.4
import QtQuick 2.5
import QtQuick.Layouts 1.2
import QtMultimedia 5.5

Rectangle {
    id: ueButton

    property string ueText: ""
    property string ueIconPath: ""

    width: 256
    height: 128

    signal ueSignalButtonClicked

    gradient: Gradient {
        GradientStop {
            position: 0

            color: "#ffffff"

            SequentialAnimation on color {
                id: ueButtonClickAnimation

                loops: 1
                running: false

                ColorAnimation {
                    from: "#ffffff"
                    to: "#000000"
                    duration: 25
                }   // ColourAnimation

                ColorAnimation {
                    from: "#000000"
                    to: "#ffffff"
                    duration: 25
                }   // ColorAnimation
            }   // SequentialAnimation
        }   // GradientStop

        GradientStop {
            position: 0.418

            color: "#000000"
        }   // GradientStop
    }   // Gradient

    border.color: "steelblue"
    border.width: 1
    radius: 4

    antialiasing: true
    smooth: true

    ColumnLayout {
        anchors.fill: parent
        antialiasing: true

        Image {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignHCenter|Qt.AlignTop
            Layout.margins: 8

            asynchronous: true

            horizontalAlignment: Image.AlignHCenter
            verticalAlignment: Image.AlignVCenter

            fillMode: Image.PreserveAspectFit

            smooth: true

            source: ueIconPath
        }   // Image

        Text {
            text: ueText

            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter
            Layout.topMargin: 8
            Layout.leftMargin: 8
            Layout.rightMargin: 8
            Layout.bottomMargin: 16

            color: "#ffffff"
            font.bold: true
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.pointSize: 16
            textFormat: Text.RichText
        }   // Text
    }   // ColumnLayout

    MouseArea {
        id: ueButtonMouseArea
        antialiasing: true

        anchors.fill: parent

        onClicked: {
            ueButtonClickAnimation.running=true
            ueSignalButtonClicked()
        }
    }   // MouseArea
}   // ueButton

这很好用，但我现在想做的是解决以下两个问题：

1. 如果

   urtext

   为空，则忽略相应的文本，并为

   ColumnLayout

   保留整个

   Image

   位置。
2. 如果

   ueIconPath

   为空，则忽略相应的图像，并将整个

   ColumnLayout

   保留给

   Text

   。

我怎样才能实现这一目标？

Answer 1

正如 @BaCaRoZzo 已经建议的那样，在这种情况下使用样式是更好的解决方案，因为项目本身仍然是

Button

，因此您可以使用它的所有属性和信号，包括

text

属性来传递您的

ueText

文本。

至于隐藏其中的元素，您可以使用

visible

属性，如下所示：

UeButton.qml

Button {
    id: ueButton
    style: ButtonStyle {
        background: Rectangle {
            color: control.pressed ? "#CCC" : "#DEDEDE"
            border.width: 1
            border.color: "#999"
            radius: 3
        }
        label: ColumnLayout {
            id: layout
            spacing: 10
            Image {
                Layout.alignment: Qt.AlignHCenter
                source: control.iconSource
                visible: control.iconSource !== ""
            }

            Text {
                text: control.text
                visible: control.text !== ""
            }
        }
    }
}

现在该组件的使用与常规类似

Button

:

UeButton {
    anchors.centerIn: parent
    text: "Some text"
    iconSource: "data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"
}

注释掉

text

或

iconSource

将更改按钮视图