How to make StackLayout collapse when currentIndex === -1?

[Kamichanw]

The following code just do a simple thing: change the currentIndex of StackLayout to -1 when clicked. But I want to let the height of StackLayout to be 0 when currentIndex is -1.

Window {
    id: window
    width: 400
    height: 400
    visible: true
    color: "#181818"
    MouseArea {
        id: ma
        anchors.fill: parent
        hoverEnabled: true
        onClicked: lay.currentIndex = -1
    }

    StackLayout {
        id: lay
        anchors.top: parent.top
        Rectangle {
            width: 300
            height: 100
            color: "white"
        }
    }
    Rectangle {
        anchors.top: lay.bottom
        width: 200
        height: 100
        color: "red"
    }
}

I've tried Binding like

Binding {
    when: lay.currentIndex === -1
    lay.height: 0
}

But this won't work.

[SGaist]

Hi,

Shouldn't you rather make it invisible ?

[Kamichanw]

@SGaist Hi,
But set it invisible won't make StackLayout collapse.

[SGaist]

Do you mean you want to animate its size going down to 0 ?

[Kamichanw]

@SGaist No, I hope the StackLayout can be folded when currentIndex === -1

[lemons]

@Kamichanw I don't get what you want to achieve, but I assume you can simply bind the height?

StackLayout {
    id: lay
    anchors.top: parent.top
    height: currentIndex >= 0 ? childrenRect.height : 0
    Rectangle {
        width: 300
        height: 100
        color: "white"
    }
}