function - QML:在 ListView 中调用的 ListElement 中定义函数

Question

在 QML ListView 中，我想在单击 MouseArea 时调用一个函数:

ListView{
    anchors.fill: parent
    orientation: ListView.Horizontal

    model: myModel

    delegate:
    Rectangle {
        anchors.fill: parent
        Text {
            anchors.centerin: parent
            text: label
        }
        MouseArea {
            width: 30
            height: parent.height
            onClicked: {
                doSomething()
            }
        }
    }
}

我应该是一个溢出菜单。在 ListModel (myModel) 中，我希望能够说明调用 doSomething() 时会发生什么。我怎么做？也许是这样？

ListModel {
    id: myModel

    ListElement {
        label: "New"
        doSomething: {
            canvas.clear()
        }
    }
}

我不知道。我在网上搜索，但找不到任何东西。
我为此使用了 ListView/Model，因为我想动态添加和删除菜单项。
感谢您的关注! =)

Answer 1

qrc:///main.qml:49 ListElement: 不能为属性值使用脚本

这就是您通过代码获得的结果。因此，您不能将模型元素的任何属性设置为脚本。

我通过将函数放在模型中而不是模型元素中来逃避它:

ListView{
    anchors.fill: parent
    orientation: ListView.Horizontal

    model: myModel

    delegate:
    Rectangle {
        anchors.fill: parent
        color: "red"
        Text {
            anchors.centerIn: parent
            text: label
        }
        MouseArea {
            anchors.centerIn: parent
            width: 30
            height: parent.height
            onClicked: {
                myModel.actions[label]();
            }
        }
    }
}

ListModel {
    id: myModel

    property var actions : {
        "New": function(){ console.log("clicked!"); }
    }

    ListElement {
        label: "New"
    }
}

虽然基于文本的索引操作有点无聊，但您可能应该这样做，以便模型中的每个元素都有一个唯一的属性(如索引)，并将它们用作操作的键字典。

(附带说明，您忘记了鼠标区域的 centerIn，我想知道为什么您使用 30 的宽度而不是仅仅填充父区域)