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"
}
}
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"
}
}
To copy to clipboard, switch view to plain text mode
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.
Bookmarks