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

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

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

如果 urtext 为空，则相应的文本将被忽略，整个 ColumnLayout 位置将保留给 Image
如果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 将更改按钮视图

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

Custom Button with conditional image and conditional text

qml

qt5

qtquick2