Qt QML中的嵌套滚动视图不';对鼠标滚轮没有反应

Qt QML中的嵌套滚动视图不';对鼠标滚轮没有反应,qt,qml,qtquick2,Qt,Qml,Qtquick2,我有一个嵌套的ScrollView,类似于以下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

我有一个嵌套的ScrollView,类似于以下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"
                                    }
                                }
                            }
                        }
                    }
                }
            }

        }
    }
}
它似乎运行正常,只是内部ScrollView不会响应鼠标滚轮:外部ScrollView截获该事件。我在研究中发现的唯一修复方法是将内部scrollview的父视图直接设置为外部scrollview(取消注释
父视图:sView
行)。不幸的是,这会将所有五个scrollview代理重新定位到外部scrollview的右上角。ScrollView似乎是基于其父视图来定位自己的

作为记录,我的实际应用程序在scrollview中包装了页面的一大部分,以便允许用户访问可能超出当前窗口大小界限的部分。但是,本节的内容有各种不同的控件,用于各种不同的目的,包括一些滚动视图。因此,我也会接受另一种方式,在一组对窗口来说太大的通用内容周围移动


这是一个Windows桌面应用程序,所以我不需要考虑特定于移动的问题。

你嵌套了四个处理滚动事件的元素。

为什么将滚动视图放在列表视图的周围

如果移除滚动视图,鼠标滚轮工作正常

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"
                            }
                        }
                    }
                }
            }
        }
    }
}
如果错过滚动条,请查看以下内容: