解决方法一（推荐）：
将delegate元素背景色设置为半透明或全透明，这里需要注意如果你使用MouseArea来实现hover效果时，更需要注意onExited中，你是否将颜色设置成了不透明纯色。这也会导致highlight无法正常显示出来。
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| ListView {
id: listView
anchors.fill: parent
anchors.bottomMargin: 60
model: ListModel {
id: listViewModel
}
delegate: listViewDelegate
ScrollBar.vertical: ScrollBar {
anchors.left: parent.right
}
header: listViewHeader
highlight: Rectangle {
color: "#f0f0f0"
}
// 去除动画效果
highlightMoveDuration: 0
highlightResizeDuration: 0
}
Component {
id: listViewDelegate
Rectangle {
height: 45
width: listView.width
// 注意这里需要设置为纯透明或半透明色，否则highlight元素会无法显示出来
color = "#00000000"
MouseArea {
// ...一些元素
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onEntered: {
color = "#f0f0f0"
}
onExited: {
// 注意这里也需要设置为纯透明或半透明色，否则highlight元素会无法显示出来
color = "#00000000"
}
onClicked: {
listView.currentIndex = index
}
}
}
}
|
解决方法二：
如果delegate的元素含有背景色会导致highlight元素无法正常显示，只能用调整z轴坐标至ListView Z轴上方 + 半透明背景色才能达到高亮选中效果。
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| ListView {
id: listView
anchors.fill: parent
anchors.bottomMargin: 60
model: ListModel {
id: listViewModel
}
delegate: listViewDelegate
ScrollBar.vertical: ScrollBar {
anchors.left: parent.right
}
header: listViewHeader
highlight: Rectangle {
// 设置背景色为透明状态
color: "#50f0f0f0"
// 设置Z轴在当前listview上层
z: listView.z + 1
}
// 去除动画效果
highlightMoveDuration: 0
highlightResizeDuration: 0
}
Component {
id: listViewDelegate
Rectangle {
height: 45
width: listView.width
// 元素设置为纯透明背景色
color: "#00000000"
}
}
|
