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

Posted 2023-02-16

【中文标题】如何将鼠标滚轮滚动添加到垂直滚动条或滚动区域？

【英文标题】：How to add mousewheel scrolling to the vertical scrollbar or scrolled area?

【发布时间】：2020-09-27 11:16:14

【问题描述】：

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

我对 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 应出现，应同时滚动任务名称和范围 垂直滚动应与鼠标滚轮配合使用 没有弹跳

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

我的彩虹.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, 0, 0, 1) 
                GradientStop  position: 0.167; color: Qt.rgba(1, 1, 0, 1) 
                GradientStop  position: 0.333; color: Qt.rgba(0, 1, 0, 1) 
                GradientStop  position: 0.500; color: Qt.rgba(0, 1, 1, 1) 
                GradientStop  position: 0.667; color: Qt.rgba(0, 0, 1, 1) 
                GradientStop  position: 0.833; color: Qt.rgba(1, 0, 1, 1) 
                GradientStop  position: 1.000; color: Qt.rgba(1, 0, 0, 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？

感谢您的帮助和提示

【参考方案1】：

您可以使用MouseArea。

将它放在您的甘特图上方并使用wheel 信号来滚动您的垂直滚动条。

---

您的代码可能如下所示：

MouseArea 
    anchors.fill: ganttChart

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