Nested ScrollView in QML does not respond to wheel

I have a nested ScrollView similar to the following QML:

import QtQuick 2.0
import QtQuick.Controls 1.1

Rectangle {
    width: 200
    height: 600

    ScrollView {
        id: sView
        anchors.fill: parent
        ListView {
            id: list
            boundsBehavior: Flickable.StopAtBounds
            clip: true
            focus: true
            interactive: true
            model: 5
            delegate: Component {
                MouseArea {
                    id: hoverArea
                    width: 100
                    height: 200
                    onClicked: list.currentIndex = index;

                    Rectangle {
                        id: fauxParent
                        anchors.fill: parent
                        border.width: 1
                        border.color: "black"

                        Rectangle {
                            anchors.top: parent.top
                            anchors.left: parent.left
                            height: parent.height
                            width: parent.width / 2
                            border.width: 1
                            border.color: "purple"
                            color: "green"
                            Text {
                                anchors.centerIn: parent
                                text: "stuff"
                            }
                        }
                        ScrollView {
                            //parent: sView
                            anchors.top: fauxParent.top
                            anchors.right: fauxParent.right
                            height: fauxParent.height
                            width: fauxParent.width / 2

                            ListView {
                                model: 3
                                delegate: Component {
                                    Rectangle {
                                        radius: 10
                                        height: 100
                                        width: 100
                                        color: "blue"
                                    }
                                }
                            }
                        }
                    }
                }
            }

        }
    }
}

It seems to work correctly, except that the internal ScrollView will not respond to the mouse wheel: the external ScrollView intercepts this event. The only fix I found in the study for this is to set the inner parent element of scrollview directly to the external scrollview (uncomment the line parent: sView). Unfortunately, this redistributes all five scrollview delegates in the upper right corner of the outer scrollview. Does ScrollView seem to position itself based on its parent?

scrollview, , . , . , .

Windows, , .

+4
1

, .

ScrollView arround ListView?

ScrollViews, Mousewheel .

Rectangle {
    width: 200
    height: 600
    ListView {
        anchors.fill: parent
        id: list
        boundsBehavior: Flickable.StopAtBounds
        clip: true
        focus: true
        interactive: true
        model: 5

        delegate: Component {
            MouseArea {
                id: hoverArea
                width: 100
                height: 200
                onClicked: list.currentIndex = index;

                Rectangle {
                    id: fauxParent
                    anchors.fill: parent
                    border.width: 1
                    border.color: "black"

                    Rectangle {
                        anchors.top: parent.top
                        anchors.left: parent.left
                        height: parent.height
                        width: parent.width / 2
                        border.width: 1
                        border.color: "purple"
                        color: "green"
                        Text {
                            anchors.centerIn: parent
                            text: "stuff"
                        }
                    }
                    ListView {
                        anchors.top: fauxParent.top
                        anchors.right: fauxParent.right
                        height: fauxParent.height
                        width: fauxParent.width / 2
                        model: 3

                        delegate: Component {
                            Rectangle {
                                radius: 10
                                height: 100
                                width: 100
                                color: "blue"
                            }
                        }
                    }
                }
            }
        }
    }
}

Scrollbar, : QtQuick 2.0?

0

Source: https://habr.com/ru/post/1528863/


All Articles