ListView中highlight使用注意事项

解决方法一（推荐）：

将delegate元素背景色设置为半透明或全透明，这里需要注意如果你使用MouseArea来实现hover效果时，更需要注意onExited中，你是否将颜色设置成了不透明纯色。这也会导致highlight无法正常显示出来。

示例：

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轴上方 + 半透明背景色才能达到高亮选中效果。

示例：

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"
  }
}