ListView 项目不会突出显示答案

【问题标题】：ListView items don't get highlightedListView 项目不会突出显示
【发布时间】：2014-03-26 17:19:00
【问题描述】：

代码如下：

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

}

标题中描述了问题：当我用鼠标悬停一个项目时，没有任何反应。此外，onHighlightItemChanged 仅在应用程序启动时发出。

我做错了什么？

【问题讨论】：

标签： qt qml qt-quick

【解决方案1】：

1) 您需要为您的委托添加width

id: wrapper
height: 24

变成

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

2) 你需要通过添加这个来触发动作“点击 -> 项目改变”

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

在委托的Row { }下

注意：onHighlightItemChanged: 没有按照您的想法做（它会检查委托组件是否已更改，就好像您有 2 个可能的委托一样）。这样更好：

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

【讨论】：