horizontal scrolling elements blocking a vertical scrolling list - qt

Question

I have a ListView that contains a list of rectangles with text. Sometimes the text in the Rectangles is too long to fit so I would like the text to scrollable horizontally. I'm using a ScrollView surrounding the text to make it horizontally scrollable.
The problem is, I can't scroll through the list (vertically) because the scrolling gets intercepted by the horizontal ScrollViews.
Here is what my qml looks like:
ListView { //vertically scrolling list
model: modelName
anchors.fill: parent
id: vListView
delegate: Column {
width: parent.width
spacing: 3
bottomPadding: 2
Rectangle { // rectangles containing the text
width: parent.width
height: 40
radius: 5
id: buttonName
ScrollView {//horizontally scrolling list
contentHeight: -1
anchors.fill: parent
anchors.leftMargin: 18
id: hScrollView
Text {// text that is sometimes too long
width: parent.width
rightPadding: 15
bottomPadding: 5
text: model.data
topPadding: 9
horizontalAlignment: Text.AlignLeft
anchors.centerIn: parent
}
}
}
}
}
How can I get the list to scroll vertically and have the individual text boxes also scroll horizontally?
edit:
I've tried to use the following code to "catch" the scroll-wheel input and scroll the appropriate elements. But I hasn't been working out.
(code is placed in a mouse area that fills the whole thing)
onWheel: {
if (wheel.angleDelta.y > 0) {
vListView.flickableItem.contentX -= vListView.scrollSpeed;
if (vListView.flickableItem.contentX < 0) {
vListView.flickableItem.contentX = 0;
}
} else {
hScrollView.flickableItem.contentX += hScrollView.scrollSpeed;
if (individualCommandScrollView.flickableItem.contentX + hScrollView.flickableItem.width > hScrollView.flickableItem.contentWidth) {
hScrollView.flickableItem.contentX = hScrollView.flickableItem.contentWidth - hScrollView.flickableItem.width;
}
}
}
onClicked: mouse.accepted = false;
onPressed: mouse.accepted =
onReleased: mouse.accepted = false;
onDoubleClicked: mouse.accepted = false;
onPositionChanged: mouse.accepted = false;
onPressAndHold: mouse.accepted = false;

Answer 1

See the following solution using a Flickable instead of a ScrollView and a MouseArea to manually propagate the scroll to the horizontal Flickable when required.
The Flickable will not steal the mouse event from the parent ListView if the horizontal scroll on the text is not necessary.
Note that if all the texts are too long, you will never be able to scroll vertically on the main ListView...
I would recommend to imagine another design to handle long texts (text elide, wrap, multiline, ...).
ListView {
id: vListView
// ...
delegate: Rectangle {
width: parent.width
height: 40
radius: 5
Flickable {
id: hScrollView
contentHeight: -1
contentWidth: text.paintedWidth // <===== to allow horizontal scroll
interactive: contentWidth > width // <===== but only if text is too long
anchors.fill: parent
anchors.leftMargin: 18
Text {
id: text
width: parent.width
rightPadding: 15
bottomPadding: 5
text: model.data
topPadding: 9
horizontalAlignment: Text.AlignLeft
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
enabled: hScrollView.interactive
// manually scroll in Flickable on mouse wheel
onWheel: {
let velocity = vListView.highlightMoveVelocity // use same velocity as the vertical ListView
let scrollValue = wheel.angleDelta.y >= 0 ? velocity : -velocity // move left or right according to wheel value
hScrollView.flick(scrollValue, 0)
}
}
}
}
}

Answer 2

Try to add this to ListView:
ScrollBar.vertical: ScrollBar {}
Or add some margin to Rectangle and add borders or color to see where it is. So you will be able to point outside it and scroll ListView