ListView Highlight Not Displaying

Question

I am trying to highlight the currently selected item in a ListView. Below is the code I'm using; for some reason, while similar code works fine in another ListView of this application, the SelectedRectangle element is never displayed here, although the selected element changes when it should.

Rectangle { id: deviceTree width: (window.width * 2) / 3 height: 400 border { width: 2 color: "black" } ListView { id: deviceTreeView model: deviceTreeModel delegate: deviceTreeDelegate highlight: SelectionRectangle {} anchors.fill: parent anchors.margins: 6 } Component { id: deviceTreeDelegate Rectangle { border.color: "#CCCCCC" width: deviceTree.width height: 30 smooth: true radius: 2 MouseArea { anchors.fill: parent onClicked: { deviceTreeView.currentIndex = index; window.selectedDeviceChanged(deviceName) } } } } } 

SelectedRectangle.qml

 Rectangle { id: selectionRectangle color: "lightsteelblue" smooth: true radius: 5 } 

SOLUTION: The rectangle in deviceTreeDelegate was white by default and overlapped the selection rectangle. Using a property, it is set as trasparent, so the selection can be seen.

Answer 1

This is because the default Rectangle color is white, and the delegate has the highlight. Setting the Rectangle color to "transparent" will highlight the highlight through the delegate.

Answer 2

Your code gets two errors:

• Component for selection property. The name of the component type matches the name of the QML file where it is defined. You defined it in a file called SelectedRectangle.qml, so you need to write highlight: SelectionRectangle {} in your main QML file
• The type of the selection item is Component. Thus, the component that you use for this member must have a type that the component inherits. Or you use a QML component that inherits a Rectangle and Rectangle does not inherit a component. You must wrap your SelectedRectangle in a Component object, as for a delegate.

Finally, you should write something like this for your main component:

 highlight: Component { SelectedRectangle {} }