QML 可以多选ComboBox的实现

Posted 2020-08-03

    由于项目需要，需要设计一个可以多选的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有些区别，就是需要点击按钮才会将下拉列表收起来，不知道怎样才能实现点击其他位置，关闭下拉列表，有知道的朋友告诉我一声，谢啦！

本文出自 “男人无需赫赫有名” 博客，请务必保留此出处http://gaohaifeng.blog.51cto.com/6432870/1795667