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

Posted 2023-02-16

【中文标题】QML 中的嵌套 ScrollView 不响应鼠标滚轮

【英文标题】：Nested ScrollView in QML doesn't respond to mousewheel

【发布时间】：2014-02-25 23:23:54

【问题描述】：

我有一个嵌套的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 拦截该事件。我在研究中发现的唯一解决方法是将内部滚动视图的父级直接设置为外部滚动视图（取消注释 parent: sView 行）。不幸的是，这会将所有五个滚动视图代表重新定位到外部滚动视图的右上角。 ScrollView 似乎是根据其父级定位自己的？

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

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

【参考方案1】：

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

为什么要在 ListView 周围放置一个 ScrollView？

如果您删除 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"
                            
                        
                    
                
            
        
    

如果你错过了滚动条，看看这个： How to create scrollbar in QtQuick 2.0?