由于项目需要,需要设计一个可以多选的ComboBox,看了一下文档,发现QML自带的ComboBox确实无法多选。看了一下ComboBox的实现,发现弹出的下拉菜单是用Menu实现的,看来只能自己重写了,毕竟Menu本身就是无法多选的!代码不多,直接看实现吧!

    

import QtQuick 2.5import QtQuick.Controls 1.4import QtQuick.Controls.Styles 1.4Item{    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有些区别,就是需要点击按钮才会将下拉列表收起来,不知道怎样才能实现点击其他位置,关闭下拉列表,有知道的朋友告诉我一声,谢啦!