Solved Mouse Areas can't overlap ?
-
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
-
-
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
-
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 !