QML can be multi-select the implementation of the ComboBox

As a result of the project needs, you need to design a multi-select ComboBox, looked at the document, found that QML's own ComboBox does not have many choices. Look at the ComboBox implementation, found that pop-up drop-down menu is implemented with the menu, it seems only to rewrite their own, after all, the menu itself is unable to choose more! The code is not much, look directly to realize it!

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)  {      // Deletes the specified contents of the array in the ARR array, Val content         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&Nbsp;           source: "Switch to your own drop-down button image"          }    }    Component{         id: m_del        Rectangle{             id:rect             color: "White"              implicitWidth: 150             implicitheight: 30            property  bool isselect: false            text{                 anchors.fill:  parent  &nBsp;             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) {         //Cancel an item                           rect.color =  "White"                          //delete the specified string in the text                          Var arr = m_text.split (",");                         arr = removevalue (arr, Label)                          m_text = arr.join (",");                          //Delete the specified contents in the array                          indexs = removevalue (Indexs,index);                      }                    else{                         //Select a                          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        }    }}

There is a place and the official ComboBox some difference, is the need to click the button to put the drop-down list, do not know how to achieve click Other location, close the drop-down list, there is a friend told me, thanks!

This article is from the "men do not have a famous" blog, please be sure to keep this source http://gaohaifeng.blog.51cto.com/6432870/1795667

QML can be multi-select the implementation of the ComboBox