Mouse Areas can't overlap ?

Sillimon

Hello there !

Coming with a problem related to Mouse areas in a listView delegate...

Here is my ListView ! As you can see, there is Sectors with blocks (not always 3, depends on the bytes number of the Sector... that's why i used a repeater as i said below).

On each block, i put a mouse area to display something in a TextArea.

And i want to change the ListView current Index to highlight all the sector and its blocks after a click (cf Sector 0 on the image).

The problem is :

FIRST, i thought to change the ListView currentIndex in my blocks MouseArea.OnClicked BUT... I created my blocks Text with a repeater wich means, if i guess right, that the "index" property is actually pointing on the repeater current index. So while clicking Sector 8 block 2, the Sector 2 started to shine...

THEN, I tried to set a Mouse Area on the Component (so the Repeater would be a child and index would point to the ListView index) and i encountered two problems :

I had to put an Item{} inside the component to set the height of the child MouseArea (since a Component can't have a height property) wich means that Sectors with 14 blocks are baddly displayed and blocks are overlaping.
Mouse Areas on Sectors change the highlight successfully but Mouse Areas on Blocks ain't working anymore (might be because the Sector MouseArea is kinda "above it" and disable them or take the priority...

Does someone has an idea to solve this problem ?

Here is the code i have for now, at the end of my " THEN try"

ListView
            {
                id: listViewCardStructure

                anchors.fill: parent
                orientation: ListView.Vertical
                spacing: 20
                clip: true
                boundsBehavior: Flickable.DragAndOvershootBounds
                snapMode: ListView.NoSnap

                highlight: Component {
                    Rectangle {
                        width: 200; height: 50;
                        color: "#FFFF88"
                        y: listViewCardStructure.currentItem.y;
                        Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } }
                    }
                }
                highlightFollowsCurrentItem: false
                focus: true

                model: listModel
                delegate: component


                Component
                {
                    id: component

                    Item
                    {
                        width: listViewCardStructure.width
                        height: 80

                        Column
                        {
                            id: columnListView

                            Text
                            {
                                id: textDelegate
                                text: sector
                                font.pixelSize: 13
                                font.bold: true
                            }

                            Repeater
                            {
                                id: repeaterBlock
                                model: nbrModelRepeater

                                Text
                                {
                                    text: "  block " + index

                                    MouseArea
                                    {
                                        anchors.fill: parent
                                        acceptedButtons: Qt.LeftButton | Qt.RightButton

                                        onPressed:
                                        {
                                            parent.style = Text.Sunken
                                            parent.color = "blue"
                                        }

                                        onReleased:
                                        {
                                            parent.style = Text.Normal
                                            parent.color = "black"
                                        }

                                        onClicked:
                                        {
                                            readWrite2.setCurrentIndexSectorAndBlock(numSector, index)
                                            textAreaReadWrite.text = readWrite2.readChip();
                                        }
                                    }
                                }
                            }
                        }

                        MouseArea
                        {
                            anchors.fill: parent

                            onClicked:
                            {
                                listViewCardStructure.currentIndex = index;
                            }
                        }
                    }
                }
            }

i know that's a real meli-melo. I somehow tried everything i found on the subject to understand all i could get on ListViews/Delegates

Thankfull

PS: as a non-native english speaker, i apologize for my english and would be pleased to give some more details

Leonardo

Add a property to your Repeater or any of its ancestors. Something like sectorIndex.

property var sectorIndex : index

Then on your block's MouseArea:

listViewCardStructure.currentIndex = myRepeaterOrAnyAncestor.sectorIndex

Sillimon

Did it with an item so i can set the height of the highlight part.

ListView
            {
                id: listViewCardStructure

                anchors.fill: parent
                orientation: ListView.Vertical
                spacing: 20
                clip: true
                boundsBehavior: Flickable.DragAndOvershootBounds
                snapMode: ListView.NoSnap

                highlight: Component {
                    Rectangle {
                        width: rectangleCardStructure.width - 10; height: listViewCardStructure.currentItem.height;
                        color: "#FFFF88"
                        y: listViewCardStructure.currentItem.y;
                        Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } }
                    }
                }
                highlightFollowsCurrentItem: false
                focus: true

                model: listModel
                delegate: component


                Component
                {
                    id: component

                    Item
                    {
                        property int lvIndex: index
                        height: childrenRect.height

                        Column
                        {
                            Text
                            {
                                id: textDelegate
                                text: sector
                                font.pixelSize: 13
                                font.bold: true
                            }

                            Repeater
                            {
                                id: repeaterBlock
                                model: nbrModelRepeater

                                Text
                                {
                                    text: "  block " + index

                                    MouseArea
                                    {
                                        anchors.fill: parent
                                        acceptedButtons: Qt.LeftButton | Qt.RightButton

                                        onPressed:
                                        {
                                            parent.style = Text.Sunken
                                            parent.color = "blue"
                                        }

                                        onReleased:
                                        {
                                            parent.style = Text.Normal
                                            parent.color = "black"
                                        }

                                        onClicked:
                                        {
                                            listViewCardStructure.currentIndex = lvIndex

                                            readWrite2.setCurrentIndexSectorAndBlock(numSector, index)
                                            textAreaReadWrite.text = "Sector " + lvIndex + " Block " + index + " : \n\n" + readWrite2.readChip();
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

But works perfectly, thanks a lot !