import QtQuick 2.0
import QtQuick.Layouts 1.1
import QtGraphicalEffects 1.0
Item
{
id: container
property color color: "white"
property color hoverColor: "#5692c4"
property int fontSize: 12
property alias model: listView.model
property alias comboState: dropDown.state
property int index: 0
property Component rowDelegate: defaultRowDelegate
signal valueChanged(int id)
Component
{
id: defaultRowDelegate
Text
{
anchors {
fill: parent
rightMargin: 25
}
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignRight
font {
pointSize: container.fontSize
family: fontFamily
}
text: parent.modelItem.item
}
}
Rectangle
{
id: main
anchors.fill: parent
color: container.color
clip: true
Image
{
id: arrowIcon
anchors{
right: main.right
verticalCenter: parent.verticalCenter
}
fillMode: Image.PreserveAspectFit
source: "/image/arrow_down.png"
}
}
Loader
{
id: topRow
anchors.fill: parent
focus: true
clip: true
sourceComponent: rowDelegate
property variant modelItem
}
MouseArea
{
id: mouseArea
anchors.fill: container
onClicked: { toggle() }
}
Rectangle
{
id: dropDown
width: container.width; height: 0
anchors.top: container.bottom
anchors.topMargin: -1
clip: true
Behavior on height { NumberAnimation { duration: 100 } }
Component
{
id: myDelegate
Rectangle
{
width: dropDown.width; height: container.height
color: "transparent"
Loader
{
id: loader
anchors.fill: parent
sourceComponent: rowDelegate
property variant modelItem: model
}
property variant modelItem: model
MouseArea
{
id: delegateMouseArea
anchors.fill: parent
onEntered: listView.currentIndex = index
onClicked: close(true)
}
}
}
ListView
{
id: listView
width: container.width; height: container.height * count
delegate: myDelegate
highlight: Rectangle {
anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined;
color: container.hoverColor
}
boundsBehavior: Flickable.StopAtBounds
}
Rectangle
{
id: listViewCon
anchors.fill: listView
color: "transparent"
border.color: "lightgray"
border.width: 1
}
states: [
State {
name: "visible";
PropertyChanges { target: dropDown; height: container.height * listView.count }
}
]
}
function toggle() {
if (dropDown.state === "visible") { close(false) } else { open() }
}
function open() {
dropDown.state = "visible"
listView.currentIndex = container.index
}
function close(update) {
dropDown.state = ""
if (update) {
container.index = listView.currentIndex
topRow.modelItem = listView.currentItem.modelItem
valueChanged(listView.currentIndex)
}
}
Component.onCompleted: {
listView.currentIndex = container.index
if (listView.currentItem)
topRow.modelItem = listView.currentItem.modelItem
}
}
Bookmarks