Can't Get Mousearea in Delegate of Listview To Work

ggalt

I've been trying to get a mousearea to work in a listview delegate, but have had no success. I've put together a simple QML example built entirely in the designer, except for the addition of the mousearea to the delegate. From everything I've read on these forums and elsewhere, this should work. While the simple mousearea on the left returns a message to the console, the mousearea within the delegate does not.

Any thoughts? What am I missing?

BTW, this is under QtQuick 2.0.

Also, changing the delegate from an "Item" to a "Rectangle" makes no difference. I've also tried an Item or Rectangle inside a Component without luck.

Thanks,

George

@import QtQuick 2.0

Rectangle {
id: rectangle2
width: 360
height: 360

Rectangle {
    id: rectangle1
    width: 99
    height: 360
    color: "#ffffff"
    anchors.bottom: parent.bottom
    anchors.bottomMargin: 0
    anchors.top: parent.top
    anchors.topMargin: 0
    anchors.left: parent.left
    anchors.leftMargin: 0

    MouseArea {
        id: mousearea1
        anchors.fill: parent
        onClicked: {
            console.debug("rect click")
        }
    }
}

Rectangle {
    id: rectangle3
    x: 99
    y: 0
    width: 261
    height: 360
    color: "#ffffff"
    anchors.bottom: parent.bottom
    anchors.bottomMargin: 0
    anchors.top: parent.top
    anchors.topMargin: 0
    anchors.right: parent.right
    anchors.rightMargin: 0

    ListView {
        id: list_view1
        anchors.fill: parent
        delegate: Item {
            x: 5
            height: 40
            Row {
                id: row1
                spacing: 10
                Rectangle {
                    width: 40
                    height: 40
                    color: colorCode
                }

                Text {
                    text: name
                    anchors.verticalCenter: parent.verticalCenter
                    font.bold: true
                }
            }
            MouseArea {
                id: mousearea2
                anchors.fill: parent
                onClicked: {
                    console.debug("list click")
                }
            }
        }
        model: ListModel {
            ListElement {
                name: "Grey"
                colorCode: "grey"
            }

            ListElement {
                name: "Red"
                colorCode: "red"
            }

            ListElement {
                name: "Blue"
                colorCode: "blue"
            }

            ListElement {
                name: "Green"
                colorCode: "green"
            }
        }
    }
}

}
@

olheem

The width of your Item and correspondingly of your MouseArea is 0.

Change line 48 to

height: 40; width: list_view1.width

and it should work.

ggalt

OK, I'll just go over in this corner and hide.

How could I have been so stupid??!!

Thanks! ;-)