ListView的項目沒有得到突出

Question

下面的代碼：

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僅在應用程序的開始處發出。

我在做什麼錯？

Answer 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); 
}