qt - QML 如何从委托(delegate)调用模型的方法

Question

我有一个简单的 QML 程序，它有一个 ListView。 ListView 的模型和委托(delegate)在单独的 QML 文件中定义。

//Main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
//import TheModel.qml
//import TheDelegate.qml


Window {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ListView {
        anchors.fill: parent
        model: theModel
        delegate: theDelegate
        focus: true

    }
    Button{
        x: 394
        y: 257
        text: "press me"
       onPressed: theModel.append({"color":"black", "cost": 5.95, "name":"Pizza"})
   }

    TheDelegate{
        id: theDelegate
    }

    TheModel{
        id:theModel
    }
}

然后是模型文件

//TheModel.qml
import QtQuick 2.0

ListModel{
    ListElement {
        color:"red";
        name: "Bill Smith"
        number: "555 3264"
    }
    ListElement {
        color:"blue";
        name: "John Brown"
        number: "555 8426"
    }
    ListElement {
        color:"green";
        name: "Sam Wise"
        number: "555 0473"
    }
}

最后是代表

    //TheDelegate.qml
    import QtQuick 2.0
    
    Component {
        Rectangle{
            color: model.color
            width: 100
            height: 100
            MouseArea{
                anchors.fill: parent
                onPressed: model.append({"color":"black", "cost": 5.95, "name":"Pizza"})
            }
        }
    }

如果我点击委托(delegate)的 MouseArea，onPressed 方法将需要创建一个 ListItem，但问题是我无法访问模型的来自委托(delegate)的功能。令人困惑的是，属性是通过 model 在委托(delegate)中访问的。任何人都可以指出这样做的正确方法，比如我是否知道该模型是 ListModel 并且它具有 append 方法，但委托(delegate)不知道，有没有办法将模型转换为已知类型然后调用它的方法？

Answer 1

这可以通过向 TheDelegate 添加一个信号来完成，您可以在 theModel 可用的范围内连接它。我想称其为“包含的组件”，可能有一些花哨的术语 ;-)

请将 TheDelegate.qml 更改为(顺便说一句，为了可重用性，我也将其更改为不是 Component):

import QtQuick 2.0

Rectangle{
    color: model.color
    width: 100
    height: 100

    signal appendRequested(var newItem)

    MouseArea{
        anchors.fill: parent
        onPressed: appendRequested({"color":"black", "cost": 5.95, "name":"Pizza"})
    }
}

然后在 main.qml 中，您可以按如下方式使用它:

ListView {
    anchors.fill: parent
    model: theModel
    delegate: theDelegate

    focus: true
}

Component {
    id: theDelegate

    TheDelegate {
        onAppendRequested: theModel.append(newItem)
    }
}