Question

我有一个嵌套的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（取消注释parent: sView行）。不幸的是，这会将所有五个scrollview委托重新定位到外部scrollview的右上角。似乎ScrollView基于其父级定位自己？

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

这是一款Windows桌面应用，因此我无需考虑特定于移动设备的问题。

Answer 1

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

为什么要将ScrollView放在ListView上？

如果删除ScrollViews，鼠标滚轮就可以正常工作。

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，请查看以下内容： How to create scrollbar in QtQuick 2.0?

QML中的嵌套ScrollView不响应鼠标滚轮

1 个答案: