Problems using MouseArea inside a delegate of a Repeater - ends up 1 pixel tall!



  • Good evening everyone, I'm new to these forums, however I've been reading and enjoying all of the knowledge shared here to date!

    I'm having some problems here with using a MouseArea inside of a Text as a delegate of a Repeater. The problem that I seem to be having is that the MouseArea ends up only being accessible across the top pixel of the Text extending the whole length of the Text.

    Can anyone help me shed some light on this please? Thanks so much in advance, as I appreciate and respect the advice of the users on here!

    Here's my problematic code...
    @
    Rectangle {
    width: 1000
    height: 42
    clip: true

        ListModel {
            id: breadCrumb
    
            ListElement {
                name: "Home"
            }
        }
    
        FlowView {
            model: breadCrumb
            anchors.fill: parent
            width: parent.width
            height: parent.height
    
            delegate: Item {
                width: textBlock.paintedWidth + 10
                height: textBlock.paintedHeight
    
                Rectangle {
                    id: rect
                    anchors.fill: parent
                    //width: parent.width
                    //height: parent.height
                    anchors.margins: 8
    
                    Text {
                        id: textBlock
                        anchors.fill: parent
    
                        text: name
                        font.pixelSize: 20
                        //anchors.centerIn: parent
                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            onEntered: { console.log("entered") }
                        }
                    }
                }
    
            }
        }
    }
    

    @

    And here is my FlowView.qml
    @
    import QtQuick 1.1

    Flickable {
    id: flowView
    anchors.fill: parent
    boundsBehavior: Flickable.DragOverBounds
    flickableDirection: Flickable.HorizontalFlick

    contentWidth: parent.width
    contentHeight: flow.childrenRect.height
    
    property alias count: flowRepeater.count
    property int currentIndex: -1
    property variant currentItem
    property alias delegate: flowRepeater.delegate
    property alias flow: flow.flow
    property alias model: flowRepeater.model
    
    onCurrentIndexChanged:  {
        currentItem = model.get(currentIndex)
    }
    
    Flow {
        id: flow
        //width: parent.width
        //height: parent.height
    
        Repeater {
            id: flowRepeater
            model: flowView.model
    
            onCountChanged:  {
                if (flowView.currentIndex === -1 && count > 0) {
                    flowView.currentIndex = 0
                }
                if (flowView.currentIndex >= count) {
                    flowView.currentIndex = count - 1
                }
            }
        }
    
    }
    

    }
    @



  • The mistake is that in your delegate you are using anchors.fill from the rect to the parent item with margins of 8. Since you calculate the total size of the item to be the same as the text rect and then anchor the text item inside that with 8 pixel borders, you are shrinking the size of your mouse area by 8 pixels in all directions.

    Here is a simplified delegate that should work better:
    @
    delegate: Rectangle {
    color: "red"
    width: textBlock.paintedWidth + 10
    height: textBlock.paintedHeight
    Text {
    id: textBlock
    text: name
    font.pixelSize: 20
    anchors.centerIn: parent
    }
    MouseArea {
    anchors.fill: parent
    hoverEnabled: true
    onEntered: { console.log("entered") }
    }
    }
    @



  • Thank you very much for your insightful response! I've fixed my code and removed the margins, etc. and everything is working much better now. I really appreciate your feedback!!! Now if I can only figure out how to find the width in pixels of the longest (widest) line of text contained within a ListModel, still trying to figure that one out, heh. :-)


Log in to reply
 

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