QML 自制二级开合下拉菜单

一开始本来是使用ComboBox制作下拉菜单的控件，但是后面发现ComboBox实现不了我的需要，因此只能自己拿基础的控件来做了，我本身也没什么经验，这次就算是和大家探讨一下

直接上代码

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
//import ABC 1.0
import QtQuick.Dialogs 1.1
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1

import QtQuick.Window 2.2
import QtQuick.Controls 2.2



//有少量属性目前未能做到在外部设置可以在内部文档进行设置

Item {

    Component.onCompleted: {
        add_ModelData("haha","hehe")
        add_ModelData("haha","hafcehe")
        add_ModelData("haha","hawahe")
        add_ModelData("haha","heche")
        add_ModelData("hahawfa","hehe")
        add_ModelData("hahawfa","heafhe")
        add_ModelData("first","English")
        add_ModelData("first","chinese")
    }
    id:myItem
    width: 200
    height: 50

    //设置标题部分的属性
    property alias mainWidth: myItem.width
    property alias mainHeight: myItem.height
    property alias mainColor: titleBox.color
    property alias mainRadius: titleBox.radius
    property alias mainSet: choiceShow.text//设置标题首次显示
    property alias mainTextSize: choiceShow.font.pointSize//设置字体大小
    property alias mainTextColor: choiceShow.color

    //设置下拉框属性
    property alias dropBoxWidth: box.width
    property alias dropBoxHeight: box.height
    property alias dropBoxColor: box.color//下拉框填充颜色
    property alias dropBoxRadius: box.radius

    //下拉框内选项标题属性
    property alias titleWidth: menu.width
    property alias titleHeight: menu.height
    //property alias titleColor: strip.color


    //二级控件属性设置
//    property alias secondWidth: box_.width
//    property alias secondHeight: box_.height
//    property alias secondColor : box_.color


    //控件标题部分
    Rectangle{
        id:titleBox
        width: parent.width
        height: parent.height
        radius: 15
        color: "red"
        Text {
            id: choiceShow
            width: 150
            height: 50
            font.pointSize: 10
            color: "blue"
            horizontalAlignment: Text.AlignHCenter//水平居中
            verticalAlignment: Text.AlignVCenter//垂直居中
            text: qsTr("please choose")
        }
        Rectangle{
            width: 50
            height: 50
            radius: 30
            color: "red"
            anchors.left: choiceShow.right
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    box.focus = !box.focus
                }
            }

        }
    }

    //控件下拉框
    Rectangle{
        id:box
        width: titleBox.width
        height: 125
        radius: 5
        visible: focus ? true:false
        anchors.top: titleBox.bottom
        color: "pink"
        z:30

        //下拉框内控件标题按钮属性
        ListView {
            id:menu
            width: titleBox.width; height: parent.height
            model:titleData

            //设置菜单样式
            delegate:ColumnLayout{
                spacing: 2
                Layout.fillWidth: true;

                //一级滑动条
                Rectangle{
                    //radius: 30
                    id:strip
                    width: titleBox.width
                    height: 50
                    radius: 5
                    color: "green"
                    border.color: "black"
                    border.width: 2
                    Text {
                        id:secondTitle
                        width:titleBox.width
                        height: 50
                        text: titleSet
                        horizontalAlignment: Text.AlignHCenter//水平居中
                        verticalAlignment: Text.AlignVCenter//垂直居中
                    }
                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            menu.currentIndex = index
                            //inter_cpp.catalogue_choose = index
                            console.log("[get the index is] :" ,menu.currentIndex)
                            //add_VIDEO_LIST()
                            box_.focus = !box_.focus
                        }
                    }
                }

                //控件组内控件
                Rectangle{
                    id:box_
                    width: titleBox.width
                    height: 50                       // <<<<==========================设置二级下拉条的长度
                    visible: focus ? true:false
                    color: "blue"                   // <<<<==========================设置二级下拉条的底色


                    //二级滑动条（存在于一级滑动条内部）
                    ListView {
                        id:list
                        width: titleBox.width; height: parent.height
                        clip: true


                        Component {
                            id: contactsDelegate
                            Rectangle {
                                id: wrapper
                                width: titleBox.width
                                height: 25
                                color: ListView.isCurrentItem ? "black" : "red"     // <<<<================ 每一条的颜色
                                Text {
                                    x:50
                                    id: contactInfo
                                    text: secondTitleDataSet
                                    color: wrapper.ListView.isCurrentItem ? "red" : "black"   // <<<<================ 字体颜色
                                }
                                MouseArea{
                                    anchors.fill: parent
                                    onClicked: {
                                        list.currentIndex = index
                                        choiceShow.text = contactInfo.text
                                        //box.focus = !box.focus                              // <<<<===============是否点击选项后控件窗口就关闭
                                    }
                                }
                            }
                        }
                        model: secondTitleData
                        delegate: contactsDelegate
                        //focus: true
                    }
                }
            }
            focus: true
            clip: true
        }
    }


    //一级菜单数据结构
    ListModel{
        id:titleData
//        ListElement{
//            titleSet:"first"
//        }
    }

    //二级菜单数据结构
    ListModel{
        id:secondTitleData
//        ListElement{
//           secondTitleDataSet:"first"
//        }
    }

    //数据添加函数
    function add_ModelData(title,data){
        var index = findIndex(title)
        if(index === -1)
        {
            titleData.append({"titleSet":title,"secondTitleData":[{"secondTitleDataSet":data}]})
        }
        else
        {
            titleData.get(index).secondTitleData.append({"secondTitleDataSet":data})
        }

    }

    //数据检索判定函数（被 add_ModelData()调用）
    function findIndex(title){

        for(var i = 0 ;i < titleData.count ; i++)
        {
            if(titleData.get(i).titleSet === title)
            {
                return i;
            }
        }

        return -1;
    }

}