элементы горизонтальной прокрутки, блокирующие список вертикальной прокрутки

Question

У меня есть ListView, который содержит список прямоугольников с текстом. Иногда текст в прямоугольниках слишком длинный для размещения, поэтому я бы хотел, чтобы текст прокручивался горизонтально. Я использую ScrollView, окружающий текст, чтобы сделать его горизонтально прокручиваемым.

Проблема в том, что я не могу прокрутить список (по вертикали), потому что прокрутка перехватывается горизонтальными ScrollViews.

Вот как выглядит мой qml:

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
                }
            }
        }
    }
}

Как сделать так, чтобы список прокручивался по вертикали и чтобы отдельные текстовые поля также прокручивались по горизонтали?

edit:

Я попытался использовать следующий код, чтобы «поймать» вход колеса прокрутки и прокрутить соответствующие элементы. Но я не работал(код находится в области мыши, которая заполняет все это)

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

См. Следующее решение, используя Flickable вместо ScrollView и MouseArea для ручного распространения прокрутки по горизонтали Flickable при необходимости.

Flickable не будет вороватьсобытие мыши от родителя ListView, если горизонтальная прокрутка текста не требуется.

Обратите внимание, что если все тексты слишком длинные, вы никогда не сможете прокрутить вертикально на главном ListView... Я бы порекомендовал представить другой дизайн для обработки длинных текстов (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

Попробуйте добавить это в ListView: ScrollBar.vertical: ScrollBar {} Или добавьте некоторое поле в Rectangle и добавьте границы или цвет, чтобы увидеть, где он находится. Таким образом, вы сможете указать за его пределы и прокрутить ListView