Question

I need to have drop-down that opens upwards on clicking on Menu button in QML.

I have tried to use the listview for the same, but in the implementation we are getting drop-down which opens downwards.

Any suggestions with reference to below snippet.

import QtQuick 1.1

Rectangle {
    width: 800
    height: 480

    Rectangle {
        id:comboBox
        property variant items: ["Red", "Blue", "Green"]

        signal comboClicked;
        x: 651
        y: 344
        width: 141
        height: 30;
        z: 0
        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 = ""
                            chosenItemText.text = modelData;
                            listView.currentIndex = index;
                        }
                    }
                }
            }
        }


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

}

Answer 1

Try to change the anchors of the dropDown item:

that

anchors.top: chosenItem.bottom;

should become

anchors.bottom: chosenItem.top;