如何在QML中绑定到ListView中的委托组件的信号 [英] How to bind to a signal from a delegate component within a ListView in QML

问题描述

假设我有一个ListView的可单击委托组件(或GridView或Repeater).这些委托组件在触发时需要与自定义数据一起发出信号，该信号可由ListView的父代拾取.如何实现信号绑定?

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?

例如以下代码是我的尝试，但我不知道如何将委托组件的trigger信号绑定到root项目中的componentTriggered信号?

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

可访问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)
        }
    }
}

推荐答案

您可以在Component.onCompleted处理程序中连接两个信号.

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

除了调用信号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.

这篇关于如何在QML中绑定到ListView中的委托组件的信号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！