QML 可以多選ComboBox的實現

    由於項目需要，需要設計一個可以多選的ComboBox，看了一下文檔，發現QML自帶的ComboBox確實無法多選。看了一下ComboBox的實現，發現彈出的下拉菜單是用Menu實現的，看來只能自己重寫了，畢竟Menu本身就是無法多選的！代碼不多，直接看實現吧！

    

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Item{
    id:root
    implicitWidth: 150
    implicitHeight: 30
    property alias model: lv.model
    property var indexs: []
    property var m_text: ""

    function removeValue(arr,val) {      //刪除數組中指定的內容arr數組，val內容
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] == val) {
                arr.splice(i, 1)
                return arr;
            }
        }
    }
    Button{
        id: btn
        anchors.fill: parent
        Text{
            anchors.fill: parent
            anchors.margins: 5
            anchors.rightMargin: 30
            text: m_text
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            font.pointSize: 12
            clip: true
            elide: Text.ElideMiddle
        }

        onClicked: {
            sv.visible = !sv.visible;
        }
        Image{
            anchors.right: parent.right
            anchors.top: parent.top
            width: root.height
            height:root.height
            source:"換成自己下拉按鈕圖片"
        }
    }

    Component{
        id: m_del
        Rectangle{
            id:rect
            color:"white"
            implicitWidth: 150
            implicitHeight: 30
            property bool isSelect: false
            Text{
                anchors.fill: parent
                horizontalAlignment:Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                font.pointSize: 15
                text: label
            }

            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                onEntered: {
                    if(!isSelect){
                        rect.color = "#CDDCFE";
                    }

                }
                onExited: {
                    if(!isSelect){
                        rect.color = "white"
                    }
                }
                onClicked: {
                    rect.isSelect = !rect.isSelect;
                    if(!rect.isSelect){         //取消某項
                        rect.color = "white"
                        //刪除文本中指定的字符串
                        var arr = m_text.split(",");
                        arr = removeValue(arr,label)
                        m_text = arr.join(",");
                        //刪除數組中記錄指定的內容
                        indexs = removeValue(indexs,index);
                    }
                    else{                       //選擇某項
                        rect.color = "#F9E977"
                        if(m_text.length == 0)
                        {
                            m_text += label;
                        }
                        else{
                            m_text += "," + label;
                        }
                        indexs.push(index)
                    }

                }
            }
        }
    }

    ScrollView{
        id:sv
        anchors.top:btn.bottom
        anchors.left: parent.left
        width: parent.width
        height: 300
        visible: false

        ListView{
            id: lv
            delegate:m_del
            anchors.fill: parent
        }
    }
}

    有個地方和官方的ComboBox有些區別，就是需要點擊按鈕纔會將下拉列表收起來，不知道怎樣才能實現點擊其他位置，關閉下拉列表，有知道的朋友告訴我一聲，謝啦！