QML：帶「後退」按鈕的ListView和工具欄

Question

我試圖弄清楚這一點，我卡住了。所以我有一些簡單的ListView，擴展委託和一個帶有「返回」按鈕的工具欄。這是我想要的是能夠將onClick動作從按鈕重定向到當前展開的元素（主要是將其摺疊）。

我會後一些代碼後，我會清理，但現在這已是它（不工作的例子）：

Rectangle { 
    id: main 
    Toolbar { 
     id: myTolbar 
     Button{ id: backButton } 
    } 
    ListModel { 
     id: myDelegate 
     ListElement { option: "OptionA" } 
     /// .... etc. 
    } 

    ListView { 
     id: myList 
     model: dataModel 
     delegate: myDelegate 
    } 
    Component { 
     id: myDelegate 
     Text{ text: option } 
     states: State{ 
      name: 'details' 
      PropertyChanges { } //some property magic 
     } 

     MouseArea { 
      onClick: state='details' 
      //!!!! here I need some help - how to "tell" backButton 
      //to change state of currently shown item back to default state ('') 
     } 
    } 
} 

Answer 1

這裏是一個可以工作的解決方案

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5 
import QtQuick 1.1 
import com.nokia.symbian 1.1 // For ToolBar and ToolButton; Replace with whatever you want 

Rectangle { 
    id: main 
    property int curSelectedIndex: -1 

    ToolBar { 
     id: myTolbar 
     anchors.top: parent.top 
     ToolButton { 
      id: backButton 
      text: "Back" 
      onClicked: { 
       if (main.curSelectedIndex != -1) { 
        dataModel.setProperty(main.curSelectedIndex, "selected", false) 
        main.curSelectedIndex = -1 
       } 
      } 
     } 
    } 
    ListModel { 
     id: dataModel 
     ListElement { option: "OptionA"; selected: false } 
     ListElement { option: "OptionB"; selected: false } 
     ListElement { option: "OptionC"; selected: false } 
     /// .... etc. 
    } 

    ListView { 
     id: myList 
     anchors {top: myTolbar.bottom; bottom: parent.bottom; right: parent.right; left: parent.left } 
     model: dataModel 
     delegate: myDelegate 
    } 
    Component { 
     id: myDelegate 
     Item { 
      height: txOption.height 
      width: myList.width 
      Text { 
       id: txOption 
       font.pointSize: 15 
       text: option 
      } 
      states: [ 
       State { 
        name: 'details'; when: model.selected 
        PropertyChanges {target: txOption; color: "red" } //some property magic 
       } 
      ] 

      MouseArea { 
       anchors.fill: parent 
       onClicked: { 
        console.debug(index + " selected") 
        if (main.curSelectedIndex != -1) 
         dataModel.setProperty(main.curSelectedIndex, "selected", false) 
        main.curSelectedIndex = index 
        dataModel.setProperty(index, "selected", true) 
       } 
      } 
     } 
    } 
}