[Solved]Drop-ups in QML ?

[Craig27]

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

}@

[godbod]

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.

[Craig27]

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.

[godbod]

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.