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)
}
}
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With