How to bind to a signal from a delegate component within a ListView in QML

问题:

Let's say I have a ListView of clickable delegate components (or GridView or Repeater). These delegate components need to emit a signal along with custom data when triggered that can be picked up by the parent of the ListView. How can this signal binding be achieved?

e.g. The following code is my attempt but I don't know how to bind the trigger signal of the delegate component to the componentTriggered signal in the root item?

Item {     id: root     anchors.fill: parent      signal componentTriggered(string name)      onComponentTriggered: {         console.log(name + ' component was triggered')     }      ListModel {         id: myModel          ListElement { name: "alpha" }         ListElement { name: "beta" }         ListElement { name: "gamma" }         ListElement { name: "delta" }     }      ListView {         id: myListView         width: 100         height: 600          model: myModel         delegate: TheDelegate { name: model.name }     } }

which accesses TheDelegate.qml

import QtQuick 2.0  Rectangle {     id: root     width: 100     height: 50     color: "steelblue"     border.color: "white"     border.width: 2      property string name      signal trigger(string name)      Text {         anchors.centerIn: parent         text: model.name     }      MouseArea {         anchors.fill: parent         onClicked: {             console.log(root.name + ' clicked')             root.trigger(root.name)         }     } }

回答1:

You could connect both signals in the Component.onCompleted handler.

Using your code it would be something like this:

ListView {         id: myListView         width: 100         height: 600          model: myModel         delegate: TheDelegate {             name: model.name             Component.onCompleted: {                 trigger.connect(root.componentTriggered)             }         }     }

Instead of calling the signal componentTriggered you could also implement a function, but it depends on your requirements. The signal is OK in any case.

转载请标明出处:How to bind to a signal from a delegate component within a ListView in QML

文章来源: How to bind to a signal from a delegate component within a ListView in QML