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: trueListModel { 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.1Flickable {
id: flowView
anchors.fill: parent
boundsBehavior: Flickable.DragOverBounds
flickableDirection: Flickable.HorizontalFlickcontentWidth: 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. :-)