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已经建议的那样，在这种情况下使用样式是首选解决方案，因为项目本身仍然是<script type='text/javascript'> /* <![CDATA[ */ jQuery(document).ready(function() { jQuery("#name").append("<?php echo woocommerce_page_title();?>"); }); /* ]]> */ </script>，因此您可以使用其所有属性和信号（包括Button属性）来传递{ {1}}文字。

对于隐藏内部元素，您可以使用text属性，如下所示：

<强> UeButton.qml

ueText

现在使用此组件类似于常规visible：

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" }会更改按钮视图

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

1 个答案: