listview issue

[joko]

Hi,

I am trying to create a custom combobox using listview, can you please advice my problem.

Below is my listview code:



ListView {
id: comboList

property var currentValue

anchors.fill: parent

boundsBehavior: Flickable.StopAtBounds
interactive: false
clip: true

focus: true

onCurrentIndexChanged: {
if (comboList.model.get(comboList.currentIndex).value !== undefined)
{
comboList.currentValue = comboList.model.get(comboList.currentIndex).value
comboBox.valueChanged();
}
}

delegate: Rectangle {
readonly property bool isCurrent: ListView.isCurrentItem
readonly property bool hovered: mouseArea.containsMouse

width: parent.width
height: itemLayout.implicitHeight + 10
color: hovered ? "light blue" : "transparent"

RowLayout {
id: itemLayout

anchors {
margins: 3
right: parent.right
left: parent.left
verticalCenter: parent.verticalCenter
}

Text {
id: itemText
Layout.fillWidth: true

color: hovered ? "white" : "black"
horizontalAlignment: Qt.AlignLeft
verticalAlignment: Qt.AlignVCenter

text: model.item
}
}

MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true

onClicked: {
comboList.currentIndex = index;
}
}
}
highlightFollowsCurrentItem: false
highlight: Rectangle {
y: comboList.currentItem.y

Behavior on y { NumberAnimation { duration: 100 } }

width: comboList.currentItem.width
height: comboList.currentItem.height

color: "light blue"
}
}


All I wanted is to remove the highlight on the currentItem once the mouse hovers into another item. Is there a way to turn off the highlight once the mouse enters into the list view?

I wanted to copy the behavior of the basic ComboBox element, please advise. TIA.