Mouse Areas can't overlap ?



  • Hello there !

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

    0_1516180793901_ListView.PNG

    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 :

    1. 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.

    2. 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 !


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.