QML：没有调用 Rectangle 的 MouseArea 上的 onClicked 方法

Posted 2023-02-16

【中文标题】QML：没有调用 Rectangle 的 MouseArea 上的 onClicked 方法

【英文标题】：QML: onClicked method on MouseArea of Rectangle is not getting invoked

【发布时间】：2018-06-20 09:39:23

【问题描述】：

我是 Qt/QML 的新手。我正在向QML book 学习，我正在尝试向简单的 ListModel 添加/删除元素的示例。点击“添加项目”后，Rectangle的MouseArea中的onClicked方法没有被调用。委托组件中的 OnClicked 删除方法工作正常。

这里是代码

import QtQuick 2.9
import QtQuick.Window 2.3

Window 
    visible: true
    width: 480
    height: 300
    title: qsTr("Add / Remove")
    color: "blue"

    //ListModel
    ListModel
        id: lmodel
        ListElement number: 0
        ListElement number: 1
        ListElement number: 2
        ListElement number: 3
        ListElement number: 4
        ListElement number: 5
    

    // Add button
    Rectangle
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.margins: 20
        height: 40
        color: "#00ff00"
        border.color: Qt.lighter(color, 1.1)

        Text 
            anchors.centerIn: parent
            text: "Add Item"
        

        MouseArea
            anchors.fill: parent // Edit1
            onClicked:  // this Method is not getting called
                console.log(" add clicked");
                lmodel.append("number": ++parent.count);
            
        

        property int count: 5
    

    //GridView
    GridView
        anchors.fill: parent
        anchors.margins: 20
        clip: true
        model: lmodel

        cellHeight: 45
        cellWidth: 45
        delegate: del

    

    //delegate
    Component
        id: del
        Rectangle
            id: wrapper
            width: 40
            height: 40
            color: "yellow"
            Text 
                text: number
                anchors.centerIn: parent
            
            MouseArea
                anchors.fill: parent
                onClicked: 
                    console.log(" num clicked");
                    lmodel.remove(index);
                
            
        
    

【参考方案1】：

您将MouseArea 锚定到ListModel

anchors.fill: lmodel

第二个问题：GridView 与 MouseArea 重叠。尝试禁用它（只是为了确保）

GridView
    enabled: false

【讨论】：

anchors.fill: 父级也不工作。我已经更新了代码。