Элемент подсветки ListView не отображается

Question

Я пытаюсь выделить выделенный элемент в ListView. Ниже приведен код, который я использую; по какой-то причине, в то время как аналогичный код отлично работает в другом ListView этого приложения, здесь элемент SelectedRectangle никогда не отображается, хотя выбранный элемент изменяется, когда он должен.

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 
} 

РЕШЕНИЯ: прямоугольник deviceTreeDelegate было по умолчанию белого и перекрывается прямоугольник выбора. Используя свойство, оно задается как trasparent, так что выбор можно увидеть.

Answer 1

Ваш код получает две ошибки:

1. Компонент для свойства выделения. Имя типа компонента совпадает с именем файла QML, где он определен. Вы определили его в файле с именем SelectedRectangle.qml, поэтому вам нужно написать highlight: SelectionRectangle {} в вашем основном файле QML.
2. Тип элемента выделения - это компонент. Таким образом, компонент, который вы используете для этого члена, должен иметь тип, который наследует компонент. Или вы используете компонент QML, который наследует Rectangle и Rectangle, не наследует компонент. Вы должны заключить свой SelectedRectangle в объект Component, как и для делегата.

Наконец, вы должны написать что-то вроде этого для компонента выделения:

highlight: Component { 
    SelectedRectangle {} 
} 

Answer 2

Это связано с цветом прямоугольника по умолчанию быть белым и гвоздем штабелирования под делегатом. Установка цвета Rectangle на «прозрачный» позволит выделить подсветку через делегат.