ListView items don't get highlighted

Question

Here's the code:

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1
import QtQuick.Window 2.1
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.1

Window {
    id: window

    /* Interface */
        Rectangle {
            id: dataView

            anchors.topMargin: 10
            height: 30 * model.count
            width: 600

            radius: 5
            border.color: "#333"
            border.width: 1

            color: "black"
            opacity: 0.6

            clip: true

            ListView {
                anchors.fill: parent
                anchors.topMargin: 7
                model: model
                delegate: delegate

                interactive: false

                spacing: 6

                highlight: Rectangle {
                    color: "#333"
                    border.width: 1
                    border.color: "red"
                }

                onHighlightItemChanged: {
                    console.debug(1);
                }
            }

        }

    /* Model */
        ListModel {
            id: model

            ListElement {
                name: "Google Chrome"
                icon: ""
            }
            ListElement {
                name: "Google Chrome"
                icon: ""
            }
            ListElement {
                name: "Google Chrome"
                icon: ""
            }
        }

        Component {
            id: delegate
            Rectangle {
                id: wrapper
                height: 24
                anchors.topMargin: 7
                anchors.bottomMargin: 7

                Row {
                    anchors.fill: parent
                    spacing: 0

                    Image {
                        id: delegateIcon

                        fillMode: Image.Stretch
                        source: icon
                        width: 24
                        height: 24
                    }

                    Text {
                        text: name
                        font.pixelSize: 12
                        font.family: "Segoe UI"
                        color: "#fff"
                    }
                }
            }
        }

}

The problem is described in the headline: when I hover an item with a mouse, nothing happens. Moreover, onHighlightItemChanged only emits at the start of the application.

What am I doing wrong?

Answer 1

1) You need to add a width to your delegate

id: wrapper
height: 24

becomes

id: wrapper
height: 24
width: parent.width // or 100

2) You need to trigger the action "click -> item changed", by adding this

MouseArea {
    anchors.fill: parent
    z: 1
    onClicked:
    {
       list.currentIndex = index
    }
}

under the delegate's Row { }

Note: onHighlightItemChanged: isn't doing what you think (it checks if the delegate component is changed, as if you have 2 possible delegates). This is better:

onCurrentIndexChanged: {
    console.debug("New index : "+ currentIndex);
}