QML 中的可折叠面板

Question

我正在尝试在 QML 中创建一个可折叠面板。我面临的问题是当矩形 (id: settingsBox) height 为 0 时：在这种情况下我仍然可以看到包含的 Label (id: texter)。我希望当用户单击 header 时，矩形高度会动画化，然后出现文本。我该怎么办？

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
            }
        }
    }
}

Answer 1

我终于得到了答案。它是使用 Spliview 并为 splitView 中每个 children 的高度设置动画。 Spliview 隐藏其子项的内容，即使 children 的高度为零。

@BaCaRoZzo 提供的答案接近我想要的，但是我们在堆叠多个类似组件时自己处理了高度和其他问题

我为有需要的人提供代码。谢谢@BaCaRoZzo 的回答。我会在其他地方使用不透明度属性！

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();
            }
        }
    }
}

(最后一个矩形作为按钮)

QML 中的可折叠面板

Collapsible Panel in QML

javascript

user-interface

qt

qml

qtquick2