QML：向上打开的下拉菜单

Question

我需要点击QML中的“菜单”按钮向上打开。

我曾尝试使用listview，但在实现过程中我们得到了下拉列表。

参考以下代码段的任何建议。

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

尝试更改dropDown项目的锚点：

那

anchors.top: chosenItem.bottom;

应该成为

anchors.bottom: chosenItem.top;