I have the following custom QML Button
:
import QtQuick.Controls 1.4import QtQuick 2.5import QtQuick.Layouts 1.2import QtMultimedia 5.5Rectangle { 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
This works fine, but what I want to do now is to solve the following two issues:
- If
urtext
is empty, the corresponding text is ignored and the wholeColumnLayout
place is reserved forImage
. - If
ueIconPath
is empty, the corresponding image is ignored and the wholeColumnLayout
is reserved forText
.
How can I achieve that?