Expander Control in QML



  • 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


  • Moderators

    @Jenifer
    something like this?



  • @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.


  • Moderators

    @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...



  • @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



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


  • 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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.