javascript - QML中的可折叠面板

我正在尝试在QML中创建可折叠面板。我面临的问题是矩形（id: settingsBox）height为0时：在这种情况下，我仍然可以看到包含的Label（id: texter）。我希望当用户单击标题时，将对矩形高度进行动画处理，然后显示文本。我该怎么办？

Rectangle {

    id: panel

    property int margin: 5
    property int minWidth: 200
    property int prefWidth: 300
    property int maxWidth: 500

    property int minHeight: 300
    property int prefHeight: 500
    property int maxHeight: 600

    property int minHeaderHeight: 30
    property int prefHeaderHeight: 50
    property int maxHeaderHeight: 50

    property int maxPanelHeight: 600
    property int duration: 50

    width: 500
    height: 500

    ColumnLayout {
        id: layout
        anchors.fill: parent

        HeaderButton {
            id: headerButton1
            height: prefHeight
            anchors.left: parent.left
            anchors.leftMargin: margin
            anchors.right: parent.right
            anchors.rightMargin: margin
            anchors.top: parent.top
            anchors.topMargin: margin

            Layout.fillWidth: true
            Layout.minimumWidth: minWidth
            Layout.preferredWidth: prefWidth
            Layout.maximumWidth: maxWidth

            Layout.fillHeight: true
            Layout.minimumHeight: minHeaderHeight
            Layout.preferredHeight: prefHeaderHeight
            Layout.maximumHeight: maxHeaderHeight

            onHeaderBtnClicked: {
                console.log("Settings Opened");
                if(settingsBox.height===maxPanelHeight) {
                    heightAnimationRevert.start();
                } else {
                    heightAnimation.start();
                }
            }

            PropertyAnimation {
                id: heightAnimation
                target: settingsBox
                property: "height";
                from: 0;
                to: maxPanelHeight;
                duration: duration;
                running: false;
                loops: 1;
            }

            PropertyAnimation {
                id: heightAnimationRevert
                target: settingsBox
                property: "height";
                from: maxPanelHeight;
                to: 0;
                duration: duration;
                running: false;
                loops: 1;
            }
        }

        Rectangle {
            id: settingsBox
            anchors.top: headerButton1.bottom
            anchors.right: parent.right
            anchors.leftMargin: margin
            anchors.left: parent.left
            anchors.rightMargin: margin
            width: prefWidth
            height: 0
            color: "lightgray"

            Label {
                id: texter
                visible: true
                text: qsTr("Hello World");
                font.pointSize: 11
                clip: false
                textFormat: Text.AutoText
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
            }
        }
    }
}

最佳答案

我终于得到了答案。它是使用Spliview并为splitView中每个子级的动画高度。即使孩子的身高为零，Spliview也会隐藏其孩子的内容。 @BaCaRoZzo提供的答案与我想要的很接近，但是当我们堆叠多个相似的组件时，我们会自行处理高度和其他问题，我为有需要的人提供了代码。谢谢@BaCaRoZzo的回答。我将在其他地方使用opacity属性！

Rectangle {
    id: rectangle2
    width: 500
    height: 600

    SplitView {
        anchors.fill: parent
        orientation: Qt.Vertical

        PropertyAnimation {
            id: heightAnimation
            target: rect1
            property: "height";
            from: 0;
            to: 400;
            duration: 500;
            running: false;
            loops: 1;
        }

        Rectangle {
            id: rect1
            height: 0
            Layout.maximumHeight: 400
            color: "blue"

            Text {
                text: "View 1"
                anchors.centerIn: parent
            }
        }

        Rectangle {
            id: rect2
            Layout.minimumHeight: 50
            Layout.fillHeight: true
            color: "lightgray"
            Text {
                text: "View 2"
                anchors.centerIn: parent
            }
        }

        Rectangle {
            id: rect3
            height: 200
            color: "lightgreen"
            Text {
                text: "View 3"
                anchors.centerIn: parent
            }

            MouseArea {
                id: mouseArea1
                x: 8
                y: 5
                width: 484
                height: 187

                onClicked: heightAnimation.start();
            }
        }
    }
}

（最后一个矩形用作按钮）