如何让Qt5 QML Horizontal ListView支持鼠标滚轮滚动？

嘿，我来帮你搞定这个问题！你的Horizontal ListView没法用鼠标滚轮水平滚动，主要是因为默认情况下鼠标滚轮事件是关联垂直滚动的，再加上代码里有几个可以优化的小问题，咱们一步步来调整。

先看看你原代码里的问题：

• 多嵌套了一层Flickable：ListView本身就是Flickable的子类，自带滚动能力，额外包一层反而会干扰事件传递，完全没必要
• 错误的contentY绑定：水平ListView的滚动靠调整contentX，绑定contentY是无效的
• 没有处理鼠标滚轮的事件转换：需要把垂直滚轮的操作映射成水平滚动的逻辑

下面是修改后的完整代码，我已经帮你调整好了关键部分：

import Felgo 3.0
import QtQuick 2.0
import QtQuick.Layouts 1.13
import QtQuick.Controls 2.5

App {
    NavigationStack {
        Page {
            title: qsTr("Main Page")
            anchors.fill: parent

            Rectangle {
                anchors.centerIn: parent
                color: "green"
                height: 66
                width: 333

                ListView {
                    id: horizontalListView
                    orientation: ListView.Horizontal
                    clip: true
                    spacing: 16
                    anchors.fill: parent
                    interactive: true
                    focus: true

                    // 核心：把鼠标滚轮的垂直滚动转为水平滚动
                    WheelHandler {
                        acceptedButtons: Qt.NoButton // 不拦截鼠标点击事件
                        onWheel: {
                            // 这里的0.5是滚动速度系数，你可以根据需求调整大小
                            horizontalListView.contentX += wheel.angleDelta.y * 0.5
                        }
                    }

                    delegate: Rectangle {
                        color: Qt.rgba(Math.random(),Math.random(),Math.random(),1);
                        width: 244
                        height: 66
                        radius: 14
                    }

                    model: 30
                    Layout.fillWidth: true
                    Layout.fillHeight: true

                    // 只保留水平滚动条，垂直的可以去掉，避免混淆
                    ScrollBar.horizontal: ScrollBar {}
                }
            }
        }
    }
}

关键调整说明： #

1. 移除多余的Flickable：直接去掉了原来的listController，让ListView直接作为Rectangle的子元素，事件传递更顺畅
2. 添加WheelHandler处理滚轮事件：这是Qt Quick Controls提供的专门处理滚轮的组件，我们在onWheel回调里，把滚轮的垂直增量（wheel.angleDelta.y）转换成水平方向的contentX调整，系数0.5可以根据你想要的滚动快慢自行修改
3. 清理无效绑定：删掉了错误的contentY: listController.contentX，水平滚动只需要关注contentX
4. 简化滚动条设置：去掉了垂直滚动条，因为水平列表不需要垂直滚动，界面更简洁

兼容低版本Qt的方案： #

如果你的Qt版本低于5.14（或者Qt Quick Controls 2版本低于2.11），WheelHandler可能不支持，那可以用MouseArea来替代，代码如下：

MouseArea {
    anchors.fill: parent
    propagateComposedEvents: true // 确保ListView还能接收其他鼠标事件（比如拖拽）
    onWheel: {
        horizontalListView.contentX += wheel.angleDelta.y * 0.5
    }
}

这样调整后，你的水平ListView就能通过鼠标滚轮左右滚动啦！

内容的提问来源于stack exchange，提问作者aviit