import QtQuick 2.0
import QtQuick.Controls 1.1
Rectangle {
id:comboBox
property variant items: ["100", "45", "63", "123","23","100", "45", "63", "123","23","100", "45", "63", "123","23"]
property alias selectedItem: chosenItemText.text;
property alias selectedIndex: listView.currentIndex;
property var selectedname: []
signal comboClicked;
width: 110;
height: 30;
smooth:true;
function addnum(num){
var numindex = selectedname.indexOf(num)
if(numindex!=-1){
//添加时如果已经有值则不处理
}
else{
//添加时如果没有值则添加
selectedname.push(num)
}
}
function deletenum(num){
var numindex = selectedname.indexOf(num)
if(numindex!=-1){
//删除时如果有值则删除
selectedname.splice(numindex,1)//删除指定位置的一个数值
}
else{
//删除时如果没有值则不处理
}
}
Rectangle {
id:chosenItem
radius:4;
width:parent.width;
height:comboBox.height;
color: "#2EB3FF"
smooth:true;
Text {
anchors.top: parent.top;
anchors.left: parent.left;
anchors.margins: 3;
anchors.verticalCenter: parent.verticalCenter
id:chosenItemText
text:comboBox.items[0];
font.family: "Arial"
font.pointSize: 14;
smooth:true
}
MouseArea {
anchors.fill: parent;
onClicked: {
comboBox.state = comboBox.state==="dropDown"?"":"dropDown"
}
}
}
Rectangle {
id:dropDown
width:comboBox.width;
height:0
clip:true;//剪切子元素
radius:0
anchors.top: chosenItem.bottom;
anchors.topMargin: 2
color: "lightgray"
ListView {
id:listView
clip: true
//interactive:false
height:250
width: dropDown.width-4
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: dropDown.top
anchors.topMargin: 4
z:1
model: comboBox.items
currentIndex: 0
delegate: Item{
width:listView.width;
height: comboBox.height;
Rectangle {
id: mouseMoveHighLight
width:listView.width;
height:comboBox.height;
color: "green";
opacity: 0
radius: 4
z:0
}
CheckBox {
id: checkBox1
anchors.top: parent.top;
anchors.left: parent.left;
anchors.margins: 5;
text: modelData
onCheckedStateChanged: {
if(checked){
addnum(modelData)
}
else{
deletenum(modelData)
}
console.log(selectedname);
// selectedItem = selectedname
chosenItemText.text = selectedname.toString()
}
}
MouseArea {
anchors.fill: parent;
hoverEnabled: true
onClicked: {
checkBox1.checked = !checkBox1.checked
listView.currentIndex = index;
}
onEntered: mouseMoveHighLight.opacity = 0.5;
onExited: mouseMoveHighLight.opacity = 0;
}
}
highlight: Rectangle {
width:listView.width;
height:comboBox.height;
color: "green";
radius: 4
}
}
ScrollBar {
scrollArea: listView
height: listView.height
width: 10
anchors.right: listView.right
}
}
states: State {
name: "dropDown";
PropertyChanges { target: dropDown; height:260 }
}
transitions: Transition {
NumberAnimation { target: dropDown; properties: "height"; easing.type: Easing.OutExpo; duration: 200 }
}
}
