QtQuick2:处理 ScrollView 内的 onWheel 事件 [英] QtQuick2: Handle onWheel event inside of a ScrollView

问题描述

我必须将组件 X 放在 ScrollView 中.组件 X 必须处理鼠标滚轮事件，但 ScrollView 处理它.因此，以下示例(简化)不起作用.

I have to put component X inside of a ScrollView. Component X has to handle mouse wheel event, but ScrollView handles it. So, following example (simplified) doesn't work.

如何让 Rectangle 的鼠标区域处理 OnWheel 事件?

How to let Rectangle's mouse area handle OnWheel event?

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    width: 640
    height: 480

    ScrollView {
        height: 100
        width: 100

        ColumnLayout{
            Rectangle {
                color: "red"
                width: 50
                height: 50
                MouseArea {
                    anchors.fill: parent
                    onWheel: {
                        console.log("onWheel"); // it doesn't work
                    }
                    onClicked: {
                        console.log("onClicked"); // it works
                    }
                }
            }
        }
    }
}

推荐答案

我找到了解决方法，但我无法正确解释.:(

I find a way to solve it, but I can't properly explain it. :(

本文档说明了visual parent 和 object parent，但没有说明它们如何影响事件传播.

This document illustrates the concept of visual parent and object parent, but it dosen't tell how they affect the event propagation.

希望有人能给出清楚的解释.

Hope someone would give a clear explaination.

ApplicationWindow {
    width: 640
    height: 480

    ScrollView {
        id: scroll   // add an id
        height: 100
        width: 100

        ColumnLayout{
            Rectangle {
                id: rect   // add an id
                color: "red"
                width: 50
                height: 50
                MouseArea {
                    parent: scroll      // specify the `visual parent`
                    anchors.fill: rect       // fill `object parent` 
                    onWheel: {
                        console.log("onWheel"); // now it works
                    }
                    onClicked: {
                        console.log("onClicked"); // it works
                    }
                }
            }
            Repeater {
                model: 30
                Text{ text: index }
            }
        }
    }  
}

这篇关于QtQuick2:处理 ScrollView 内的 onWheel 事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！