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