【Qt开发】qml组件下拉列表的实现(一)

由于ComboBox需要定制，于是根据已有的的例子，自己重写了一下该控件的交互和样式。主要修改的地方有两点：(1)当鼠标离开下拉区域时，下拉列表将自动收回。不过可能实现的效果不是很好，当鼠标滑动速度较快时列表收回的动作并没有被触发。(2)调整了高亮效果。当鼠标划过和被选中时的状态有所区分，主要响应了三个槽函数: onClick(),onEnter(),onExited()。

在修改上述的第一点时，遇到了一点问题: 父组件和子组件的MouseArea，只能有其中一个会响应鼠标的事件。也就是当Mouse事件被其中一个组件捕获了，那么该事件就不会再传递下去，其他组件就捕捉不到这个事件了。所以当子组件MouseArea有效时(用作高亮效果的展示 )，父组件MouseArea被屏蔽了(检测不到鼠标是否离开了下拉区域)。没有想到好的解决方法，就用了一种有点取巧但又很简单的方法:
子组件被包含在父组件中，并且父组件的尺寸比子组件大一些；当鼠标坐标移出子组件时，父控件MouseArea就有效了。

废话不多说了，直接上代码(qml):

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5

import QtQuick 1.1

Rectangle {

id:comboBox

property variant items: ["test0", "test1", "test2", "test3"]

property alias selectedItem: chosenItemText.text;

property alias selectedIndex: listView.currentIndex;

signal comboClicked;

width: 110;

height: 30;

smooth:true;

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:4;

anchors.top: chosenItem.bottom;

anchors.topMargin: 2

color: "lightgray"

Rectangle{

id: dropDownMask

height: 3

width:parent.width

anchors.bottom: listView.top

}

ListView {

id:listView

height:250

width: dropDown.width-4

anchors.horizontalCenter: parent.horizontalCenter

anchors.top: dropDownMask.bottom

anchors.topMargin: -1

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

}

        Text {

text: modelData

        anchors.top: parent.top;

        anchors.left: parent.left;

anchors.margins: 5;

        font.pointSize: 14;

        z:1

}

        MouseArea {

        anchors.fill: parent;

hoverEnabled: true

        onClicked: {

comboBox.state = ""

var preSelection = chosenItemText.text

chosenItemText.text = modelData

if(chosenItemText.text != preSelection){

comboBox.comboClicked();

}

listView.currentIndex = index;

}

onEntered: mouseMoveHighLight.opacity = 0.5;

onExited: mouseMoveHighLight.opacity = 0;

}

}

highlight: Rectangle {

width:listView.width;

        height:comboBox.height;

color: "green";

radius: 4

}

}

MouseArea{

anchors.fill: dropDown

hoverEnabled: true

onExited: {

if(!containsMouse)

comboBox.state = "";

}

}

}

states: State {

name: "dropDown";

PropertyChanges { target: dropDown; height:30*comboBox.items.length+4 }

}

transitions: Transition {

NumberAnimation { target: dropDown; properties: "height"; easing.type: Easing.OutExpo; duration: 200 }

}

}

备注

ComboBox原型参考自:点击打开链接