[Solved]Drop-ups in QML ?



  • We are trying to have drop-ups in one of our screens, but we are able to get drop down instead of drop-up.
    Any suggestions how to go for that effect with Listview implementation.

    Reference for our requirement "Drop-up example":http://www.pmob.co.uk/temp/dropup.htm

    Below is the tried Code snippet:

    @import QtQuick 1.1

    Rectangle {
    width: 800
    height: 480

    Rectangle {
        id:comboBox
        property variant items: ["Item 1", "Item 2", "Item 3"]
    
        signal comboClicked;
        x: 653
        y: 420
        width: 141
        height: 30;
        z: 100;
        smooth:true;
    
        Rectangle {
            id:chosenItem
            radius:4;
            width:parent.width;
            height:comboBox.height;
            color: "#454b4d"
            smooth:true;
            Text {
                anchors.top: parent.top;
                anchors.margins: 8;
                id:chosenItemText
                x: 11
                y: 5
                color: "#ffffff"
                text:"Menu";
                anchors.topMargin: 5
                anchors.left: parent.left
                anchors.leftMargin: 12
                font.family: "Arial"
                font.pointSize: 14;
                smooth:true
            }
    
            MouseArea {
                width: 400
                height: 30
                anchors.bottomMargin: 0
                anchors.fill: parent;
                onClicked: {
                    comboBox.state = comboBox.state==="dropDown"?"":"dropDown"
                }
            }
        }
    
        Rectangle {
            id:dropDown
            width:comboBox.width;
            height:0;
            clip:true;
            radius:4;
            anchors.top: chosenItem.bottom;
            anchors.margins: 2;
            color: "lightblue"
    
            ListView {
                id:listView
                height:500;
                model: comboBox.items
                currentIndex: 0
                delegate: Item{
                    width:comboBox.width;
                    height: comboBox.height;
    
    
                    Text {
                        text: modelData
                        anchors.top: parent.top;
                        anchors.left: parent.left;
                        anchors.margins: 5;
    
                    }
                    MouseArea {
                        anchors.fill: parent;
                        onClicked: {
                            comboBox.state = ""
                        }
                    }
                }
            }
        }
    
    
        states: State {
            name: "dropDown";
            PropertyChanges { target: dropDown; height:30*comboBox.items.length }
        }
    
        transitions: Transition {
            NumberAnimation { target: dropDown; properties: "height"; easing.type: Easing.OutExpo; duration: 1000 }
        }
    }
    

    }@



  • Hello,

    A simple solution that can be applied to your code is done by using the rotation keyword which is a property inherited by any QML Element from the Item base Element.
    Here is the code that does the trick ;)

    @
    import QtQuick 1.0

    Rectangle {

    width: 800
    height: 480
    
    Rectangle {
        id:comboBox
        rotation: 180 /* first rotation */
        property variant items: ["Item 1", "Item 2", "Item 3"]
        signal comboClicked;
    
        x: 653
        y: 420
        width: 141
        height: 30;
        z: 100;
        smooth:true;
        Rectangle {
            id:chosenItem
            radius:4;
            width:parent.width;
            height:comboBox.height;
            color: "#454b4d"
            smooth:true;
            Text {
                rotation: 180 /* second rotation */
                anchors.top: parent.top;
                anchors.margins: 8;
                id:chosenItemText
                x: 11
                y: 5
                color: "#ffffff"
                text:"Menu";
                anchors.topMargin: 5
                anchors.left: parent.left
                anchors.leftMargin: 12
                font.family: "Arial"
                font.pointSize: 14;
                smooth:true
            }
            MouseArea {
                width: 400
                height: 30
                anchors.bottomMargin: 0
                anchors.fill: parent;
                onClicked: {
                    comboBox.state = comboBox.state==="dropDown"?"":"dropDown"
                }
            }
        }
    
        Rectangle {
            id:dropDown
            width:comboBox.width;
            height:0;
            clip:true;
            radius:4;
            anchors.top: chosenItem.bottom;
            anchors.margins: 2;
            color: "lightblue"
            ListView {
                id:listView
                height:500;
                model: comboBox.items
                currentIndex: 0
                delegate: Item{
                    rotation: 180 /* last rotation */
                    width:comboBox.width;
                    height: comboBox.height;
                    Text {
                        text: modelData
                        anchors.top: parent.top;
                        anchors.left: parent.left;
                        anchors.margins: 5;
                    }
                    MouseArea {
                        anchors.fill: parent;
                        onClicked: {
                            comboBox.state = ""
                        }
                    }
                }
            }
        }
        states: State {
            name: "dropDown";
            PropertyChanges { target: dropDown; height:30*comboBox.items.length }
        }
        transitions: Transition {
            NumberAnimation { target: dropDown; properties: "height"; easing.type: Easing.OutExpo; duration: 1000 }
        }
    }
    

    }
    @

    Let me know if it works by your side.

    Regards.



  • I'm extremely delighted to see the result, its working on my end.

    But can't able to get the why we need first rotation. Though I get the result with commenting that line of code. But still I can't get that concept.



  • Hello.
    Good question actually. In the normal case, QML basically uses the top down approach for listviews. This a default dehavior for any Listview you will create. On the other end, it offers you the possibility to inverse the behavior as you pleased. In your case, you need to rotate each Element to provide at the end a consistent final result. In the solution I gave you, I first rotated the delegate to have a kind of mirrored Listview. And I rotated the result to have it mirrored again. the second rotation is only for the text rotation. You can deep dive into the "Item Base Element":http://http://qt-project.org/doc/qt-4.8/qml-item.html#rotation-prop to better understand.
    Don't hesitate for further questions.
    Regards.


Log in to reply
 

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