由于项目需要,需要设计一个可以多选的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有些区别,就是需要点击按钮才会将下拉列表收起来,不知道怎样才能实现点击其他位置,关闭下拉列表,有知道的朋友告诉我一声,谢啦!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。