Expander Control in QML

[Jenifer]

Hello, I want to build a expandable component with a header in QML, such that when i click on the header the component expands and on clicking it again it should collapse. All the components below the expandable component should move relative to the expandable component. This is somewhat similar to tree view but the component here is static a form content, so is there a better alternative available. Since i am new to Qt Quick i am not completely aware of the components and controls available. Any help would be greatly appreciated
Thank You

[raven-worx]

@Jenifer
something like this?

[Jenifer]

@raven-worx

Ya exactly, i have gone through this blog, its quite informative. Using relative positioning, like anchoring i am able to achieve this. But i wanted to know is there any better way or built in controls available to achieve something similar to this.

[raven-worx]

@Jenifer said:

But i wanted to know is there any better way or built in controls available to achieve something similar to this.

Then you need to clarify what you want and why you don not like this solution...

[Jenifer]

@raven-worx
If there are built in controls to do it that would be helpful as the expandable component is bit complex and the I need the cascading effect. If the component is expanded all the components below it should move down and when the component is collapsed the components below it should move up. So I would like to know if there is a better way or this is the better possible option

[Julien B]

Hello @Jenifer ,

Have you tried to anchor the top of the below component to the bottom of the one above?

The exemple below makes the blue rectangle collapse an expand when you click on the red one and the red one follows.

Is that the kind of behaviour you want?

Rectangle {
    id: rect1
    width: 64; height: 64
    y: 64
    x: 64
    color: "blue"
    
    Behavior on height { NumberAnimation { duration: 250 } }
}
Rectangle {
    id: rect2
    width: 64; height: 64
    anchors.top: rect1.bottom
    anchors.left: rect1.left
    color: "red"

    MouseArea {
        anchors.fill: parent
        onClicked:
            if (rect1.height === 0)
                rect1.height = 64
            else
                rect1.height = 0
    }
}

[Jenifer]

Thank you all , I did it as mentioned by @Julien-B anchoring the top of the below component to the bottom of the one above and it worked great