如何正確清除的ListView設爲Qml選擇

Question

如果我有以下幾點：

import QtQuick 2.4 
import QtQuick.Controls 1.3 
import QtQuick.Window 2.2 
import QtQuick.Dialogs 1.2  

ApplicationWindow { 
    title: qsTr("Hello World") 
    width: 800 
    height: 700 
    visible: true 

    property var myArray: [1, 2, 3, 4, 5, 6,7,8,9,10,11,12,13,14,15,16,17,18,19,20] 

    menuBar: MenuBar { 
     Menu { 
      title: qsTr("&File") 
      MenuItem { 
       text: qsTr("&Open") 
       onTriggered: messageDialog.show(qsTr("Open action triggered")); 
      } 
      MenuItem { 
       text: qsTr("E&xit") 
       onTriggered: Qt.quit(); 
      } 
     } 
    } 

    Rectangle { 
     id: myButton 
     anchors.top: parent.top 
     anchors.topMargin: 5 
     color: "yellow" 
     width: 100 
     height: 25 
     radius: 3 
     anchors.horizontalCenter: parent.horizontalCenter 
     Text { 
      text: "Clear Selection" 
      anchors.fill: parent 
      horizontalAlignment: Text.AlignHCenter 
      verticalAlignment: Text.AlignVCenter 
     } 

     MouseArea { 
      anchors.fill: parent 
      onClicked: { 
       myListView.currentIndex = -1 
      } 
     } 
    } 

    ListView { 
     id: myListView 
     width: 300 
     anchors.horizontalCenter: parent.horizontalCenter 
     anchors.top: myButton.bottom 
     anchors.topMargin: 5 
     anchors.bottom: parent.bottom 
     currentIndex: -1 
     //highlightFollowsCurrentItem: false 
     highlight: Rectangle { 
      color: "pink" 
      radius: 3 
      width: parent.width - 10 
      height: 25 
      //y: myListView.currentItem.y 
      anchors.horizontalCenter: parent.horizontalCenter 
     } 
     clip: true 
     model: myArray 
     delegate: Rectangle { 
      width: parent.width - 10 
      height: 25 
      color: "transparent" 
      border.color: "cyan" 
      anchors.horizontalCenter: parent.horizontalCenter 
      Text { 
       text: myArray[index] 
       horizontalAlignment: Text.AlignHCenter 
       verticalAlignment: Text.AlignVCenter 
       anchors.fill: parent 
      } 

      MouseArea { 
       anchors.fill: parent 
       onClicked: myListView.currentIndex = index 
      } 
     } 
    } 

    MessageDialog { 
     id: messageDialog 
     title: qsTr("May I have your attention, please?") 

     function show(caption) { 
      messageDialog.text = caption; 
      messageDialog.open(); 
     } 
    } 
} 

當單擊清除選擇按鈕，我收到以下內容：
QRC：/main.qml：67：類型錯誤：無法讀取屬性null
qrc：/main.qml：64：TypeError：無法讀取null的屬性

如何清除選擇而不會出現錯誤？它似乎沒有使應用程序崩潰，但是我有一個列表視圖，該視圖根據另一個列表視圖選擇進行更改，並且該錯誤幾次發生，使Qt Creator中的調試輸出變得混亂。我曾在Qt的5.4注意到這一點，5.5

Answer 1

的documentation for ListView說：

An instance of the highlight component is created for each list. The geometry of the resulting component instance is managed by the list so as to stay with the current item, unless the highlightFollowsCurrentItem property is false.

所以你不必試圖管理的亮點項目自己的位置。如果你想定位的亮點，創建一箇中間父項改爲：

highlight: Item { 
    Rectangle { 
     color: "pink" 
     radius: 3 
     width: parent.width - 10 
     height: 25 
     anchors.horizontalCenter: parent.horizontalCenter 
    } 
} 

至於爲什麼會發生，很可能是因爲亮點項目被重設父，留下在其parent屬性是null的狀態。你可以用下面的代碼測試了這一點：

anchors.horizontalCenter: { print(parent); parent.horizontalCenter } 

Answer 2

普遍的問題是，如果你有一個foo，這是應該有一個bar，那麼你引用它爲foo.bar，但是，如果foo沒有正確初始化，那麼它不能有bar，因爲它不存在（還）。在你的情況下，似乎parent未正確初始化，所以它沒有分別有width和horizontalCenter（在delegate，也許）。解決方法是正確初始化其成員將被使用的對象，在我們的例子中，parent。

Answer 3

我在Qt論壇上也問過這個問題（https://forum.qt.io/topic/62328/clearing-a-qml-listview-selection），但是堆棧響應速度更快。檢查父項值是否有效：

import QtQuick 2.4 
import QtQuick.Controls 1.3 
import QtQuick.Window 2.2 
import QtQuick.Dialogs 1.2 

ApplicationWindow { 
    title: qsTr("Hello World") 
    width: 800 
    height: 700 
    visible: true 

    property int myMargin: 5 

    menuBar: MenuBar { 
     Menu { 
      title: qsTr("&File") 
      MenuItem { 
       text: qsTr("&Open") 
       onTriggered: messageDialog.show(qsTr("Open action triggered")); 
      } 
      MenuItem { 
       text: qsTr("E&xit") 
       onTriggered: Qt.quit(); 
      } 
     } 
    } 

    Rectangle { 
     id: myButton 
     anchors.top: parent.top 
     anchors.topMargin: myMargin 
     color: "yellow" 
     width: 100 
     height: 25 
     radius: 3 
     anchors.horizontalCenter: parent.horizontalCenter 
     Text { 
      text: "Clear Selection" 
      anchors.fill: parent 
      horizontalAlignment: Text.AlignHCenter 
      verticalAlignment: Text.AlignVCenter 
     } 

     MouseArea { 
      anchors.fill: parent 
      onClicked: { 
       myListView.currentIndex = -1 
      } 
     } 
    } 

    Rectangle { 
     width: 300 
     anchors.top: myButton.bottom 
     anchors.topMargin: myMargin 
     anchors.bottom: parent.bottom 
     anchors.horizontalCenter: parent.horizontalCenter 

     ListView { 
      id: myListView 
      anchors.fill: parent 
      currentIndex: -1 
      spacing: 3 
      highlightMoveDuration: 25 
      highlight: Rectangle { 
       width: parent ? parent.width - 10 : 0 
       height: parent ? 25 : 0 
       color: "pink" 
       radius: 3 
       anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined 
      } 
      clip: true 

      model: ListModel { 
       id: myArray 
       Component.onCompleted: { 
        for (var i = 1; i < 46; i++) 
         append({number: i}) 
       } 
      } 

      delegate: Rectangle { 
       width: parent ? parent.width - 10 : 0 
       height: parent ? 25 : 0 
       color: "transparent" 
       border.color: "cyan" 
       anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined 
       Text { 
        text: number 
        horizontalAlignment: Text.AlignHCenter 
        verticalAlignment: Text.AlignVCenter 
        anchors.fill: parent 
       } 

       MouseArea { 
        anchors.fill: parent 
        onClicked: { 
         myListView.currentIndex = index 
        } 
       } 
      } 
     } 
    } 

    MessageDialog { 
     id: messageDialog 
     title: qsTr("May I have your attention, please?") 

     function show(caption) { 
      messageDialog.text = caption; 
      messageDialog.open(); 
     } 
    } 
}