Why my highlight item quick show and disapper? - qt

Question

I write a simple ListView and want to highlight the item when keyboard arrow key pressed.
The program look like well but the highlight function work strange,it quickly show and the disapper in my eye.This not the effect I wanted,I want it always show highlight color when the current item is highlight.
import QtQuick 2.15
import QtQuick.Window 2.15
Rectangle {
width: 400
height: 400
Component {
id: nameDelegate
Rectangle {
width: ListView.view.width
height: 30
Text {
anchors.centerIn: parent
text: index
font.pixelSize: 14
}
}
}
ListView {
anchors.fill: parent
spacing: 5
focus: true
model: 10
delegate: nameDelegate
highlight: Rectangle {
width: ListView.view.width
height: ListView.view.currentItem.height
color: "lightGray"
}
}
}
Add New Info
If I change delegate item(rectangle) to below
Rectangle {
width: ListView.view.width
height: 30
color: "#ada"
Text {
anchors.centerIn: parent
text: index
font.pixelSize: 14
}
}
And I want to the highligh item show lightgray when arrow key press, how can I do this?

Answer 1

It's because of stacking order.
The highlight's default z value is 0. Each delegate has z value of 1, so by default the highlight is behind each delegate.
Your delegate has a white Rectangle as its background, so the highlight will not be visible.
You can either remove the white background from the delegate (e.g. just use a plain Item or set the color of the rectangle to be transparent) or increase the z value of the highlight. The latter will result in the text not being visible, though, so you would have to rethink how the highlight could look. For example, you could make it an underline instead of a solid block of colour:
ListView {
anchors.fill: parent
spacing: 5
focus: true
model: 10
delegate: nameDelegate
highlight: Item {
z: 2
Rectangle {
width: parent.width
height: 1
y: parent.height - height
color: "lightGray"
}
}
}