如何将鼠标滚轮滚动添加到垂直滚动条或滚动区域？

如何解决如何将鼠标滚轮滚动添加到垂直滚动条或滚动区域？

这是我几个月来第一次（主要是C ++后端/算法开发人员）再次接触QML来为某种调度算法编写小型前端

• 我对QML模型/属性/项目系统和javascript交互有很好的了解
• 我爱上了QML功能，希望能够构建一个工作/生活的前端而无需接触C ++：）
• 在将深层嵌套的矩形/列表视图/滚动视图与所有（延迟）从快速1更改为快速2组合在一起的所有可能解决方案上，我几乎感到束手无策。

这是我肮脏的QtQuick 1.1图表原型-了解我想要达到的目标

• main.qml：https://pastebin.com/ZURZbVeB
• TaskSimulation.qml：https://pastebin.com/LwivsCnT

• 左侧是带有任务名称的列表
• 右侧是显示任务活动的典型甘特图范围
• 绿线是模拟触发的时间轴
• 该示例包含基于计时器的模拟，具有固定数量的模拟（无限）活动的任务

甘特图的模式/要求：

• 任务名称可以大于150-然后名称下方会显示一个hscrollbar
• 范围可以大于400，然后应在底部显示hscrollbar
• 当任务高度> 500时，应显示右侧的vscrollbar，应同时滚动任务名称和范围
• 垂直滚动应与鼠标滚轮一起使用
• 不弹跳

这是我目前用于准备一切的干净迷你测试

我的Rainbows.gml

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.0

Item{
    id: myApp
    
    height: 600
    width: 600
    
    Item {
        id: ganttChart
        width: 400
        height: 400
        anchors.centerIn: parent
        clip: true
        
        property real taskNamesWidth: 100
        
        // runtime
        property real myContentHeight: 2 * ganttChart.height
        property real mytaskNamesContentWidth: 200
        property real myTaskRangesContentWidth: 500
        
        component FillRainbowGradient : LinearGradient
        {
            anchors.fill: parent
            start: Qt.point(0,0)
            end: Qt.point(parent.width,parent.height)
            gradient: Gradient {
                GradientStop { position: 0.000; color: Qt.rgba(1,1) }
                GradientStop { position: 0.167; color: Qt.rgba(1,1,1) }
                GradientStop { position: 0.333; color: Qt.rgba(0,1) }
                GradientStop { position: 0.500; color: Qt.rgba(0,1) }
                GradientStop { position: 0.667; color: Qt.rgba(0,1) }
                GradientStop { position: 0.833; color: Qt.rgba(1,1) }
                GradientStop { position: 1.000; color: Qt.rgba(1,1) }
            }
        }
        
        Row
        {
            height: parent.height
            width: parent.width
            
            Item
            {
                id: taskNames
                width: ganttChart.taskNamesWidth
                height: parent.height
                clip: true
                
                Rectangle
                {
                    id: taskNamesContent
                    width: ganttChart.mytaskNamesContentWidth
                    height: ganttChart.myContentHeight
                    
                    FillRainbowGradient {}
                    
                    x: -hbarTaskNames.position * width
                    y: -vbar.position * height
                }
                
                ScrollBar {
                    id: hbarTaskNames
                    hoverEnabled: true
                    active: hovered || pressed
                    orientation: Qt.Horizontal
                    size: taskNames.width / taskNamesContent.width
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.bottom: parent.bottom
                }
            }
            
            Item
            {
                id: taskRanges
                width: parent.width - taskNames.width
                height: parent.height
                clip: true
                
                Rectangle
                {
                    id: taskRangesContent
                    width: ganttChart.myTaskRangesContentWidth
                    height: ganttChart.myContentHeight
                    
                    FillRainbowGradient {}
                    
                    x: -hbarTaskRanges.position * width
                    y: -vbar.position * height
                }
                
                ScrollBar {
                    id: hbarTaskRanges
                    hoverEnabled: true
                    active: hovered || pressed
                    orientation: Qt.Horizontal
                    size: taskRanges.width / taskRangesContent.width
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.bottom: parent.bottom
                }
            }
        }
        
        ScrollBar {
            id: vbar
            hoverEnabled: true
            active: hovered || pressed
            orientation: Qt.Vertical
            size: ganttChart.height / ganttChart.myContentHeight
            anchors.top: parent.top
            anchors.right: parent.right
            anchors.bottom: parent.bottom
        }
    }
}

问题：

使用鼠标滚轮进行垂直滚动需要什么？ 我需要为此使用ScrollViews还是ListView，还是有办法附加MouseHandler？

感谢您的帮助和提示

解决方法

您可以使用MouseArea。

将其放在ganttChart上方，并使用wheel信号滚动垂直滚动条。

---

您的代码可能看起来像这样：

MouseArea {
    anchors.fill: ganttChart

    onWheel: {
        if (wheel.angleDelta.y > 0) {
            vbar.decrease()
        }
        else {
            vbar.increase()
        }
    }
}