如何在QML中显示多个组合框？

Question

我想要一个接一个的多个下拉菜单。

我有两个下拉菜单。点击后，它会与另一个重叠。

在qml中，我创建了2个文件夹。 dropdownmenu.qml->对于screen.qml， dropdowndownmenu1.qml->对于screen.qml 下拉菜单的代码相同，只是项目列表不同。 我正在使用加载程序将qml加载到screen.qml中。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick 2.12
import QtQuick.Controls 2.12


Rectangle {
    id:comboBox
    property variant items: ["ADULT", "CHILD"]

    anchors.centerIn: parent
    width: 141
    height: 30;
    z: 0
    smooth:true;


    Rectangle
    {
        id:chosenItem
        radius:4;
        width:100;
        height:30;
        color: "#454b4d"
        smooth:true;

        Image
        {
            id: name
            source: "/Images/Menu_Button"
            anchors.fill: parent
        }

        Text {
            id:chosenItemText
            anchors.centerIn: parent
            color: "black"
            renderType: Text.NativeRendering
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.family: "Courier"
            font.bold: true
            font.capitalization: Font.SmallCaps
            font.pointSize: 10
            text: "ADULT"
            smooth:true
        }

        MouseArea {
            anchors.fill: parent;
            onClicked: {
                comboBox.state = comboBox.state==="dropDown"?"":"dropDown"
            }
        }
    }


    Rectangle
    {
        id:dropDown
        width:100;
        height:0;
        clip:true;
        border.color: "black"
        anchors.top:  chosenItem.bottom;
        anchors.margins: 2;


        ListView {
            id:listView
            height:1000;
            model: comboBox.items
            currentIndex: 0


            delegate: Item{
                id: dele
                width:comboBox.width;
                height: comboBox.height;

                Rectangle
                {
                    id:highlighter;
                    anchors.fill: parent;
                    color: "#F1C40F";
                    visible: listView.currentIndex===index
                }


                Text {
                    text: modelData
                    anchors.top: parent.top;
                    anchors.left: parent.left;
                    anchors.margins: 5;
                    color: "black"
                    elide: modelData.elideMode
                }
                MouseArea {
                    anchors.fill: parent;
                    hoverEnabled: true
                    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 }
    }
}

我希望下拉列表正确可见。它不应该重叠。如何做到这一点？ 供参考，附上屏幕截图

快照以供参考：下拉菜单“成人”被下拉“打开”隐藏。但是我想单击的成人菜单应该在“在”菜单上方而不是在菜单背面。